<Textarea> Update

[daniel-cy-lu]

Detailed Description

Purpose: Update useEffect in <Textarea> to make rendering work when clearing contents using useState.
Issue: <Textarea> won't render properly when using useState to clear content.

See Ciaran's Explaination:

Textarea is not re-rendering because it's state is not changing. The value prop is only used to set the initial state of internalValue .
To fix, we can add value prop to the dependency array of the useEffect on line 130. This makes the function run every time the value prop changes, not just on component mounting, which is what an empty dependency array does [ ]
We also use the already existing functionality of applyChanges so nothing should break and it can reconcile any changes needed internally.

useEffect(() => {
    value && applyChanges(value);
  }, [value]);

Now if you try this it's still broken... but our state is being passed correctly like you said. Well, empty string '' is a falsey JS value so the shorthand of value && applyChanges(value) means applyChanges is never run. But empty string is a valid value for our textarea. So we can fix the conditional like so:

useEffect(() => {
  (value || value === '') && applyChanges(value);
}, [value]);

Possible Implementation

Locate <Textarea> in src/form and update line 127-130 to:

useEffect(() => {
    (value || value === '') && applyChanges(value);
  }, [value]);

Or Justin suggests to:

useEffect(() => {
    (value !== internalValue) && applyChanges(value);
  }, [value]);

Reason of this slight change is so that we don't need to keep adding conditions in the future.
Both cases work for the filter modal textarea.