New containerElements option doesn't lend itself to React

My scenario: I want to limit focus to the child of FocusTrap, and a set of CSS selectors. Here’s what my code has to look like:

export const MyFocusTrap = props => {
  const ref = React.useRef();
  const [dummy, setDummy] = React.useState();

  React.useEffect(() => {
    setDummy(Math.random());
  }, []);

  // `array` is my own array utils library.
  const elts = array.compact(array.flatten([
    props.containerCss.map(s => Array.from(document.querySelectorAll(s))),
    ref.current
  ]));

  return (
    <FocusTrapReact containerElements={elts}>
      <div ref={ref}>{props.children}</div>
    </FocusTrapReact>
  );
};

The issues I see are:

1. In order to include the child, I have to use a ref. I don’t want that div to exist at all.
2. Because the ref is necessary, I have to use dummy state to force the component to render twice on mount. Otherwise, the ref wouldn’t be added to the elements list. This is the biggest issue, because it causes a potentially significant performance hit.
3. containerElements must be HTMLElements, not selectors, so I have to do a lot of extra work to get them into the right format.

[zioth]

You could do what I did, and convert selectors to elements each time you need the data, but I understand your reasoning for avoiding that.

I used an observer and a custom hook to add and remove trapped elements. I thought of going the context route, but I felt like that would add too much of a structural requirement to components. It’s probably the way to go if you want to integrate it into focus-trap-react.

I’m not sure why you’re seeing 4 renders in your sandbox. I added a console.log(), and only got two outputs. Then I changed the global counter to a ref, and the UI displayed 2. So I think you get the same number of renders using the React and non-React version.

Anyway, should this ticket be closed?

[stefcameron]

Alright, thanks again, closing.