Unable to set focus to React ComboBox component

What package(s) are you using?

• carbon-components
• carbon-components-react

Summary

Generally with React we would set focus on a component by getting a ref to the component and calling the focus function on the current ref. Unfortunately, there is no forwardRef and we have no way to get a ref to the input within the ComboBox. I can’t seem to figure out a way to inject anything in via props. Is there some way to make this happen?

Relevant information

An example of what I am trying to do:

const Example = () => {
  const [adding, setAdding] = useState(false);
  return (
    <>
      <Button
        onClick={() => {
          setAdding(true);
          // HACK to set focus
          setTimeout(
            () => document.getElementById("test").focus(),
            100 // YMMV *shrug*
          );
        }}
      />

      <ComboBox
        className={classNames({ [styles.hide]: !adding })}
        downshiftProps={{ isOpen: true }}
        id="test"
        onChange={() => setAdding(false)}
        items={[]}
      />
    </>
  )
}

Basically, when the user clicks a Button the ComboBox will show with the dropdown portion visible. I would also like the text input to have focus so the user can start typing right away. You can see I’m using a setTimeout to manually wait for the box to appear so I can set focus to it. Would love some other more reliable method. Suggestions?

[emyarod]

@supermonkeybrainz converted to code sandbox https://codesandbox.io/s/sweet-bush-kkb65

[supermonkeybrainz]

Got it, thanks for the example!