minor fixes (#318)

* refactor(SearchBar.jsx): extract onChange function to a separate function and add onKeyDown event listener to prevent spacebar from propagating

* refactor(SearchBar.jsx): extract onChange function to a separate function and add onKeyDown event listener to prevent spacebar from propagating

* refactor(SearchBar.jsx): remove unused React import statement
This commit is contained in:
Danny Avila 2023-05-18 15:22:48 -04:00 committed by GitHub
parent 47533736e3
commit d71b61ad71
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 6 deletions

View file

@ -13,6 +13,11 @@ export default function SearchBar({ clearSearch }) {
}
};
const onChange = (e) => {
const { value } = e.target;
setSearchQuery(value);
};
return (
<div className="flex cursor-pointer items-center gap-3 rounded-md px-3 py-3 text-sm text-white transition-colors duration-200 hover:bg-gray-500/10">
{<Search className="h-4 w-4" />}
@ -20,7 +25,10 @@ export default function SearchBar({ clearSearch }) {
type="text"
className="m-0 mr-0 w-full border-none bg-transparent p-0 text-sm leading-tight outline-none"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
onChange={onChange}
onKeyDown={(e) => {
e.code === 'Space' ? e.stopPropagation() : null;
}}
placeholder="Search messages"
onKeyUp={handleKeyUp}
/>