Bug: onBlur event does not fire if loss of focus occurred due to element being removed by react

[reubn]

onBlur event does not fire if loss of focus occurred due to element being removed by react under certain circumstances - behaviour is not consistent.

Link to code example 18.3.0-next-32baab38f-20220811: https://codesandbox.io/s/react-focus-bug-18-3-0-qc5tu8?file=/src/App.js Link to code example 18.0.0-fc46dba67-20220329: https://codesandbox.io/s/react-focus-bug-18-0-0-bp6qn1?file=/src/App.js

Focus outside container: Button has focus: Button clicked - resulting in react removing it from DOM ∴ focus is lost from container - but react does not fire onBlur event:

React versions: 18.3.0-next-32baab38f-20220811, 18.0.0-fc46dba67-20220329

Steps To Reproduce

See code example

Link to code example 18.3.0-next-32baab38f-20220811: https://codesandbox.io/s/react-focus-bug-18-3-0-qc5tu8?file=/src/App.js Link to code example 18.0.0-fc46dba67-20220329: https://codesandbox.io/s/react-focus-bug-18-0-0-bp6qn1?file=/src/App.js

The current behaviour

• 18.3.0-next-32baab38f-20220811:

  • Chrome Dev macOS Version 105.0.5176.3:
    • Keyboard Activation: No onBlur event fires on button nor parent
    • Mouse Activation: No onBlur event fires on button nor parent
  • Safari macOS Version 15.4:
    • Keyboard Activation: No onBlur event fires on button nor parent
    • Mouse Activation: onBlur event fires on button and parent

• 18.0.0-fc46dba67-20220329:

  • Chrome Dev macOS Version 105.0.5176.3:
    • Keyboard Activation: onBlur event fires on button and parent
    • Mouse Activation: onBlur event fires on button and parent
  • Safari macOS Version 15.4:
    • Keyboard Activation: No onBlur event fires on button nor parent
    • Mouse Activation: onBlur event fires on button and parent

See code example for more details

The expected behaviour

onBlur events fire consistently

[malikhaideraliraza]

Hi @reubn your issue is not with the react rather it is regarding the core HTML implementation issue. Try giving your div a tabindex. find more details here. tabindex doc and stackoverflow Sol Thanks

[reubn]

Thanks @malikhaideraliraza

Yeah, differences between browsers are to be expected, but if react is going to prevent the use of native onFocusIn and onFocusOut events, then the behaviour of the replacements should be consistent and stable between react versions. There is a difference in behaviour between 18.0.0 and later.

Adding a tabIndex to the div is not a workable solution. The div should not be tabbable - only the input and buttons should be.

[malikhaideraliraza]

yes you right

Thanks @malikhaideraliraza

Yeah, differences between browsers are to be expected, but if react is going to prevent the use of native onFocusIn and onFocusOut events, then the behaviour of the replacements should be consistent and stable between react versions. There is a difference in behaviour between 18.0.0 and later.

Adding a tabIndex to the div is not a workable solution. The div should not be tabbable - only the input and buttons should be.

yes you are right but actualy in dom we may have div inside another div so we need to set piriority for div for focusing (like z-index).

[reubn]

Thanks again @malikhaideraliraza

I don't follow, but this issue does not relate to having a tabIndex on a parent.

The div should not be focusable, and should not sit in the keyboard navigation tree.

React's onBlur and onFocus events should bubble to the div, but the parent should not be focusable itself.

Adding a tabIndex would make it focusable, and degrade the experience for keyboard users. This is not semantic, and is not what I am asking.

There are very few reasons to ever set tabIndex on an element - especially a non-interactive element like a div.

This is about react's reimplementation of native focus events, bubbling, and lack of consistency between browsers and react versions.

[craigwduckett]

Am also have this issue where an element is unmounted and blur is not being called. Reverting back to 18.0.0 fixes it.

[teadams]

We are having the same issue. Is there an update please?

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!