Merge pull request #97 from nsbno/fix-input-clickability

Make input fields easier to focus even without FormControl wrapping
nsbno · Feb 21, 2022 · 011ae8d · 011ae8d
2 parents f33e8b8 + aaf0b69
commit 011ae8d
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 8 deletions.
diff --git a/.changeset/long-owls-sip.md b/.changeset/long-owls-sip.md
@@ -0,0 +1,5 @@
+---
+"@vygruppen/spor-input-react": patch
+---
+
+Fix a bug where the label in input fields would get in the way of clicking parts of the input field when not wrapped in a FormControl
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/spor-input-react/src/Input.tsx b/packages/spor-input-react/src/Input.tsx
@@ -34,19 +34,22 @@ export type InputProps = Exclude<ChakraInputProps, "variant" | "size"> & {
  * ```
  */
 export const Input = forwardRef<InputProps, "input">(
-  ({ label, leftIcon, rightIcon, ...props }, ref) => {
+  ({ label, leftIcon, rightIcon, id, ...props }, ref) => {
     const Container = leftIcon || rightIcon ? InputGroup : Box;
     return (
       <Container position="relative">
         {leftIcon && <InputLeftElement>{leftIcon}</InputLeftElement>}
         <ChakraInput
           pl={leftIcon ? 7 : undefined}
           pr={rightIcon ? 7 : undefined}
+          id={id}
           {...props}
           ref={ref}
           placeholder=" " // This is needed to make the label work as expected
         />
-        <FormLabel>{label}</FormLabel>
+        <FormLabel htmlFor={id} pointerEvents="none">
+          {label}
+        </FormLabel>
         {rightIcon && <InputRightElement>{rightIcon}</InputRightElement>}
       </Container>
     );