React-md: `Dialog` should have an `initialFocus` prop listed in the docs to be passed onto `FocusContainer`

[yoshi415]

Description

I came across this when closing one dialog and after an async action triggered with onHide. After the async action returns successfully, I display a second dialog confirming success.

On displaying the second dialog, a warning Uncaught Error: You specified that theFocusContainershould focus an element on mount, but a focusable element was not found in the children. This could be because theinitialFocusprop is an invalid id or query selector, or the children do not contain a valid focusable element.undefined is displayed.

I fixed this by passing an initialFocus prop with an id to Dialog and it works fine, but this seems to be undocumented in the docs.

Version

• React 15.4.2
• React-MD 1.0.6

[Edgargmc]

I have the same error. You have an example of assigning an INITIALFOCUS, please

[yoshi415]

@Edgargmc Hey Edgar, sorry for the late reply. It's literally just adding an initialFocus prop with the id of whatever element you want to focus on.

<Dialog
  initialFocus="some-element-id"
/>

[luisrudge]

It's also unnecessary. I have a dialog that doesn't have any inputs, only text. Ideally, I shouldn't need to have to use initialFocus at all. Can we fix this?

[mlaursen]

You can update your dialog to have focusOnMount={false} and it won't do any of the focusing logic.

[luisrudge]

Thanks ❤️

[TifaJ11]

yeah, the focusing logic was slowing down my dialog by a lot. mine also just had text, thanks for bringing that up.