diff --git a/package.json b/package.json index ff227b2..17285b7 100644 --- 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 index 2e64bbb..24236b8 100644 --- a/src/components/molecules/Fields/AsyncSelect/AsyncSelect.tsx +++ b/src/components/molecules/Fields/AsyncSelect/AsyncSelect.tsx @@ -48,9 +48,13 @@ const AsyncSelect = (props: AsyncSelectProps(false) const [options, setOptions] = useState(defaultOptions || []) @@ -108,7 +112,7 @@ const AsyncSelect = (props: AsyncSelectProps {label} @@ -120,7 +124,8 @@ const AsyncSelect = (props: AsyncSelectProps - id={slugify(`select-${label}`)} + id={resolvedId} + inputId={resolvedInputId} styles={customSelectStyles} loadOptions={loadOptionsHandler} placeholder={placeholder === undefined ? label : placeholder} @@ -152,7 +157,8 @@ const AsyncSelect = (props: AsyncSelectProps(props: SelectProps) => { 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(false) // TODO: Aprimorar a estilização a partir do tema @@ -81,7 +85,7 @@ const Select = (props: SelectProps) => { mb='0.4rem' isFocused={isFocused} error={error} - htmlFor={`field-${name}`} + htmlFor={resolvedId} > {label} @@ -93,7 +97,8 @@ const Select = (props: SelectProps) => { if (isMulti) { return ( - id={slugify(`select-${label}`)} + id={resolvedId} + inputId={resolvedInputId} styles={customSelectStyles} options={options} placeholder={placeholder === undefined ? label : placeholder} @@ -111,7 +116,7 @@ const Select = (props: SelectProps) => { 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 = (props: SelectProps) => { return ( (props: SelectProps) => { isClearable={isClearable} aria-label={label} isDisabled={disabled} - data-cy={slugify(`select-${label}`)} + data-cy={resolvedId} isSearchable={Boolean(enableSearch)} noOptionsMessage={() => enableSearch?.noOptionsMessage} />