manage SearchField internally controlled to allow onClearanceHandler independently from given value

Author: haschek

CHANGELOG.md

@@ -77,6 +77,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     -   Refactored data structure position and dimension (breaking change)
 -   `<ActivityControlWidget />`
     -   display running time after label if there is an status info to prevent a third line
+-   `<SearchField />`
+    -   internally forced to be managed controlled to keep `onClearanceHandler` independent from outer `value` property
 
 ### Deprecated
 

src/components/TextField/SearchField.tsx

@@ -36,20 +36,37 @@ export const SearchField = ({
     emptySearchInputMessage = "Enter search term",
     onClearanceHandler,
     onClearanceText = "Clear current search term",
+    onChange,
     leftIcon = <Icon name="operation-search" />,
     rightElement,
     ...otherProps
 }: SearchFieldProps) => {
+    const [value, setValue] = React.useState<string>("");
+
     const clearanceButton =
-        onClearanceHandler && otherProps.value ? (
+        onClearanceHandler && value ? (
             <IconButton
                 data-test-id={otherProps["data-test-id"] && `${otherProps["data-test-id"]}-clear-btn`}
                 name="operation-clear"
                 text={onClearanceText}
-                onClick={onClearanceHandler}
+                onClick={() => {
+                    setValue("");
+                    onClearanceHandler();
+                }}
             />
         ) : undefined;
 
+    const changeHandlerProcess = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setValue(e.target.value);
+        if (onChange) {
+            onChange(e);
+        }
+    };
+
+    React.useEffect(() => {
+        setValue(otherProps.value ?? otherProps.defaultValue ?? "");
+    }, [otherProps.value, otherProps.defaultValue]);
+
     return (
         <TextField
             className={
@@ -68,7 +85,9 @@ export const SearchField = ({
                     </>
                 )
             }
+            onChange={changeHandlerProcess}
             {...otherProps}
+            value={value}
             type={"search"}
             leftIcon={leftIcon}
             round={true}

src/components/TextField/stories/SearchField.stories.tsx

@@ -46,5 +46,5 @@ const SearchFieldWithClearanceIconTemplate: StoryFn<typeof SearchField> = (args)
 export const SearchFieldWithClearanceIcon = SearchFieldWithClearanceIconTemplate.bind({});
 SearchFieldWithClearanceIcon.args = {
     onClearanceHandler: null,
-    onClearanceText: "",
+    onClearanceText: "Clear field",
 };