hazemKrimi/react-weather-app
1
0
Fork 0
mirror of https://github.com/hazemKrimi/react-weather-app.git synced 2026-05-01 18:30:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix search bar event listener

Browse Source
This commit is contained in:
Hazem Krimi
2021-09-20 00:23:27 +01:00
parent b20db5a08e
commit 60d7aae725
2 changed files with 3 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SearchBar/index.tsx
+2 -2
View File
@@ -8,7 +8,7 @@ const SearchBar: React.FC = () => {
const history = useHistory(); const history = useHistory();
const search = (event: React.KeyboardEvent<HTMLInputElement>) => { const search = (event: React.KeyboardEvent<HTMLInputElement>) => {
if (event.key === 'Enter' && query !== '') { if ((event.key === 'Enter' || event.keyCode === 13) && query !== '') {
history.push(`/search/${query}`); history.push(`/search/${query}`);
setQuery(''); setQuery('');
} }
@@ -19,7 +19,7 @@ const SearchBar: React.FC = () => {
<Input <Input
placeholder='Search' placeholder='Search'
value={query} value={query}
onKeyPress={search} onKeyUp={search}
onChange={(event: React.ChangeEvent<HTMLInputElement>) => setQuery(event.target.value)} onChange={(event: React.ChangeEvent<HTMLInputElement>) => setQuery(event.target.value)}
/> />
<img src={SearchIcon} alt='Search icon' /> <img src={SearchIcon} alt='Search icon' />
src/components/SearchBar/styles.ts
+1
View File
@@ -16,6 +16,7 @@ export const Input = styled.input`
border: none; border: none;
border-radius: 5px; border-radius: 5px;
overflow: hidden; overflow: hidden;
user-select: text !important;
&::placeholder { &::placeholder {
color: rgba(0, 0, 0, 0.5); color: rgba(0, 0, 0, 0.5);