OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Focus on the search input field whenever showSearch state is true

  • Thread starter Thread starter aavishkar gautam
  • Start date Start date
A

aavishkar gautam

Guest
I have a problem trying to focus on the input field whenever a state showSearch state is true. I am using useRef and useEffect to achieve this. So, whenever showSearch flag changes, i run useEffect hook which checks if showSearch is true and if it is, then it focuses to the HTML element references using useRef. However, there is something wrong with it because it does not run.

here is the code snippet.

Code:
const [showSearch, setShowSearch] = useState(false);
const searchInputRef = useRef<HTMLInputElement>(null);

useEffect(() => {
    console.log(showSearch);
    console.log(searchInputRef);

    if (showSearch && searchInputRef.current){
      searchInputRef.current.focus();
    }}, [showSearch]);



<form onSubmit={handleSubmit} style={{ width: "100%" }}>
                  <InputGroup size="lg">
                    <Input
                      variant="flushed"
                      placeholder="Search"
                      _placeholder={{
                        opacity: 1,
                        color: "gray.500",`your text`
                        fontSize: "1.5rem",
                      }}
                      _focus={{ borderColor: "whiteAlpha.800" }}
                      borderColor="#FFFFFF80"
                      pb={"1rem"}
                      fontSize="2rem"
                      onChange={handleSearchChange}
                      value={searchText}
                      ref={searchInputRef}.  // this is where i have referenced the HTML element.
                    />
                    <InputRightElement
                      w={["45%", "20%"]}
                      justifyContent={"flex-end"}
                    >
                      {searchText.length > 0 && (
                        <Button
                          size="sm"
                          onClick={handleClear}
                          bg={"transparent"}
                          color={"white"}
                          fontSize={"1.1rem"}
                          _hover={{ bg: "transparent" }}
                        >
                          Clear
                        </Button>
                      )}
                    </InputRightElement>
                  </InputGroup>
                </form>

Let me know if you need more information on it. Also, I am using chakra ui for react components.

Tried using UseRef and useEffect so everytime a state flag is true, the focus is changed to the desired input element.

<p>I have a problem trying to focus on the input field whenever a state showSearch state is true. I am using useRef and useEffect to achieve this. So, whenever showSearch flag changes, i run useEffect hook which checks if showSearch is true and if it is, then it focuses to the HTML element references using useRef. However, there is something wrong with it because it does not run.</p>
<p>here is the code snippet.</p>
<pre><code>const [showSearch, setShowSearch] = useState(false);
const searchInputRef = useRef<HTMLInputElement>(null);

useEffect(() => {
console.log(showSearch);
console.log(searchInputRef);

if (showSearch && searchInputRef.current){
searchInputRef.current.focus();
}}, [showSearch]);



<form onSubmit={handleSubmit} style={{ width: "100%" }}>
<InputGroup size="lg">
<Input
variant="flushed"
placeholder="Search"
_placeholder={{
opacity: 1,
color: "gray.500",`your text`
fontSize: "1.5rem",
}}
_focus={{ borderColor: "whiteAlpha.800" }}
borderColor="#FFFFFF80"
pb={"1rem"}
fontSize="2rem"
onChange={handleSearchChange}
value={searchText}
ref={searchInputRef}. // this is where i have referenced the HTML element.
/>
<InputRightElement
w={["45%", "20%"]}
justifyContent={"flex-end"}
>
{searchText.length > 0 && (
<Button
size="sm"
onClick={handleClear}
bg={"transparent"}
color={"white"}
fontSize={"1.1rem"}
_hover={{ bg: "transparent" }}
>
Clear
</Button>
)}
</InputRightElement>
</InputGroup>
</form>
</code></pre>
<p>Let me know if you need more information on it.
Also, I am using chakra ui for react components.</p>
<p>Tried using UseRef and useEffect so everytime a state flag is true, the focus is changed to the desired input element.</p>
 

Latest posts

Top