fix(text-field): fixes for controlled and uncontrolled states (#475)

* fix(text-field): fix clearing uncontrolled input

* fix(text-field): fix syncing state to the external value

---------

Co-authored-by: Lena Rashkovan <[email protected]>

Author: shiba-codes

src/components/experimental/TextField/ClearButton.tsx

@@ -11,6 +11,7 @@ const StyledButton = styled(BaseButton)`
     display: flex;
     margin: 0;
     padding: 0;
+    cursor: pointer;
     color: ${getSemanticValue('on-surface-variant')};
 `;
 

src/components/experimental/TextField/TextField.tsx

@@ -163,6 +163,12 @@ function TextField({
     const [text, setText] = React.useState(props.defaultValue || props.value || '');
     const inputRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(null);
 
+    React.useEffect(() => {
+        if (props.value !== undefined) {
+            setText(props.value);
+        }
+    }, [props.value]);
+
     const handleChange = (value: string) => {
         setText(value);
         props.onChange?.(value);
@@ -175,7 +181,7 @@ function TextField({
                 aria-label={ariaStrings.clearFieldButton}
                 onPress={() => {
                     inputRef.current.value = '';
-                    setText('');
+                    handleChange('');
                 }}
             />
         ) : (