[Bug]: DropDown does not always blur

[trueleader]

Library

React / v8 (@fluentui/react)

System Info

Microsoft Edge Version 103.0.1264.44 (Offizielles Build) (64-Bit)

Are you reporting Accessibility issue?

no

Reproduction

https://codepen.io/NE-Maxworx/pen/jOzbywP?editors=1111

Bug Description

1. Open DropDown2
2. While callout of DropDown2 is open, open DropDown1

Actual Behavior

Console output:

2 focus
1 focus

Expected Behavior

Console output:

2 focus
2 blurred
1 focus

This is a simplified version of our original problem. Our blur handlers contain a bunch of logic (e.g. validation to ensure a required dropdown never closes) which is never called in this case

Don´t know if this is related to #22133

Logs

No response

Requested priority

Normal

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.

[gouttierre]

@trueleader - Thanks for filing this issue with us. To set expectations the developers will review this issue once capacity allows.

@layershifter - Would you be able to confirm if this is a regression, or if this behavior is an issue, or if this is by design?

[layershifter]

@trueleader this indeed looks like a bug, but it's actually a limitation of this implementation. Currently you can't rely on onBlur because of that:

When you're closing "Dropdown 2" in your scenario - focus is inside "Dropdown Callout 2" i.e. out of DOM order. A listener for onBlur simply never gets called. I tried to use eventBubblingEnabled on Layer, but does not seem that events are properly propagated.

I was thinking on a workaround it's not elegant, but works:

• we need to bind an event listener for onBlur to Callout
• perform checks that .relatedTarget is outside both parts of Dropdown

function App() {
  const dropdown1Ref = React.useRef();
  const callout1Ref = React.useRef();

  return (
    <Dropdown
      ref={dropdown1Ref}
      calloutProps={{
        onBlur: (e) => {
          if (
            callout1Ref.current?.contains(e.relatedTarget) ||
            dropdown1Ref.current?.contains(e.relatedTarget)
          ) {
            return;
          }

          console.log(`1 blurred (Callout)`);
        },
        ref: callout1Ref,
      }}
      onBlur={() => console.log(`1 blurred`)}
    />
  );
}

I put altogether to a CodeSandbox (https://codesandbox.io/s/admiring-pond-m5q9dj), please let us know if the workaround works.

[trueleader]

The workaround seems to work. I wrapped it in an useCallback and added an additional check (boolean ref, resetting in onFocus) to avoid multiple onBlur calls when callout and dropdown together loose focus