ReactJS - How to not get focus on a select element after an onClick event on an icon

Question

In my react js code, I have an icon with an onClick event. If the user clicks on it, the focus goes to an html select element just above it on the page. I don't want the focus to go there. Just on the page itself or where it was before. How can I do that?

Answer 1

To focus an element in React, you can use a Ref eg

const targetRef = useRef(null);

then in your onClick handler just do

targetRef.current.focus();

But you might want to figure out why your focus is currently acting the way it is. It seems odd that the focus changes like that with onClick.