shpaq/sct-overseerr
1
0
Fork 0
mirror of https://github.com/sct/overseerr.git synced 2025-09-17 17:24:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): search clear button now correctly triggers routing

Browse Source
This commit is contained in:
sct
2020-12-27 15:31:18 +00:00
parent fae4818957
commit 343f466788
1 changed files with 11 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/Layout/SearchInput/index.tsx
View File

@@ -11,14 +11,14 @@ const SearchInput: React.FC = () => {
const intl = useIntl(); const intl = useIntl();
const { searchValue, setSearchValue, setIsOpen, clear } = useSearchInput(); const { searchValue, setSearchValue, setIsOpen, clear } = useSearchInput();
return ( return (
<div className="flex-1 flex"> <div className="flex flex-1">
<div className="w-full flex md:ml-0"> <div className="flex w-full md:ml-0">
<label htmlFor="search_field" className="sr-only"> <label htmlFor="search_field" className="sr-only">
Search Search
</label> </label>
<div className="relative w-full text-white focus-within:text-gray-200"> <div className="relative w-full text-white focus-within:text-gray-200">
<div className="absolute inset-y-0 left-0 flex items-center pointer-events-none"> <div className="absolute inset-y-0 left-0 flex items-center pointer-events-none">
<svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"> <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
<path <path
fillRule="evenodd" fillRule="evenodd"
clipRule="evenodd" clipRule="evenodd"
@@ -29,18 +29,22 @@ const SearchInput: React.FC = () => {
<input <input
id="search_field" id="search_field"
style={{ paddingRight: searchValue.length > 0 ? '1.75rem' : '' }} style={{ paddingRight: searchValue.length > 0 ? '1.75rem' : '' }}
className="block w-full h-full pl-8 py-2 rounded-md border-transparent focus:border-transparent bg-gray-600 text-white placeholder-gray-300 focus:outline-none focus:ring-0 focus:placeholder-gray-400 sm:text-base" className="block w-full h-full py-2 pl-8 text-white placeholder-gray-300 bg-gray-600 border-transparent rounded-md focus:border-transparent focus:outline-none focus:ring-0 focus:placeholder-gray-400 sm:text-base"
placeholder={intl.formatMessage(messages.searchPlaceholder)} placeholder={intl.formatMessage(messages.searchPlaceholder)}
type="search" type="search"
value={searchValue} value={searchValue}
onChange={(e) => setSearchValue(e.target.value)} onChange={(e) => setSearchValue(e.target.value)}
onFocus={() => setIsOpen(true)} onFocus={() => setIsOpen(true)}
onBlur={() => setIsOpen(false)} onBlur={() => {
if (searchValue === '') {
setIsOpen(false);
}
}}
/> />
{searchValue.length > 0 && ( {searchValue.length > 0 && (
<button <button
className="absolute inset-y-0 right-0 h-7 w-7 m-auto p-1 outline-none border-none focus:outline-none focus:border-none" className="absolute inset-y-0 right-0 p-1 m-auto text-gray-400 transition border-none outline-none h-7 w-7 focus:outline-none focus:border-none hover:text-white"
onClick={clear} onClick={() => clear()}
> >
<ClearButton /> <ClearButton />
</button> </button>