Fix TextField clear issues

aelassas · Dec 14, 2023 · 86ea153 · 86ea153
1 parent 95593cf
commit 86ea153
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/backend/src/components/BookingFilter.tsx b/backend/src/components/BookingFilter.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useRef } from 'react'
 import {
   FormControl,
   TextField,
@@ -38,6 +38,8 @@ function BookingFilter({
   const [keyword, setKeyword] = useState('')
   const [minDate, setMinDate] = useState<Date>()
 
+  const inputRef = useRef<HTMLInputElement>(null)
+
   const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setKeyword(e.target.value)
   }
@@ -115,6 +117,7 @@ function BookingFilter({
         </FormControl>
         <FormControl fullWidth margin="dense">
           <TextField
+            inputRef={inputRef}
             variant="standard"
             value={keyword}
             onKeyDown={handleSearchKeyDown}
@@ -126,6 +129,7 @@ function BookingFilter({
                   size="small"
                   onClick={() => {
                     setKeyword('')
+                    inputRef.current?.focus()
                   }}
                 >
                   <ClearIcon className="d-adornment-icon" />

diff --git a/backend/src/components/Search.tsx b/backend/src/components/Search.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useRef } from 'react'
 import { IconButton, TextField } from '@mui/material'
 import { Search as SearchIcon, Clear as ClearIcon } from '@mui/icons-material'
 import { strings as commonStrings } from '../lang/common'
@@ -15,6 +15,7 @@ function Search({
   onSubmit
 }: SearchProps) {
   const [keyword, setKeyword] = useState('')
+  const inputRef = useRef<HTMLInputElement>(null)
 
   const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setKeyword(e.target.value)
@@ -39,6 +40,7 @@ function Search({
       <form autoComplete="off" onSubmit={handleSubmit}>
         <input autoComplete="false" name="hidden" type="text" style={{ display: 'none' }} />
         <TextField
+          inputRef={inputRef}
           variant="standard"
           value={keyword}
           onKeyDown={handleSearchKeyDown}
@@ -50,6 +52,7 @@ function Search({
                 size="small"
                 onClick={() => {
                   setKeyword('')
+                  inputRef.current?.focus()
                 }}
               >
                 <ClearIcon style={{ width: 20, height: 20 }} />

diff --git a/frontend/src/components/BookingFilter.tsx b/frontend/src/components/BookingFilter.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useRef } from 'react'
 import {
   FormControl,
   TextField,
@@ -38,6 +38,8 @@ function BookingFilter({
   const [keyword, setKeyword] = useState('')
   const [minDate, setMinDate] = useState<Date>()
 
+  const inputRef = useRef<HTMLInputElement>(null)
+
   const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setKeyword(e.target.value)
   }
@@ -115,6 +117,7 @@ function BookingFilter({
         </FormControl>
         <FormControl fullWidth margin="dense">
           <TextField
+            inputRef={inputRef}
             variant="standard"
             value={keyword}
             onKeyDown={handleSearchKeyDown}
@@ -126,6 +129,7 @@ function BookingFilter({
                   size="small"
                   onClick={() => {
                     setKeyword('')
+                    inputRef.current?.focus()
                   }}
                 >
                   <ClearIcon className="d-adornment-icon" />