[Combobox] - Fix handleChange when children changes based on input

[apliano]

WHY are these changes introduced?

When a Combobox has children that is rendered based on an input change, our previous implementation failed to mark the popover as active. This was due to the fact that the handleChange was triggered before the re render of the parent component, and at that point the Combobox is unaware of the "future" children.

As a small example:

    function ComboboxWithHandledChange() {
      const handleChange = (value: string) => {
        setInputValue(value);
      };

      const [inputValue, setInputValue] = useState('');

      return (
        <Combobox
          activator={
            <Combobox.TextField
              onChange={handleChange}
              label=""
              value=""
              autoComplete="off"
            />
          }
        >
          {inputValue.length > 0 ? (
            <Listbox>
              <Listbox.Option accessibilityLabel="Option 1" value="option1" />
            </Listbox>
          ) : null}
        </Combobox>
      );
    }

1. Initially the input is empty, hence the Combobox has no children
2. The user types something, let's say "t"
3. The callback handleChange of the Combobox is called, which checks the value shouldOpen -> Boolean(!popoverActive && Children.count(children) > 0). At this point the parent component has not been re-rendered, so the children is still null and not a Listbox; this results on popoverActive not being set to true.
4. The popover is then not marked as active.
5. After the parent re-renders, the Combobox re-renders again but as popoverActive is set to false, the Popover is not marked as active.

With the fix, we have changed shouldOpen to assert if there's been a callback call (handleChange or handleFocus) and then in rendering time, we set the active property of the Popover based on shouldOpen has been set and if there's any Children.

WHAT is this pull request doing?

This PR addresses the aforementioned issue, changing the logic of shouldOpen to just ensure if the popover is currently active or not. Then when rendering the Popover we ensure that shouldOpen has been called (which has set popoverActive to true) and that there's children passed to the Combobox.

How to 🎩

• Check the new Unit Test added
• Run Storybook and with this path: ?path=/story/all-components-combobox--with-children-based-on-input

🎩 checklist

• Tested a snapshot
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[romidane]

LGTM

[chloerice]

Thanks for tackling this @apliano!