fix: useFixSelectFont hook

packages/react-kit/src/components/form/BaseSelect.tsx

@@ -56,13 +56,12 @@ export default function BaseSelect({
   const handleChange = (option: SingleValue<SelectDataProps>) => {
     onChange?.(option);
   };
-  const { jsx, selectClassName } = useFixSelectFont({
+  const { selectClassName } = useFixSelectFont({
     selectClassName: "boson-base-select",
     hasError: props.hasError
   });
   return (
     <>
-      {jsx}
       <Select
         styles={customStyles(null)}
         {...props}

packages/react-kit/src/components/form/CountrySelect.tsx

@@ -221,13 +221,12 @@ export function CountrySelect({
       setInitialized(true);
     }
   }, [field.value, initialized]); // eslint-disable-line
-  const { jsx, selectClassName } = useFixSelectFont({
+  const { selectClassName } = useFixSelectFont({
     selectClassName: "country-select",
     hasError: displayError
   });
   return (
     <>
-      {jsx}
       <PhoneWrapper className={selectClassName}>
         <PhoneInput
           // eslint-disable-next-line @typescript-eslint/no-unused-vars

packages/react-kit/src/components/form/Phone.tsx

@@ -188,13 +188,12 @@ export default function Phone({ name, ...props }: PhoneProps) {
     }
   }, [field.value, initialized]); // eslint-disable-line
 
-  const { jsx, selectClassName } = useFixSelectFont({
+  const { selectClassName } = useFixSelectFont({
     selectClassName: "phone-select",
     hasError: displayError
   });
   return (
     <>
-      {jsx}
       <PhoneWrapper className={selectClassName}>
         <PhoneInput
           country={countryCode}

packages/react-kit/src/components/form/Select.tsx

@@ -250,14 +250,13 @@ export function Select<
     onBlur?.(event);
   };
 
-  const { jsx, selectClassName } = useFixSelectFont({
+  const { selectClassName } = useFixSelectFont({
     selectClassName: "boson-select",
     hasError: displayError
   });
 
   return (
     <>
-      {jsx}
       <ReactSelect<Option, IsMulti, Group>
         styles={customStyles<Option, IsMulti, Group>(
           displayErrorMessage,

packages/react-kit/src/hooks/form/useFixSelectFont.tsx

@@ -1,14 +1,20 @@
-import React, { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { inputStyles } from "../../components/form/styles";
+import styled from "styled-components";
 
 export const useFixSelectFont = ({
   selectClassName,
   hasError
 }: {
-  selectClassName: string;
+  selectClassName?: string;
   hasError?: boolean;
 }) => {
   const inputFontSize = useRef<string>();
+  const styleTagRef = useRef<HTMLStyleElement | null>(null);
+  const [styledComponentId] = useState(styled.div``.styledComponentId);
+
+  const instanceClassName = `${selectClassName}-${styledComponentId}`;
+
   useEffect(() => {
     const input = document.createElement("input");
     input.type = "hidden";
@@ -20,27 +26,48 @@ export const useFixSelectFont = ({
 
     document.body.removeChild(input);
   }, []);
-  return {
-    jsx: (
-      <style>{`.${selectClassName}{
-        [class*="-placeholder"],[class*="-singleValue"],[class*="-option"]{
+
+  useEffect(() => {
+    // Create a new style element
+    const styleTag = document.createElement("style");
+
+    // Set the CSS content
+    styleTag.innerHTML = `
+      .${instanceClassName} {
+        [class*="-placeholder"], [class*="-singleValue"], [class*="-option"] {
           font-size: ${inputFontSize.current || "0.875rem"};
         }
         ${
           hasError
             ? ""
             : `
-        [class*="-singleValue"]{
-          color: ${inputStyles.color};
-        }
-        [class*="-placeholder"]{
-          color: ${inputStyles.placeholder.color};
+          [class*="-singleValue"] {
+            color: ${inputStyles.color};
+          }
+          [class*="-placeholder"] {
+            color: ${inputStyles.placeholder.color};
+          }
+        `
         }
-          `
-        }
-
-      }`}</style>
-    ),
-    selectClassName
+      }
+    `;
+
+    // Append the style tag to the document head
+    document.head.appendChild(styleTag);
+
+    // Save a reference to the style tag
+    styleTagRef.current = styleTag;
+
+    // Cleanup function to remove the style tag when the component unmounts or hasError changes
+    return () => {
+      if (styleTagRef.current) {
+        document.head.removeChild(styleTagRef.current);
+        styleTagRef.current = null;
+      }
+    };
+  }, [instanceClassName, hasError]);
+
+  return {
+    selectClassName: instanceClassName // Return the unique class name
   };
 };