Default focused element

[davidgarsan]

Is there a way to set a default focused element as original Spatial Navigation does with config sections?

[raphamorim]

doesn't exist a directly API for it yet. but you can do something like:

const Item = ({focused, setFocus, focusPath}) => {
  focused = (focused) ? 'focused' : 'unfocused'
  setFocus() // set inital setFocus
  return <div onClick={() => { setFocus() }} >It's {focused} Item</div>
}

[davidgarsan]

Thank you! But maybe that can be lead to some warnings for updating state in render time (collateral effects). Anyway, finally I came to this in the Focusable HOC:

componentDidMount() {
    this.addFocusable(findFocusable(this));
    if(this.props.focusPath === this.props.defaultFocus) {
        this.props.setFocus();
    }
}

This way I can keep a focusable default element even in complex layouts, at page component level, accesible via react-router too.