Q:

catch keydown events in inner components using react-keydown

I'm using react-keydown library for adding keyboard shortcuts to my application, but can't make it work in inner dialogs components. The dialogs are not always visible, but I expect the keys to work when they are visible.
I'm getting to event_handlers.js._onKeyDown(event) method, but with missing value: fn = undefined, whereas fn should contain the decorated function. 
My components looks like:
<Container>
   <MyDialog>
      <material-ui-dialog/>
   </MyDialog>
</Container>

Container.js:
import keydown from 'react-keydown'
class Container extends Component {
   @keydown('enter') 
   someMethod1(){
      // working
   }
   render() {
      return (
         <div>
            <MyDialog/>
         </div>
      )
   }
}

MyDialog.js:
import keydown, {keydownScoped} from 'react-keydown'
@keydown('enter')
class MyDialog extends Component {
   @keydownScoped('enter')
   someMethod3(){
      // not working
   } 
}

A:

Based on your description in the comments, the issue appears to be that your Dialog components mount and then lose focus so any keybindings inside them will not receive the keystrokes. You have a couple of options:
1) Expand the scope of the keybinding by decorating a component that is an ancestor of your Dialog components and won't lose focus. In an extreme case this could be the root component of your app. Then decorate the desired Dialog component method with keydownScoped. Inside that method examine the props to make sure the current dialog is the active one.
2) Programmatically activate your Dialog keybindings along the lines of this https://github.com/glortho/react-keydown/issues/28.
Hope that helps!

