TextArea Component error text is not removed when error is fixed

[dabrad26]

What package(s) are you using?

• [X ] carbon-components
• [X ] carbon-components-react

Detailed description

Error text under TextArea is not removed when normal text is placed back on top of it (helper text).

"carbon-components": "^10.14.0",
"carbon-components-react": "^7.14.0",

Steps to reproduce the issue

1. Have TextArea required
2. make error happen (focus/blur)
3. Add text to clear error
4. see red and regular text

Aspera

[tw15egan]

Could you link to a reproducible example on code sandbox?

[dabrad26]

I tried... But the CodeSandbox keeps saying:

Warning: React does not recognize the `helperText` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `helpertext` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

https://codesandbox.io/s/carbon-components-react-8ssn2?file=/src/index.js

[dabrad26]

Same just copying this:
https://www.carbondesignsystem.com/components/form/usage#live-demo

[tw15egan]

Hmm, I'm able to get it working and not able to see any issues. Could possibly be a local style issue?

https://codesandbox.io/s/carbon-components-react-x39gr?file=/src/index.js

[dabrad26]

Here is a working case:

https://codesandbox.io/s/carbon-components-react-jrehw?file=/src/index.js

It shows the error. Type more than 20 chars and then see the error, backspace and the error should clear but the text is still there.

[tw15egan]

I'm still not able to reproduce the error...

[dabrad26]

Maybe try Safari? Maybe it is a specific browser bug. I am using latest Safari which should be supported by carbon so I assume it is already in your test flow.

[tw15egan]

Ahh, that's it, seems like it's a safari-only bug. Seems like the state value is doing something strange in the browser, because if you click into the code editor when both texts show up, the error text disappears after a few seconds

[dabrad26]

Yeah. I noticed if you do something to cause safari to alter the draw like change tabs or move window it will cause it to update. Not sure if just safari. We mostly test on safari since it’s the most problematic for Mac.

Maybe if the entire text wrapper was 100% or had something to trick safari intro redrawing the area might fix it.

[tw15egan]

It seems like if I set bx--form__helper-text to width: 100% it resolves the issue 🤔