From 83898d4c7ab51404550dcd29f138747739a781bf Mon Sep 17 00:00:00 2001
From: ser888gio <nica.sergiu@seznam.cz>
Date: Tue, 29 Oct 2024 08:53:51 +0100
Subject: [PATCH] Repairing the input and label

---
 packages/design-system/src/ui/input/combobox.tsx    | 10 ++++++++++
 packages/design-system/src/ui/input/selectField.tsx | 11 +++++------
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/design-system/src/ui/input/combobox.tsx b/packages/design-system/src/ui/input/combobox.tsx
index d752616..1b54927 100644
--- 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
index 66ef7b0..c2de6f1 100644
--- 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>
     );