Closed as not planned
Closed as not planned
Description
Component
Popover
Package version
9.59.0
React version
18.2.0
Environment
System:
OS: Windows 11 10.0.26100
CPU: (16) x64 AMD EPYC 7763 64-Core Processor
Memory: 25.68 GB / 63.95 GB
Browsers:
Edge: Chromium (131.0.2903.86)
Internet Explorer: 11.0.26100.1882
npmPackages:
@fluentui/react: 8.111.3 => 8.111.3
@fluentui/react-calendar-compat: 0.1.1 => 0.1.1
@fluentui/react-components: 9.56.3 => 9.56.3
@fluentui/react-experiments: 8.14.114 => 8.14.114
@fluentui/react-icons: 2.0.271 => 2.0.271
@fluentui/react-icons-mdl2: 1.3.69 => 1.3.69
@fluentui/react-list-preview: 0.3.3 => 0.3.3
@fluentui/react-motion-components-preview: 0.2.0 => 0.2.0
@fluentui/react-theme: 9.1.14 => 9.1.14
@fluentui/react-theme-sass: 9.0.0-alpha.18 => 9.0.0-alpha.18
@fluentui/scheme-utilities: 8.0.1 => 8.0.1
@types/react: 18.2.33 => 18.2.33
@types/react-dom: 18.2.14 => 18.2.14
react: 18.2.0 => 18.2.0
react-dom: 18.2.0 => 18.2.0
Current Behavior
When you click on a custom trigger that launches a Popover, it is treated as a "click outside" and closes the popover, even when the target is passed as a positioning prop.
The root cause is in usePostioning.ts where targetRef
and setTarget
are not initialized to point to the passed in target
.
I believe the fix is to update these two lines:
-const targetRef = React.useRef<TargetElement | null>(null);
+const targetRef = React.useRef<TargetElement | null>(options.target);
...
- const setTarget = useCallbackRef<TargetElement>(null, target => {
+ const setTarget = useCallbackRef<TargetElement>(targetRef.current, target => {
if (targetRef.current !== target) {
targetRef.current = target;
updatePositionManager();
}
});
Expected Behavior
When passing a target
to the positioning
prop to the popover
component, clicking on the target shouldn't count as clicking outside.
Reproduction
https://stackblitz.com/edit/u5pgjqno
Steps to reproduce
- Open the stackblitz
- Click on the button to open the popover
- Click on the button again
- Expected: The popover doesn't close and then reopen
- Actual: The popover closes and then reopens
Are you reporting an Accessibility issue?
None
Suggested severity
High - No workaround
Products/sites affected
No response
Are you willing to submit a PR to fix?
no
Validations
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- The provided reproduction is a minimal reproducible example of the bug.