MultiSelect: onBlur event mismatch

[dominikj111]

Describe the bug

The component's event "onBlur" is fired on, not only when focus is lost.

Reproducer

https://codesandbox.io/s/objective-wind-13w45j?file=/src/App.jsx:448-459

PrimeReact version

7.2.1

React version

17.x

Language

ALL

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

1a. click on the MultiSelect to show the list of options
2a. pick any option
3a. onBlur event will increase counter above

1b. click on the MultiSelect to show the list of options and then click on filter input or "select all" checkbox
2b. onBlur event will increase counter above

Expected behavior

The onBlur event should to be triggered only when then component as a whole will lost the focus.

So it shouldn't be triggered during options selection nor filtering, but only when user will click (on|to) some(thing|where) else.

[melloware]

I fixed this by not calling onBlur if the Overlay is showing. This seems to fix the issue and blur is only called now when you leave the field with the overlay closed.

[JosuerBague]

Encountered similar behaviour today, but onBlur only gets called on the initial option selection after the panel first shows.

[JosuerBague]

Oh I guess it gets triggered, because the focus switches from the multiSelect input to the multiSelect option thus triggering the onBlur event.

[melloware]

Yes as part of ARIA WCAG accesibility that is what accessibility says should happen @JosuerBague .

[AndrewBoklashko]

Hello folks
Trying to understand if this onBlur behavior is expected(e.g. recommended by ARIA WCAG) or is this something that should be fixed?

I see a similar issue with the Calendar component triggering onBlur when calendar icon is clicked. There is a workaround, so it's not critical:

const calendarRef = useRef<Calendar>(null);
const handleBlur = useCallback(
  (e: FocusEvent<HTMLInputElement>) => {
    if (calendarRef.current.getElement().contains(e.relatedTarget)) {
      // calendar icon click -> do nothing
      return;
    }

    onBlur?.(e);
  },
  [onBlur]
);

My question: is this behavior generally expected when working with all PrimeReact components? Or will it eventually change to only blur when whole component loses focus as requested in the issue description?

Update: from my perspective root onBlur should be triggered only when the whole component loses focus. But it should be possible to pass onBlur to the underlying input component via pt prop and in this case it should be called even when focus gets changed within the root component.

[melloware]

@AndrewBoklashko a PR would be welcome! I agree it should only be when the component loses focus.