initial autofocus, e.g. in modal overlay

[loopmode]

Hi.
I need to use hotkeys inside a modal overlay.
After the overlay is rendered, currently, the user must click into the container element once to give it focus, after that the hotkeys work as expected.
However, what I need is to have the hotkeys ready right away after the modal has opened up, without further mouse interaction.

This is kinda what I have, and I also tried manually focussing an element inside HotKeys, but it doesn't work. How can this be achieved?

componentDidMount() {
    setTimeout(() => {
        this.refs.video.focus();
        //this.refs.dummyInput.focus();
        //neither way, works, timeout doesn't make a difference either
    }, 500);
}
render() {
    return (
        <div className='MediaPlayer'>
            <HotKeys keyMap={this.hotKeys} handlers={this}>
                <video ref='video' src={this.props.videoSrc}/>
                {/*<input type='hidden' ref='dummyInput' />*/}
            </HotKeys>
        </div>
    );
}

I guess i could make it work by using HotKeys further up the component tree, but I guess I would have to define some part of the logic outside of the target component as well? (keyMap, handlers), should be encapsulated inside the 'app' running inside the modal overlay, shouldn't be known outside of it.

I tried the focused prop too, but it didn't help.

[chrisui]

Interesting one. Thanks for the report! I think this may be down to the browser not thinking the element is truly in focus and so not firing the keyboard events on the correct element. I would've thought that manually calling DOMElement.prototype.focus() would work here though!

I don't have the time to investigate this right now but I will give it a shot either on the train home this evening or tomorrow!

[chrisui]

Just to make sure there's nothing odd about the <video> element have you tried calling focus() on the div outputted by the <HotKeys /> component?

<HotKeys ref={el => el.focus()} />

[mako-taco]

I am experiencing the same sort of issue. My initial app is contained in a <HotKeys>, but the node is not in focus when the app loads, and instead requires a user to click somewhere on the screen to start using hotkeys.

Trying to focus the element on componentDidMount or inside a ref callback also does not seem to help, as the FocusTrap is not getting focus.

EDIT

Actually, if the ref callback is changed a little bit, it works.

const autofocus = (el) => {
    const found = ReactDOM.findDOMNode(el);
    if (found) {
        found.focus();
    }
};

return (
    <HotKeys
        keyMap={keyMap}
        handlers={this.handlers}
        ref={autofocus}>
        ...

[chrisui]

@mako-taco Do you have the examples of both working & non-working focus on mounts?

Seems odd that focus could be called somewhere but hotkeys not be aware of it.

[mako-taco]

Sorry, I have pushed passed it, and no longer have those examples off hand. I don't consider this to be an issue anymore.

[loopmode]

Hey, sorry I didn't reply at all... I consider the callback solution proposed by @mako-taco totally fine. I think it's not even a workaround, just proper usage :) Thanks

Works fine for me too

[chrisui]

👍 Thanks for the update :)

[darsee]

Would it be feasible to add an autofocus prop to <HotKeys> that could do this? I guess internally it would focus the DOM element corresponding to the FocusTrap?

[mendelk]

This is how I implemented this, based on @mako-taco's solution:

const Autofocus = (WrappedComponent) => {
  return class extends Component {
    setFocused(el){
      let found = findDOMNode(el);
      if (found) found.focus()
    }
    render() {
      return <WrappedComponent {...this.props} ref={this.setFocused} />
    }
  }
}

const AutofocusedHotKeys = Autofocus(HotKeys);

[tbranyen]

You can shorten the ref callback to be a one liner with:

const autofocus = el => el && findDOMNode(el).focus();

// ...

<HotKeys ref={autofocus} ... />