@@ -1907,6 +1929,7 @@ exports[`Select variant "boxed" renders with a label 1`] = `
>
@@ -2030,6 +2054,7 @@ exports[`Select variant "boxed" renders with default props 1`] = `
>
{
render().container.firstChild
).toMatchSnapshot();
});
+
+ describe('link textarea with the label', () => {
+ it('uses `id` prop value if passed', () => {
+ render();
+
+ expect(screen.getByLabelText('Simple Label')).toHaveAttribute('id', 'test-input-id');
+ expect(screen.getByText('Simple Label')).toHaveAttribute('for', 'test-input-id');
+ });
+
+ it('generate id automatically if `id` prop is empty', () => {
+ render();
+ const generatedId = 'random';
+
+ expect(screen.getByLabelText('Simple Label')).toHaveAttribute('id', generatedId);
+ expect(screen.getByText('Simple Label')).toHaveAttribute('for', generatedId);
+ });
+ });
});
diff --git a/src/components/Textarea/Textarea.tsx b/src/components/Textarea/Textarea.tsx
index 0409b3d44..bfeb1deae 100644
--- a/src/components/Textarea/Textarea.tsx
+++ b/src/components/Textarea/Textarea.tsx
@@ -9,8 +9,9 @@ import {
extractWidthProps,
extractWrapperMarginProps
} from '../../utils/extractProps';
-import { InternalInputComponentProps } from '../Input/BaseInput';
+import { useGeneratedId } from '../../utils/hooks/useGeneratedId';
+import { InternalInputComponentProps } from '../Input/BaseInput';
import { BoxedInput } from '../Input/BoxedInput';
import { BoxedInputLabel } from '../Input/BoxedInputLabel';
import { InputProps } from '../Input/InputProps';
@@ -52,7 +53,8 @@ const Textarea: FC = props => {
const { widthProps, restProps: withoutWidth } = extractWidthProps(withoutMargin);
const { heightProps, restProps } = extractHeightProps(withoutWidth);
- const { label, onChange, id, resize, ...rest } = restProps;
+ const { label, onChange, resize, ...rest } = restProps;
+ const id = useGeneratedId(props.id);
const [hasValue, setHasValue] = useState(rest.value && rest.value.toString().length > 0);
diff --git a/src/components/Textarea/__snapshots__/Textarea.spec.tsx.snap b/src/components/Textarea/__snapshots__/Textarea.spec.tsx.snap
index 3f27772a1..9b03414dc 100644
--- a/src/components/Textarea/__snapshots__/Textarea.spec.tsx.snap
+++ b/src/components/Textarea/__snapshots__/Textarea.spec.tsx.snap
@@ -122,6 +122,7 @@ exports[`Textarea renders 1`] = `
>
`;
@@ -269,10 +270,12 @@ exports[`Textarea renders the disabled state with label and placeholder 1`] = `
@@ -407,6 +410,7 @@ exports[`Textarea renders the error state 1`] = `
>
`;
@@ -559,10 +563,12 @@ exports[`Textarea renders the error state with label and placeholder 1`] = `
>