Javascript / React - Question about .focus() behaviour

I've just created a small search bar component that appears/disappear when clicking on an icon. It hides and shows (changes opacity and width) with a nice animation based on if the input is focused or not.

Here is the code that works perfectly:

const SearchBar = () => {
  const inputRef = useRef();
  const [isSearchBarOpen, setIsSearchBarOpen] = useState(false);

  const handleClick = () => {
    if (!isSearchBarOpen) {
      setIsSearchBarOpen(true);
      inputRef.current.focus();
    } else {
      inputRef.current.blur();
      setIsSearchBarOpen(false);
    }
  };

  return (
    <div className="search-container">
      <input
        type="text"
        placeholder="Search content"
        className="searchbar-input"
        ref={inputRef}
      />
      <BiSearch
        className="search-icon"
        size="2.5rem"
        color="#fff"
        onClick={handleClick}
      />
    </div>
  );
};

However when building it, I noticed a few things. The following code doesn't work (the search bar only shrinks when pressing the icon but as soon as it's not pressed anymore the input is focused again):

if (inputRef.current.focus()) {
  inputRef.current.blur();
} else {
  inputRef.current.focus();
}

Other weird reaction, I noticed that the exact same thing happen when I just insert .focus() in a if statement.

if (!inputRef.current.focus()) console.log('I dont know whats happening');

The line of code above also triggers an input focus when clicking on the icon.

Could someone just explain me what happens under the hood? Why is .focus called no matter what? And is there a better way/practice to toggle focus while clicking on the same button than my code that works?

Via Active questions tagged javascript - Stack Overflow https://ift.tt/PVhpB7t06