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?
When you do something like:
if (inputRef.current.focus())
You are still making a call to the function, which triggers it and focuses the input, the if statement expects a statement which returns true or false however your call to the focus() function does not return such a value, it returns the function itself.
Here's another way to utilize the useEffect hook as follows:
useEffect(() => {
if (isSearchBarOpen) {
inputRef.current.focus();
} else {
inputRef.current.blur();
}
}, [isSearchBarOpen])