fix(react): updated textarea counter value changes on re-render

[TannerS]

Closes #

#12348

Changelog

New

• Added more unit test

Changed

• Added useEffect for value when changed, will update counter

Testing / Reviewing

I actually had to use the sandbox code and manually insert it into the storybook for local testing but its not something that will be testable in storybook

NOTE: will conflict with test file here: https://github.com/carbon-design-system/carbon/pull/12906/files#diff-67daf23818c005abac39307f47f299b05283736cfede71b034c3b2d127f48fcf

[netlify]

✅ Deploy Preview for carbon-components-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	4f43820
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-components-react/deploys/6463eacb1b3a0900073137c7
😎 Deploy Preview	https://deploy-preview-13449--carbon-components-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	4f43820
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/6463eacbc570690008faf6ea
😎 Deploy Preview	https://deploy-preview-13449--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[francinelucca]

Added this story into the TextArea story file:

export const Test = () => {
  return (<>
  <TextInput
    labelText="TextInputLabel"
    placeholder="Type something here"
    onChange={(e) =>
      (document.getElementById("text-area").value = e.target.value)
    }
  />
  <br></br>
  <br></br>
  <TextArea
    id="text-area"
    labelText="TextAreaLabel"
    maxCount={500}
    enableCounter
    placeholder="Counter should be updated when value is changed by typing something in the TextInput"
  />
</>)
}

and loaded my local storybook and did not see the value update upon typing:

[andreancardona]

@TannerS let us know if can address the feedback / review comments :) thanks again for the contribution!

[TannerS]

Oh yes sorry, I been out but I'll look this week! Sent from my T-Mobile 5G Device Get Outlook for Android<https://aka.ms/AAb9ysg>

…

________________________________ From: Andrea N. Cardona ***@***.***> Sent: Thursday, April 13, 2023 11:23:55 AM To: carbon-design-system/carbon ***@***.***> Cc: Tanner Summers ***@***.***>; Mention ***@***.***> Subject: Re: [carbon-design-system/carbon] fix(react): updated textarea counter value changes on re-render (PR #13449) @TannerS<https://github.com/TannerS> let us know if can address the feedback / review comments :) thanks again for the contribution! — Reply to this email directly, view it on GitHub<#13449 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ACDUUDZ33LM4647WZEGVOR3XBBADXANCNFSM6AAAAAAWPLSYXM>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[TannerS]

Added this story into the TextArea story file:

export const Test = () => {
  return (<>
  <TextInput
    labelText="TextInputLabel"
    placeholder="Type something here"
    onChange={(e) =>
      (document.getElementById("text-area").value = e.target.value)
    }
  />
  <br></br>
  <br></br>
  <TextArea
    id="text-area"
    labelText="TextAreaLabel"
    maxCount={500}
    enableCounter
    placeholder="Counter should be updated when value is changed by typing something in the TextInput"
  />
</>)
}

and loaded my local storybook and did not see the value update upon typing:

hello, i can shoe u over a call if you want, i lost some of my code but i can re-create it, i did it going off this #12348 (comment) since i dont think updating the dom directly is possible to trigger anything

[francinelucca]

hello, i can shoe u over a call if you want, i lost some of my code but i can re-create it, i did it going off this #12348 (comment) since i dont think updating the dom directly is possible to trigger anything

You're right @TannerS , thanks for clearing that up. I tried it with useState and it works!

export const Test = () => {
  const [text, setText] = useState('');
  return (
    <>
      <TextInput
        labelText="TextInputLabel"
        placeholder="Type something here"
        onChange={(e) => setText(e.target.value)}
      />
      <br></br>
      <br></br>
      <TextArea
        id="text-area"
        labelText="TextAreaLabel"
        maxCount={500}
        enableCounter
        placeholder="Counter should be updated when value is changed by typing something in the TextInput"
        value={text}
      />
    </>
  );
}

I did find one bug in which the counter gets updated when attempting to type into the textArea directly in this scenario , the counter changes but the text does not (expected but the text but not for the counter). See attached screen record

Screen.Recording.2023-04-17.at.2.15.50.PM.mov

[francinelucca]

See #13449 (comment)

[TannerS]

sorry guys this is a bit old i been gone but now i can continue, is there anything else needed on my end? @francinelucca @andreancardona

[andreancardona]

@TannerS were you able to address Francine's comment? If so, I can take a look and test locally :)

[TannerS]

I think I did...if not I can go over stuff in an office hours Sent from my T-Mobile 5G Device Get Outlook for Android<https://aka.ms/AAb9ysg>

…

________________________________ From: Andrea N. Cardona ***@***.***> Sent: Monday, May 8, 2023 12:29:12 PM To: carbon-design-system/carbon ***@***.***> Cc: Tanner Summers ***@***.***>; Mention ***@***.***> Subject: Re: [carbon-design-system/carbon] fix(react): updated textarea counter value changes on re-render (PR #13449) @TannerS<https://github.com/TannerS> were you able to address Francine's comment? If so, I can take a look and test locally :) — Reply to this email directly, view it on GitHub<#13449 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ACDUUD3PZU6SFHAKXHPNTIDXFEUORANCNFSM6AAAAAAWPLSYXM>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[francinelucca]

I think I did...if not I can go over stuff in an office hours Sent from my T-Mobile 5G Device Get Outlook for Androidhttps://aka.ms/AAb9ysg
…
________________________________ From: Andrea N. Cardona @.> Sent: Monday, May 8, 2023 12:29:12 PM To: carbon-design-system/carbon @.> Cc: Tanner Summers @.>; Mention @.> Subject: Re: [carbon-design-system/carbon] fix(react): updated textarea counter value changes on re-render (PR #13449) @TannerShttps://github.com/TannerS were you able to address Francine's comment? If so, I can take a look and test locally :) — Reply to this email directly, view it on GitHub<#13449 (comment)>, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ACDUUD3PZU6SFHAKXHPNTIDXFEUORANCNFSM6AAAAAAWPLSYXM. You are receiving this because you were mentioned.Message ID: @.***>

I'm still seeing the error referenced here when running locally, happy to discuss further!

[francinelucca]

Met with @TannerS and opted to add a settimeout function before overriding the text counter in the useEffect to also solve for this bug

Doing this because the textArea's onChange property doesn't get re-triggered when the value is later re-written to match the textInput value. Delaying the textCount assignation allows for the textarea element value to catchup before the textcount is calculated

This should be ready for review @andreancardona

[andreancardona]

reviewed and looks good!

[kodiakhq]

This PR could not be merged because the GitHub API returned an internal server error. To enable Kodiak on this pull request please remove the kodiak:disabled label.

When the GitHub API returns an internal server error (HTTP status code 500), it is not safe for Kodiak to retry merging.

For more information please see https://kodiakhq.com/docs/troubleshooting#merge-errors

If you need help, you can open a GitHub issue, check the docs, or reach us privately at support@kodiakhq.com.

docs | dashboard | support