fix: support external focus management on Combobox and Dropdown

[Weffe]

This PR exposes a ref to the activeDescendantImperative api so that consumers can control the focus for Combobox, Dropdown, and Listbox programmatically.

Previous Behavior

If a consumer wanted to move focus to an option, they usually would use the native .focus() api on their target element. This however was a pitfall for Combobox, Dropdown, and Listbox as they own their own focus state for the options via useActiveDescendant. Meaning any attempts at using the .focus() api would get overwritten or seemingly ignored because it's the wrong tool to begin with.

You can see the issue on the Storybook for Combobox + Virtualizer: https://storybooks.fluentui.dev/react/?path=/docs/components-combobox--docs#virtualizer

1. Open the combobox and select an option far down the list (e.g. Option 500).
2. Close the combobox
   a. You might have to lose focus by tabbing away and back to the combobox. See GIF.
3. Reopen the combobox with keyboard
4. See the virtual window scrolled into view Option 500
5. Press the down arrow but notice the focus moves to Option 489 for example (it might differ based on viewport size)

The expected behavior there is for it to move the focus down to Option 501. The reason this is occuring is because the virtual window is only rendering into the DOM Options 489-570 for example and there is no way to sync what item to focus in the active descendant.

GIF of buggy behavior

Note: I did notice if you re-open the combobox again, the 2nd time the focus is properly moved.

New Behavior

Consumers can now use the activeDescendantImperativeRef prop to get at the same underlying focus state and can correctly move focus to a target of their choice.

Going back to the Combobox + Virtualizer example, the consumer would need to update their code so that on open they use the activeDescendantImperativeRef.focus(targetHtmlid) method to sync focus.

Related Issue(s)

[github-actions]

Pull request demo site: URL

[github-actions]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-combobox Combobox (including child components)	101.09 kB 33.224 kB	101.184 kB 33.249 kB	94 B 25 B
react-combobox Dropdown (including child components)	100.858 kB 33.003 kB	100.952 kB 33.018 kB	94 B 15 B
react-components react-components: entire library	1.295 MB 325.231 kB	1.295 MB 325.249 kB	140 B 18 B
react-headless-components-preview react-headless-components-preview: entire library	198.183 kB 56.549 kB	198.231 kB 56.57 kB	48 B 21 B
react-tag-picker @fluentui/react-tag-picker - package	173.769 kB 54.101 kB	173.817 kB 54.114 kB	48 B 13 B
react-timepicker-compat TimePicker	104.049 kB 34.748 kB	104.143 kB 34.772 kB	94 B 24 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-components react-components: Button, FluentProvider & webLightTheme	66.328 kB 19.02 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	226.19 kB 67.909 kB
react-components react-components: FluentProvider & webLightTheme	39.525 kB 13.113 kB
react-portal-compat PortalCompatProvider	5.567 kB 2.237 kB

_{🤖 This report was generated against fdf755ce26d41c57452b79fb23fc4a590630a1b5}

[bsunderhus]

I can confirm that I can reproduce the bug @Weffe, but I don't get why making the internal active descendant API to be the solution. The bug is a problem to be resolved for sure, but it does not require exposing internals for that AFAIU

[Weffe]

@bsunderhus

What would be the alternative? In the virtual-window situation, the active descendant state is internal and we need a way to expose it so there's a programmatic way to change that internal state. Without it, there's no way to make Dropdown, Combobox, or Menus keyboard accessible if a Dev chooses to virtualize them.

I personally tried using the useObservedElement hook and also just manually focusing the target html option but those don't update the aria-activedescendant attribute on the trigger. In this case, you'd be out of sync with what the focus outline is visibly on vs what the trigger's activedescendant is pointing to.