Various input related styling fixes

MPEGGroup · Sep 6, 2023 · a0d0224 · a0d0224
1 parent 45c772f
commit a0d0224
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 23 deletions.
diff --git a/conformance-search/src/components/Input/Input.tsx b/conformance-search/src/components/Input/Input.tsx
@@ -23,8 +23,8 @@ export default function Input({
         return (
             <input
                 // eslint-disable-next-line jsx-a11y/no-autofocus
-                autoFocus
-                className="grow px-3 text-sm focus:outline-none"
+                autoFocus={filter.value !== ""}
+                className="grow rounded-none bg-transparent px-3 text-sm focus:outline-none"
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                     updateFilter(index, (e.target as HTMLInputElement).value)
                 }

diff --git a/conformance-search/src/components/Input/variants/ContainerInput.tsx b/conformance-search/src/components/Input/variants/ContainerInput.tsx
@@ -99,7 +99,7 @@ export default function ContainerInput({
     // Focus the input when the parsed value changes
     const inputRef = useRef<HTMLInputElement>(null);
     useEffect(() => {
-        inputRef.current?.focus();
+        if (parsed.length > 0) inputRef.current?.focus();
     }, [parsed]);
 
     // Dropdown menu
@@ -177,7 +177,7 @@ export default function ContainerInput({
                     autoCapitalize="off"
                     autoComplete="off"
                     autoCorrect="off"
-                    className="w-fit focus:outline-none xs:w-full"
+                    className="w-fit bg-transparent focus:outline-none xs:w-full"
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                         setQuery((e.target as HTMLInputElement).value);
                         setOpen(true);

diff --git a/conformance-search/src/components/SearchComponent/SearchComponent.tsx b/conformance-search/src/components/SearchComponent/SearchComponent.tsx
@@ -86,7 +86,7 @@ export default function SearchComponent({
                             autoCapitalize="off"
                             autoComplete="off"
                             autoCorrect="off"
-                            className="h-16 min-w-0 grow rounded-md px-5 text-sm focus:outline-none disabled:bg-transparent"
+                            className="h-16 min-w-0 grow rounded-tl-md bg-transparent px-5 text-lg only:rounded-t-md focus:outline-none disabled:bg-gray-100"
                             disabled={!ready}
                             onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                                 setQuery((e.target as HTMLInputElement).value);
@@ -97,23 +97,20 @@ export default function SearchComponent({
                             type="text"
                             value={query}
                         />
-                        <button
-                            className={clsx(
-                                "w-14 flex-col items-center justify-center",
-                                !ready || loading || (!query && filters.length === 0)
-                                    ? "hidden"
-                                    : "flex"
-                            )}
-                            disabled={!ready || loading}
-                            onClick={() => {
-                                setQuery("");
-                                resetFilters();
-                            }}
-                            type="button"
-                        >
-                            <MdClose className="text-2xl" />
-                            <span className="text-[10px] font-semibold">Reset</span>
-                        </button>
+                        {ready && !loading && (query || filters.length > 0) && (
+                            <button
+                                className="flex w-14 flex-col items-center justify-center"
+                                onClick={() => {
+                                    setQuery("");
+                                    resetFilters();
+                                }}
+                                type="button"
+                            >
+                                <MdClose className="text-2xl" />
+                                <span className="text-[10px] font-semibold">Reset</span>
+                            </button>
+                        )}
+
                         {(!ready || loading) && (
                             <div className="flex w-14 items-center justify-center">
                                 <AiOutlineLoading className="animate-spin text-2xl" />

diff --git a/conformance-search/src/pages/CoveragePage/CoveragePage.tsx b/conformance-search/src/pages/CoveragePage/CoveragePage.tsx
@@ -206,7 +206,7 @@ export default function CoveragePage() {
                 />
                 <div className="flex w-full flex-col items-start gap-2">
                     <input
-                        className="w-full rounded border-1 px-3 py-2 shadow-md"
+                        className="w-full rounded border-1 bg-transparent px-3 py-2 shadow-md"
                         onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                             setSearch((e.target as HTMLInputElement).value)
                         }