Fix textarea id changing on re render (#3309)

* fix textarea id rerendering

* add autoid

Author: SaraVieira

packages/components/package.json

@@ -29,6 +29,7 @@
   "dependencies": {
     "@codesandbox/common": "^1.0.8",
     "@codesandbox/template-icons": "^1.1.0",
+    "@reach/auto-id": "^0.7.1",
     "@reach/visually-hidden": "^0.7.0",
     "@styled-system/css": "^5.1.4",
     "add": "^2.0.6",

packages/components/src/components/Input/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import css from '@styled-system/css';
 import VisuallyHidden from '@reach/visually-hidden';
-import { uniqueId } from 'lodash-es';
+import { useId } from '@reach/auto-id';
 import { Text } from '../Text';
 
 const placeholderStyles = {
@@ -35,8 +35,7 @@ export const Input: React.FC<IInputProps> = ({
   label,
   ...props
 }) => {
-  const id = props.id || uniqueId('form_');
-
+  const id = useId(props.id);
   return (
     <>
       {props.placeholder && !label ? (

packages/components/src/components/SearchInput/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import css from '@styled-system/css';
 import VisuallyHidden from '@reach/visually-hidden';
-import { uniqueId } from 'lodash-es';
+import { useId } from '@reach/auto-id';
 import { Text } from '../Text';
 import { InputComponent } from '../Input';
 import { Element } from '../Element';
@@ -51,7 +51,7 @@ interface ISearchProps extends React.InputHTMLAttributes<HTMLInputElement> {
 }
 
 export const SearchInput: React.FC<ISearchProps> = ({ label, ...props }) => {
-  const id = props.id || uniqueId('form_');
+  const id = useId(props.id);
 
   return (
     <>

packages/components/src/components/Select/index.tsx

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 import styled from 'styled-components';
 import css from '@styled-system/css';
 import VisuallyHidden from '@reach/visually-hidden';
-import { uniqueId } from 'lodash-es';
+import { useId } from '@reach/auto-id';
 import { Text } from '../Text';
 import { Element } from '../Element';
 
@@ -74,7 +74,7 @@ export const Select: React.FC<ISelectProps> = ({
     [icon]
   );
 
-  const id = props.id || uniqueId('form_');
+  const id = useId(props.id);
 
   return (
     <>

packages/components/src/components/Textarea/index.tsx

@@ -5,7 +5,7 @@ import styled, {
 } from 'styled-components';
 import css from '@styled-system/css';
 import VisuallyHidden from '@reach/visually-hidden';
-import { uniqueId } from 'lodash-es';
+import { useId } from '@reach/auto-id';
 import { Text } from '../Text';
 import { Stack } from '../Stack';
 import { InputComponent } from '../Input';
@@ -53,9 +53,9 @@ export const Textarea: React.FC<ITextareaProps> = ({
   autosize,
   ...props
 }) => {
-  const id = props.id || uniqueId('form_');
   const [wordCount, setWordCount] = useState(0);
   const [value, setValue] = useState('');
+  const id = useId(props.id);
 
   const Wrapper = useCallback(
     ({ children }) =>
@@ -98,15 +98,15 @@ export const Textarea: React.FC<ITextareaProps> = ({
     <>
       {props.placeholder && !label ? (
         <VisuallyHidden>
-          <label htmlFor={id}>{props.placeholder}</label>
+          <label htmlFor={props.id || id}>{props.placeholder}</label>
         </VisuallyHidden>
       ) : null}
       {label ? (
         <Text
           as="label"
           size={2}
           marginBottom={2}
-          htmlFor={id}
+          htmlFor={props.id || id}
           style={{ display: 'block' }}
         >
           {label}
@@ -117,7 +117,7 @@ export const Textarea: React.FC<ITextareaProps> = ({
           value={value}
           onChange={update}
           onKeyPress={keyPress}
-          id={id}
+          id={props.id || id}
           {...props}
         />
         {maxLength ? (

yarn.lock

@@ -3850,6 +3850,11 @@
     hey-listen "^1.0.8"
     style-value-types "^3.1.6"
 
+"@reach/auto-id@^0.7.1":
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.7.1.tgz#68ff4345b12c5ead6d0374a574480090b18a1b31"
+  integrity sha512-7bE/tCFc6KBMKkSfquJFpeZic+OHe+RAE2OHCN66felnleVwm6hr128d2UAp5vb1H12F6fm1kCUV9s3xNqSwMQ==
+
 "@reach/router@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.2.1.tgz#34ae3541a5ac44fa7796e5506a5d7274a162be4e"