fix(select): make native validation visible in DOM

abelflopes · Oct 24, 2024 · 91b0398 · 91b0398
1 parent a547597
commit 91b0398
Showing 1 changed file with 18 additions and 17 deletions.
diff --git a/packages/components/select/src/index.tsx b/packages/components/select/src/index.tsx
@@ -171,23 +171,6 @@ const Select = ({
 
   return (
     <>
-      <select
-        ref={selectRef}
-        name={selectName}
-        multiple={selectMultiple}
-        defaultValue={defaultValue}
-        value={internalValue}
-        hidden
-        onChange={(e) => {
-          selectOnChange?.(e, selectedValuesList);
-        }}>
-        {selectedValuesList.map((i) => (
-          <option key={i} value={i}>
-            {i}
-          </option>
-        ))}
-      </select>
-
       <div
         {...props}
         ref={rootElRef}
@@ -203,6 +186,24 @@ const Select = ({
           onBlur?.(e);
         }}>
         {displayValue || <span className={styles.placeholder}>{placeholder}</span>}
+
+        <select
+          ref={selectRef}
+          name={selectName}
+          multiple={selectMultiple}
+          defaultValue={defaultValue}
+          required={required}
+          value={internalValue}
+          className={styles.native_element}
+          onChange={(e) => {
+            selectOnChange?.(e, selectedValuesList);
+          }}>
+          {selectedValuesList.map((i) => (
+            <option key={i} value={i}>
+              {i}
+            </option>
+          ))}
+        </select>
       </div>
 
       <Dropdown