"No focusable element" error thrown if children are hidden.

I have a hidden dialog box wrapped in a FocusTrap. I make the dialog box visible at the same time that I activate the FocusTrap. This causes the error:

index.js:163 Uncaught Error: You can't have a focus-trap without at least one focusable element.

It seems that as the FocusTrap activates, it’s upset that there isn’t already a non-hidden focusable element, even though I’m trying to create one simultaneously. If I add a fake always-visible focusable element it stops complaining. But I don’t want that in production. My setup is basically this:

<FocusTrap active={showIt}>
	<input style={{visibility: "visible"}} tabIndex={0}/>     // FAKE focusable element makes it work.
	<div style={{visibility: showIt ? "visible" : "hidden"}}>
		<input style={{visibility: "inherit"}} tabIndex={0}/>
	</div>
</FocusTrap>

I don’t think I can use fallbackFocus since none of the contained elements are focusable while they’re hidden. Is there a way just to suppress this error from being thrown? Thanks!

[liudonghua123]

I have faced the same problem while I was using preact-material-components@1.5.4, the dependences are strange.

D:\code\electron\epmd-master>npm ls focus-trap
epmd@0.1.0 D:\code\electron\epmd-master
`-- preact-material-components@1.5.4
  +-- @material/dialog@0.39.3
  | `-- focus-trap@2.4.6
  `-- @material/drawer@0.39.3
    `-- focus-trap@3.0.0

[0xF013]

it looks like it fails if it’s activated by default in componentDidMount(). The reason for this is probably that the actual attachment is done asynchronously by React or that componentDidMount happens a tick before the redraw, meaning tabbable.js finds zero focusable elements (since they are either not in the DOM at that moment or hidden or I don’t know. Changing that callback’s code to

      if (this.props.active) {
        setTimeout(() => this.focusTrap.activate());
      }

makes it work (hurray angular v1 solutions).

I suggest doing this in a fork in the meanwhile until I figure out what’s up with React or I or someone else does a PR.