Repairing the input and label

kalkulacka-one · Oct 29, 2024 · 83898d4 · 83898d4
1 parent 1c63fed
commit 83898d4
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/packages/design-system/src/ui/input/combobox.tsx b/packages/design-system/src/ui/input/combobox.tsx
@@ -12,6 +12,7 @@ import * as React from "react";
 import { forwardRef, useImperativeHandle, useRef } from "react";
 import { ClearButton } from "./clearButton";
 import { ChevronDownIcon } from "../../icons/ChevronDown";
+import { useEffect } from "react";
 
 const Combobox = React.forwardRef<
   React.ElementRef<typeof ComboboxPrimitive>,
@@ -38,9 +39,14 @@ const Input = forwardRef<
 
   // Add a data attribute based on the input value. This is for peer styling.
   const updateDataEmpty = () => {
+    // inputRef is a reference to a DOM element. Check if it exists before updating
     if (inputRef.current) {
+      //if the inputRef is empty - isEmpty will be true
       const isEmpty = inputRef.current.value === "";
+      console.log("Updating data-empty attribute:", isEmpty); // Debug log
       inputRef.current.setAttribute("data-empty", isEmpty.toString());
+    } else {
+      console.log("inputRef.current is null"); // Debug log
     }
   };
 
@@ -52,6 +58,10 @@ const Input = forwardRef<
     updateDataEmpty();
   };
 
+  useEffect(() => {
+    updateDataEmpty(); // Initial check
+  }, []);
+
   // Clear the input field and fire the onChange event
   const clearHandler = () => {
     if (inputRef.current) {

diff --git a/packages/design-system/src/ui/input/selectField.tsx b/packages/design-system/src/ui/input/selectField.tsx
@@ -68,6 +68,11 @@ const SelectInputField = forwardRef<React.ElementRef<typeof Input>, Props>(
           onChange={setSelectedOption}
           onClose={() => setQuery("")}
         >
+          {label && (
+            <Label state={hasError ? "error" : "default"} hasIcon={hasIcon}>
+              {label}
+            </Label>
+          )}
           <Input
             {...(props as Omit<InheritedInputProps, "defaultValue"> & {
               defaultValue?: string;
@@ -93,12 +98,6 @@ const SelectInputField = forwardRef<React.ElementRef<typeof Input>, Props>(
             ))}
           </Options>
         </Combobox>
-
-        {label && (
-          <Label state={hasError ? "error" : "default"} hasIcon={hasIcon}>
-            {label}
-          </Label>
-        )}
         {hasError && <Description state="error">{error}</Description>}
       </Field>
     );