Not working with component rendering a <React.Fragment> or an array

[lpillonel]

When I want to use react-keydown with a component rendering an array or a React.Fragment, it's working only if i click on the first item of the array (respectively first child of the Fragment).

import React, { PureComponent, Fragment } from 'react'
import keydown from 'react-keydown'

import TreeViewHeader from './TreeViewHeader'
import TreeViewComponent from './TreeView'

export default class TreeView extends PureComponent {
  @keydown('up')
  selectPreviousRow (event) {
    console.log('select previous row', event)
  }

  render () {
    return (
      <Fragment>
        <TreeViewHeader />
        <TreeViewComponent />
      </Fragment>
    )
  }
}

In this example, it's working only if I click on the first item. I tried to swipe TreeViewHeader and TreeViewComponent, and then it's working only if I click on TreeViewComponent

For now as a workaround I wrap all inside a div and it's working, but I would prefer to use a Fragment.

Thanks for your help,

Luca

[glortho]

Thank you for reporting this @lpillonel . It appears this is the issue reactjs/react.dev#201

Unfortunately this could take a little time to sort out. Stay tuned.

NOTE: The issue is that to have the keybinding active for all components wrapped by a fragment, we'll need to do something like:

1. detect that the component has a fragment at root
2. bind click activations for the component's keybindings to all top-level children of the fragment

[lpillonel]

Maybe just reflecting this limitation in the documentation is enough.

And by the way, thanks for this great library : )
Really elegant way to add key binding to actions on a component 👍

[glortho]

Yeah that's a good call -- documentation now, better solution later.

And thank you for the compliment @lpillonel !