19311: Added check for initial clear

Arvados-DCO-1.1-Signed-off-by: Daniel Kutyła <daniel.kutyla@contractors.roche.com>

diff --git a/src/components/search-input/search-input.test.tsx b/src/components/search-input/search-input.test.tsx
index c57d3608b06b470e260ed2ceabf76875290f3019..c1bd79ab88601e42ed73059187479fe57db369fb 100644 (file)
--- a/src/components/search-input/search-input.test.tsx
+++ b/src/components/search-input/search-input.test.tsx
@@ -98,11 +98,30 @@ describe("<SearchInput />", () => {
     describe("on input target change", () => {
         it("clears the input value on selfClearProp change", () => {
             const searchInput = mount(<SearchInput selfClearProp="abc" value="123" onSearch={onSearch} debounce={1000}/>);
-            searchInput.setProps({ selfClearProp: 'aaa' });
-            jest.runTimersToTime(1000);
+            // initial no clear call
+            jest.runTimersToTime(0);
+            searchInput.setProps({ selfClearProp: '111' });
+            expect(onSearch).not.toBeCalledWith("");
+            expect(onSearch).toHaveBeenCalledTimes(0);
+
+            // second call trigger input clear
+            searchInput.setProps({ selfClearProp: 'aaa111' });
+            jest.runTimersToTime(0);
+            expect(onSearch).toBeCalledWith("");
+            expect(onSearch).toHaveBeenCalledTimes(1);
+
+            // third call trigger not input clear beacuse of the same selfClearProp value
+            searchInput.setProps({ selfClearProp: 'aaa111', value: '321' });
+            jest.runTimersToTime(0);
             expect(onSearch).toBeCalledWith("");
             expect(onSearch).toHaveBeenCalledTimes(1);
+            expect(searchInput.props().value).toBe('321');
+
+            // third call trigger input clear beacuse of different selfClearProp value
+            searchInput.setProps({ selfClearProp: 'aaa222' });
+            jest.runTimersToTime(0);
+            expect(onSearch).toBeCalledWith("");
+            expect(onSearch).toHaveBeenCalledTimes(2);
         });
     });
-
 });

diff --git a/src/components/search-input/search-input.tsx b/src/components/search-input/search-input.tsx
index 50338f401c9387b680ef417a715e2130d932b265..2835f156d8b3562c89dca8419256e143323c76f7 100644 (file)
--- a/src/components/search-input/search-input.tsx
+++ b/src/components/search-input/search-input.tsx
@@ -48,17 +48,17 @@ type SearchInputProps = SearchInputDataProps & SearchInputActionProps & WithStyl
 interface SearchInputState {
     value: string;
     label: string;
-    selfClearProp: string;
 }
 
+let selfClearPropState = '';
+
 export const DEFAULT_SEARCH_DEBOUNCE = 1000;
 
 export const SearchInput = withStyles(styles)(
     class extends React.Component<SearchInputProps> {
         state: SearchInputState = {
             value: "",
-            label: "",
-            selfClearProp: ""
+            label: ""
         };
 
         timeout: number;
@@ -97,9 +97,11 @@ export const SearchInput = withStyles(styles)(
             if (nextProps.value !== this.props.value) {
                 this.setState({ value: nextProps.value });
             }
-            if (this.state.value !== '' && nextProps.selfClearProp && nextProps.selfClearProp !== this.state.selfClearProp) {
-                this.props.onSearch('');
-                this.setState({ selfClearProp: nextProps.selfClearProp });
+            if (this.state.value !== '' && nextProps.selfClearProp && nextProps.selfClearProp !== selfClearPropState) {
+                if (selfClearPropState !== '') {
+                    this.props.onSearch('');
+                }
+                selfClearPropState = nextProps.selfClearProp;
             }
         }