UI: Improved UX in Search Bar
This commit is contained in:
parent
24a2fc35e0
commit
508b892c0b
@ -7,6 +7,10 @@ import {
|
||||
useEffect,
|
||||
useRef,
|
||||
useMemo,
|
||||
ClassAttributes,
|
||||
JSX,
|
||||
Key,
|
||||
LiHTMLAttributes,
|
||||
} from "react";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
@ -31,14 +35,19 @@ export function SearchBar(props: SearchBarProps) {
|
||||
let { tableData, setFilteredList } = props;
|
||||
const [search, setSearch] = useState<string>("");
|
||||
const debouncedSearch = useDebounce(search, 250);
|
||||
const [open, setOpen] = useState(true);
|
||||
|
||||
// Define a function to handle the Esc key press
|
||||
function handleEsc(event: React.KeyboardEvent<HTMLDivElement>) {
|
||||
if (event.key === "Escape") {
|
||||
console.log("Escape key pressed");
|
||||
setSearch("");
|
||||
setFilteredList(tableData);
|
||||
}
|
||||
|
||||
// check if the key is Enter
|
||||
if (event.key === "Enter") {
|
||||
setOpen(false);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
@ -50,11 +59,12 @@ export function SearchBar(props: SearchBarProps) {
|
||||
}
|
||||
}, [debouncedSearch, tableData, setFilteredList]);
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.value === "") {
|
||||
const handleInputChange = (event: any, value: string) => {
|
||||
if (value === "") {
|
||||
setFilteredList(tableData);
|
||||
}
|
||||
setSearch(e.target.value);
|
||||
|
||||
setSearch(value);
|
||||
};
|
||||
|
||||
const suggestions = useMemo(
|
||||
@ -65,16 +75,24 @@ export function SearchBar(props: SearchBarProps) {
|
||||
return (
|
||||
<Autocomplete
|
||||
freeSolo
|
||||
autoComplete
|
||||
options={suggestions}
|
||||
renderOption={(props: any, option: any) => {
|
||||
return (
|
||||
<li {...props} key={option}>
|
||||
{option}
|
||||
</li>
|
||||
);
|
||||
}}
|
||||
onKeyDown={handleEsc}
|
||||
onChange={(event, value) => {
|
||||
// do something with the selected value
|
||||
if (value === null) {
|
||||
setSearch("");
|
||||
setFilteredList(tableData);
|
||||
} else {
|
||||
setSearch(value);
|
||||
}
|
||||
onInputChange={handleInputChange}
|
||||
value={search}
|
||||
open={open}
|
||||
onOpen={() => {
|
||||
setOpen(true);
|
||||
}}
|
||||
onClose={() => {
|
||||
setOpen(false);
|
||||
}}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
@ -82,26 +100,18 @@ export function SearchBar(props: SearchBarProps) {
|
||||
fullWidth
|
||||
label="Search"
|
||||
variant="outlined"
|
||||
value={search}
|
||||
onChange={handleInputChange}
|
||||
autoComplete="nickname"
|
||||
InputProps={{
|
||||
...params.InputProps,
|
||||
// endAdornment: (
|
||||
// <InputAdornment position="end">
|
||||
// <IconButton>
|
||||
// <SearchIcon />
|
||||
// </IconButton>
|
||||
// </InputAdornment>
|
||||
// ),
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<IconButton>
|
||||
<SearchIcon />
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
>
|
||||
{/* {suggestions.map((item, index) => (
|
||||
<option key={index} onClick={() => handleSelect(item)}>
|
||||
{item}
|
||||
</option>
|
||||
))} */}
|
||||
</TextField>
|
||||
></TextField>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user