feat: add htmlFor in select component

nexpy-io · Oct 31, 2022 · b49125e · b49125e
1 parent 414cb40
commit b49125e
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
     "react",
     "typescript"
   ],
-  "version": "2.1.2",
+  "version": "2.1.3",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
   "types": "./dist/index.d.ts",

diff --git a/src/components/molecules/Fields/AsyncSelect/AsyncSelect.tsx b/src/components/molecules/Fields/AsyncSelect/AsyncSelect.tsx
@@ -48,9 +48,13 @@ const AsyncSelect = <FormType extends FieldValues>(props: AsyncSelectProps<FormT
     name,
     required,
     placeholder,
+    id,
     ...rest
   } = props
 
+  const resolvedId = id || slugify(`select-container-${label}`)
+  const resolvedInputId = `select-input-${id}` || slugify(`select-input-${label}`)
+
   const [isFocused, setIsFocused] = useState<boolean>(false)
   const [options, setOptions] = useState<AsyncSelectOption[]>(defaultOptions || [])
 
@@ -108,7 +112,7 @@ const AsyncSelect = <FormType extends FieldValues>(props: AsyncSelectProps<FormT
         mb='0.4rem'
         isFocused={isFocused}
         error={error}
-        htmlFor={`field-${name}`}
+        htmlFor={resolvedId}
       >
         {label}
       </FieldLabel>
@@ -120,7 +124,8 @@ const AsyncSelect = <FormType extends FieldValues>(props: AsyncSelectProps<FormT
             if (isMulti) {
               return (
                 <ReactSelectAsync<AsyncSelectOption, true>
-                  id={slugify(`select-${label}`)}
+                  id={resolvedId}
+                  inputId={resolvedInputId}
                   styles={customSelectStyles}
                   loadOptions={loadOptionsHandler}
                   placeholder={placeholder === undefined ? label : placeholder}
@@ -152,7 +157,8 @@ const AsyncSelect = <FormType extends FieldValues>(props: AsyncSelectProps<FormT
 
             return (
               <ReactSelectAsync
-                id={slugify(`select-${label}`)}
+                id={resolvedId}
+                inputId={resolvedInputId}
                 styles={customSelectStyles}
                 loadOptions={loadOptionsHandler}
                 placeholder={placeholder === undefined ? label : placeholder}

diff --git a/src/components/molecules/Fields/Select/Select.tsx b/src/components/molecules/Fields/Select/Select.tsx
@@ -44,9 +44,13 @@ const Select = <FormType extends FieldValues>(props: SelectProps<FormType>) => {
     name,
     required,
     placeholder,
+    id,
     ...rest
   } = props
 
+  const resolvedId = id || slugify(`select-container-${label}`)
+  const resolvedInputId = `select-input-${id}` || slugify(`select-input-${label}`)
+
   const [isFocused, setIsFocused] = useState<boolean>(false)
 
   // TODO: Aprimorar a estilização a partir do tema
@@ -81,7 +85,7 @@ const Select = <FormType extends FieldValues>(props: SelectProps<FormType>) => {
         mb='0.4rem'
         isFocused={isFocused}
         error={error}
-        htmlFor={`field-${name}`}
+        htmlFor={resolvedId}
       >
         {label}
       </FieldLabel>
@@ -93,7 +97,8 @@ const Select = <FormType extends FieldValues>(props: SelectProps<FormType>) => {
             if (isMulti) {
               return (
                 <ReactSelect<SelectOption, true>
-                  id={slugify(`select-${label}`)}
+                  id={resolvedId}
+                  inputId={resolvedInputId}
                   styles={customSelectStyles}
                   options={options}
                   placeholder={placeholder === undefined ? label : placeholder}
@@ -111,7 +116,7 @@ const Select = <FormType extends FieldValues>(props: SelectProps<FormType>) => {
                   isClearable={isClearable}
                   aria-label={label}
                   isDisabled={disabled}
-                  data-cy={slugify(`select-${label}`)}
+                  data-cy={resolvedId}
                   isSearchable={Boolean(enableSearch)}
                   noOptionsMessage={() => enableSearch?.noOptionsMessage}
                 />
@@ -120,7 +125,8 @@ const Select = <FormType extends FieldValues>(props: SelectProps<FormType>) => {
 
             return (
               <ReactSelect
-                id={slugify(`select-${label}`)}
+                id={resolvedId}
+                inputId={resolvedInputId}
                 styles={customSelectStyles}
                 options={options}
                 placeholder={placeholder === undefined ? label : placeholder}
@@ -137,7 +143,7 @@ const Select = <FormType extends FieldValues>(props: SelectProps<FormType>) => {
                 isClearable={isClearable}
                 aria-label={label}
                 isDisabled={disabled}
-                data-cy={slugify(`select-${label}`)}
+                data-cy={resolvedId}
                 isSearchable={Boolean(enableSearch)}
                 noOptionsMessage={() => enableSearch?.noOptionsMessage}
               />