fix: In usePositioning, ensure that the target ref is initialised with the positioning target if it exists

[edwardUL99]

Previous Behavior

usePositioning.ts created a targetRef initialized to null. Later on, using useCallbackRef, it would create setTarget which would update the ref if used. However, in cases where a custom trigger is used, this setTarget ref is not exposed, so it is not passed into the target. Therefore, the target ref is never updated, and thus, when we use useOnClickOutside in usePopover, it thinks, clicking the custom trigger is outside the popover, therefore closing it. However, this results in the popover re-opening.

New Behavior

The target references are initialized correctly so that the popover's click outside handlers ignore clicks on the trigger.

Related Issue(s)

• Fixes [Bug]: Popover with custom target counts clicking on trigger as "clickOutside" #33862

[github-actions]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-combobox Combobox (including child components)	105.562 kB 34.52 kB	105.627 kB 34.559 kB	65 B 39 B
react-combobox Dropdown (including child components)	106.186 kB 34.462 kB	106.251 kB 34.497 kB	65 B 35 B
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	224.582 kB 64.913 kB	224.647 kB 64.94 kB	65 B 27 B
react-components react-components: entire library	1.171 MB 293.138 kB	1.171 MB 293.16 kB	65 B 22 B
react-datepicker-compat DatePicker Compat	225.344 kB 63.793 kB	225.409 kB 63.818 kB	65 B 25 B
react-menu Menu (including children components)	155.616 kB 46.882 kB	155.681 kB 46.917 kB	65 B 35 B
react-menu Menu (including selectable components)	158.598 kB 47.478 kB	158.663 kB 47.514 kB	65 B 36 B
react-popover Popover	130.32 kB 40.699 kB	130.385 kB 40.722 kB	65 B 23 B
react-positioning usePositioning	28.144 kB 10.046 kB	28.209 kB 10.074 kB	65 B 28 B
react-tag-picker @fluentui/react-tag-picker - package	185.663 kB 55.782 kB	185.728 kB 55.825 kB	65 B 43 B
react-teaching-popover TeachingPopover	91.711 kB 27.921 kB	91.776 kB 27.946 kB	65 B 25 B
react-timepicker-compat TimePicker	108.551 kB 36.094 kB	108.616 kB 36.123 kB	65 B 29 B
react-tooltip Tooltip	57.131 kB 19.949 kB	57.196 kB 19.975 kB	65 B 26 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-avatar Avatar	49.329 kB 15.824 kB
react-avatar AvatarGroup	20.132 kB 7.976 kB
react-avatar AvatarGroupItem	63.473 kB 20.043 kB
react-breadcrumb @fluentui/react-breadcrumb - package	114.719 kB 31.752 kB
react-checkbox Checkbox	35.144 kB 12.085 kB
react-components react-components: Button, FluentProvider & webLightTheme	69.638 kB 20.24 kB
react-components react-components: FluentProvider & webLightTheme	44.473 kB 14.597 kB
react-dialog Dialog (including children components)	100.513 kB 30.131 kB
react-field Field	23.425 kB 8.905 kB
react-input Input	28.04 kB 9.451 kB
react-list List	89.19 kB 26.607 kB
react-list ListItem	112.757 kB 33.441 kB
react-overflow hooks only	12.808 kB 4.819 kB
react-persona Persona	56.22 kB 17.704 kB
react-portal-compat PortalCompatProvider	8.39 kB 2.64 kB
react-progress ProgressBar	17.11 kB 6.899 kB
react-radio Radio	32.698 kB 10.351 kB
react-radio RadioGroup	15.788 kB 6.431 kB
react-select Select	27.758 kB 10.131 kB
react-slider Slider	37.994 kB 12.723 kB
react-spinbutton SpinButton	34.965 kB 11.661 kB
react-swatch-picker @fluentui/react-swatch-picker - package	105.112 kB 30.526 kB
react-switch Switch	35.345 kB 11.322 kB
react-table DataGrid	161.06 kB 45.718 kB
react-table Table (Primitives only)	42.692 kB 13.862 kB
react-table Table as DataGrid	131.895 kB 36.579 kB
react-table Table (Selection only)	70.562 kB 20.007 kB
react-table Table (Sort only)	69.205 kB 19.618 kB
react-tags InteractionTag	15.225 kB 6.165 kB
react-tags Tag	29.098 kB 9.559 kB
react-tags TagGroup	82.745 kB 24.532 kB
react-textarea Textarea	26.598 kB 9.761 kB
react-tree FlatTree	147.793 kB 42.393 kB
react-tree PersonaFlatTree	148.538 kB 42.536 kB
react-tree PersonaTree	144.749 kB 41.391 kB
react-tree Tree	144.01 kB 41.265 kB

_{🤖 This report was generated against 8246785e7f874eaa3713b6a4f01c1ead93227b15}

[github-actions]

Pull request demo site: URL

[edwardUL99]

Popover changes verified to work in demo site

[layershifter]

The fix should be discussed in offline with the team first

[edwardUL99]

The fix should be discussed in offline with the team first

Hi @layershifter, is there a team alias I can reach out to?