Bug:

[samislam]

I have the following code:

import React, { useRef } from 'react';

export default function FormDialog() {
  const inputRef = useRef();
  return (
    <div>
      <input
        ref={inputRef}
        onBlur={() => {
          inputRef.current?.focus();
        }}
        autoFocus 
      />
    </div>
  );
}

It's a simple input with ref, it must be always focused no matter what. It works great if you tried it in chrome, or any chromium browser such as Brave browser.

but It doesn't work in Firefox.

Here's a StackBlitz instance that you can use, try to open it in Firefox and try to open it in chrome and see the difference: https://stackblitz.com/edit/react-ts-khzbbk?file=App.tsx

Here's are my info:

Is it a browser related issue? I think it's related to react, because Firefox supported the .focus() method since the B.C.E. It's impossible to be a Firefox problem

one more info:

I'm using React 18, the latest version as of 2-september-2022

[sadiki-o]

are you trying to use the onMouseEnter instead of onBlur?

[sadiki-o]

i tried the same code you have with vite and typescript and it works fine with onMouseEnter in firefox, also why would you want the input to keep the focus when you try to leave out of it(make it lose focus by clicking somewhere else which is what onblur does)?

[samislam]

@sadiki-o, I want it to be always focused even if someone clicked outside of it. that's the requirement for the app I'm building, it's not an optional choice. and about your second question, I'm using onBlur and not onMouseEnter

[sadiki-o]

ohh alright why don't you set a css conditional rule with a defined state for example called isActive with a value of false, and whenever someone enters the input (clicks it) you set the state to true and your conditional css will set the input to active ...

PS: after wrting all of this i found something on stackoverflow that might be useful to use in firefox case : code image

here is the thread on stackoverflow : link

hope this helps u

[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!