refactor(InputGroup): increase target size

kripod · Jul 21, 2024 · a558ead · a558ead
1 parent 9c4f4fb
commit a558ead
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
@@ -55,6 +55,12 @@ export const Input = forwardRef(function Input(
         size === "md" && "px-2",
         size === "lg" && "px-2.5",
       )}
+      onClickCapture={(event) => {
+        // Increase target size of input
+        if (event.target === event.currentTarget) {
+          localRef.current.focus({ preventScroll: true });
+        }
+      }}
     >
       {addonStart}
       {input}

diff --git a/src/components/InputGroup.stories.tsx b/src/components/InputGroup.stories.tsx
@@ -19,7 +19,7 @@ type Story = StoryObj<typeof meta>;
 
 export const WithInputOutlined = {
   args: {
-    addonStart: <MagnifyingGlassIcon className="size-6" />,
+    addonStart: <MagnifyingGlassIcon className="pointer-events-none size-6" />,
     addonEnd: (
       <ButtonPlain size="sm" shape="pill">
         Go
@@ -35,7 +35,7 @@ export const WithInputOutlined = {
 
 export const WithInputFilled = {
   args: {
-    addonStart: <MagnifyingGlassIcon className="size-6" />,
+    addonStart: <MagnifyingGlassIcon className="pointer-events-none size-6" />,
     addonEnd: (
       <ButtonSecondary size="sm" shape="pill">
         Go