React Use-Hook-Form setFocus not Setting Focus between Bootstrap Accordions

Question

We have a 3 section form & we are requiring the user to fill out this form in a particular order pictured below (1. From Bin, 2. Item, 3. To Bin). Upon entering the required info in a section, the next section should automatically appear with focus on the first input. These 3 sections are simply part of 1 react-hook-form.

We are noticing, however, that react-hook-form's setFocus function does not set focus on the first input when we change sections and we can not seem to determine why this is or how to make it do so. I've seen a couple setTimeout hacks, but this does not seem like the correct approach.

Here is a simple codesandbox we put together that replicates the issue.

Any help on this would be greatly appreciated!

Answer 1

I can only point you to the right direction - this issue is because the accordion items are hidden. If I expand them all by setting activeKey and then navigate through the inputs, it works. Accordion.Body has display=none when collapsed and you can't focus hidden elements.

I thought it would fix it, when I set focus in useEffect, after activeIndex has changed, but this didn't fix the problem:

  useEffect(() => {
    if (activeSection === 1) {
      setFocus("itemID");
    }
    if (activeSection === 2) {
      setFocus("binTo");
    }
  }, [activeSection, setFocus]);

There are also no re-renders, which could lead to loosing focus.