fix(react-combobox): close controlled dropdown by clicking outside

[dmytrokirpa]

Previous Behavior

Controlled dropdown & combobox cannot get dismissed by clicking outside

New Behavior

Controlled dropdown & combobox get dismissed by clicking outside

Related Issue(s)

• Fixes [Bug]: open-state-controlled Dropdown cannot get dismissed by clicking outside the dropdown button #30045

[fabricteam]

Perf Analysis (@fluentui/react-components)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
FluentProviderWithTheme	virtual-rerender-with-unmount	84	80	10	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	625	640	5000
Button	mount	308	301	5000
Field	mount	1146	1113	5000
FluentProvider	mount	702	712	5000
FluentProviderWithTheme	mount	87	79	10
FluentProviderWithTheme	virtual-rerender	30	33	10
FluentProviderWithTheme	virtual-rerender-with-unmount	84	80	10	Possible regression
MakeStyles	mount	869	860	50000
Persona	mount	1770	1735	5000
SpinButton	mount	1389	1339	5000
SwatchPicker	mount	1643	1669	5000

[fabricteam]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-combobox Combobox (including child components)	101.39 kB 33.324 kB	103.467 kB 33.927 kB	2.077 kB 603 B
react-combobox Dropdown (including child components)	102.028 kB 33.263 kB	104.094 kB 33.85 kB	2.066 kB 587 B
react-components react-components: entire library	1.094 MB 270.664 kB	1.094 MB 270.732 kB	195 B 68 B
react-timepicker-compat TimePicker	104.384 kB 34.782 kB	106.455 kB 35.452 kB	2.071 kB 670 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-components react-components: Button, FluentProvider & webLightTheme	69.141 kB 20.157 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	211.741 kB 60.957 kB
react-components react-components: FluentProvider & webLightTheme	44.442 kB 14.607 kB
react-portal-compat PortalCompatProvider	8.39 kB 2.64 kB
react-tag-picker @fluentui/react-tag-picker - package	181.136 kB 54.463 kB

_{🤖 This report was generated against 4c22606e2245ec8a172d070433bc4522818ce942}

[mainframev]

@dmytrokirpa

I think storybook example should be adjusted with focus, in controlled case it's not automatically focused, so later key navigation is not possible and when hitting ESC it's not closing 🙂

[dmytrokirpa]

@dmytrokirpa

I think storybook example should be adjusted with focus, in controlled case it's not automatically focused, so later key navigation is not possible and when hitting ESC it's not closing 🙂

Nice catch, thank you @mainframev. I've added focus management to new stories.