Skip to content

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

Closed as not planned
@hoovercj

Description

@hoovercj

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

  1. Open the stackblitz
  2. Click on the button to open the popover
  3. Click on the button again
  4. Expected: The popover doesn't close and then reopen
  5. 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.

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions