0

I have a parent component that uses the react-popper library like so

<Manager
  className=''
  data-component-name={componentName}
  data-store-name={...}
  onKeyUp={(e) => {
    if(e.keyCode === 38) {

    }
  }}
  onKeyDown={(e) => {
    if(e.keyCode === 40) {
      console.log('cls list', e);
    }
  }}>
  <Target
    className={''}>
    <SearchInput
      componentName={...}
      storeName={...}
      placeholderLabel={...}
      refCallback={...}
      disabled={...}/>
  </Target>
  <Popper placement='bottom'
          modifiers={popperModifiers}
          className={'myClass'}>
    <SearchResults componentName={...}
                   storeName={...}/>}
  </Popper>
</Manager>

So inside the Popper JSX component, I have the child component SearchResults which is a parent to another component as follows

<div>
  {nodes.length
    ? nodes.map(node =>
      <TreeNode key={...} node={node} {...dataProps} />)
    : <div className=''>
      {
        null
      }
    </div>
  }
</div>

The problem here is that I would like the above wrapping Div to listen to the keyUp and down events, but it doesn't not even after using the tabIndex='0', it only works when I put it on the popper manager like up above, I would like to achieve something like this fiddle

Thabo
  • 1,303
  • 2
  • 19
  • 40

1 Answers1

1

Search in your code (Target, SearchInput, SearchResults components) to see if you have already catch onKeyUp and onKeyDown events and stopPropagation on them. Remove the stopPropagation if there are.

Thach Nguyen
  • 76
  • 1
  • 7