fix: SearchInput doesn't updated when searchList property change (#1058)

Author: I065450

src/SearchInput/SearchInput.js

@@ -7,17 +7,15 @@ import InputGroup from '../InputGroup/InputGroup';
 import Menu from '../Menu/Menu';
 import Popover from '../Popover/Popover';
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 
-class SearchInput extends Component {
+class SearchInput extends PureComponent {
     constructor(props) {
         super(props);
         this.state = {
             isExpanded: false,
             searchExpanded: false,
-            value: props.inputProps?.value ? props.inputProps.value : '',
-            searchList: props.searchList,
-            filteredResult: props.inputProps?.value ? this.filterList(props.searchList, props.inputProps.value) : props.searchList
+            value: props.inputProps?.value ? props.inputProps.value : ''
         };
     }
 
@@ -32,26 +30,24 @@ class SearchInput extends Component {
     };
 
     handleListItemClick = (event, item) => {
-        this.setState((prevState) => ({
+        this.setState({
             value: item.text,
             isExpanded: false,
-            searchExpanded: false,
-            filteredResult: this.filterList(prevState.searchList, item.text)
-        }), () => {
+            searchExpanded: false
+        }, () => {
             item?.callback();
             this.props.onSelect(event, item);
         });
     };
 
     handleChange = event => {
         let filteredResult;
-        if (this.state.searchList) {
-            filteredResult = this.filterList(this.state.searchList, event.target.value);
+        if (this.props.searchList) {
+            filteredResult = this.filterList(this.props.searchList, event.target.value);
         }
         this.setState({
             value: event.target.value,
-            isExpanded: true,
-            filteredResult: filteredResult
+            isExpanded: true
         }, () => {
             this.props.onChange(event, filteredResult);
         });
@@ -90,9 +86,7 @@ class SearchInput extends Component {
             this.setState({
                 isExpanded: false,
                 searchExpanded: false,
-                value: '',
-                searchList: this.props.searchList,
-                filteredResult: this.props.searchList
+                value: ''
             });
         }
     };
@@ -135,12 +129,12 @@ class SearchInput extends Component {
                 [`is-${validationState?.state}`]: validationState?.state
             }
         ) : inputGroupClasses;
-
+        let filteredResult = this.state.value && this.props.searchList ? this.filterList(this.props.searchList, this.state.value) : this.props.searchList;
         const popoverBody = (
             <Menu disableStyles={disableStyles}>
                 <Menu.List {...listProps}>
-                    {this.state.filteredResult && this.state.filteredResult.length > 0 ? (
-                        this.state.filteredResult.map((item, index) => {
+                    {filteredResult && filteredResult.length > 0 ? (
+                        filteredResult.map((item, index) => {
                             return (
                                 <Menu.Item
                                     key={index}
@@ -166,11 +160,11 @@ class SearchInput extends Component {
                     body={
                         (<>
                             {validationState &&
-                            <FormMessage
-                                disableStyles={disableStyles}
-                                type={validationState.state}>
-                                {validationState.text}
-                            </FormMessage>
+                                <FormMessage
+                                    disableStyles={disableStyles}
+                                    type={validationState.state}>
+                                    {validationState.text}
+                                </FormMessage>
                             }
                             {popoverBody}
                         </>)}

src/SearchInput/SearchInput.test.js

@@ -21,6 +21,11 @@ describe('<SearchInput />', () => {
         { text: 'orange', callback: jest.fn() }
     ];
 
+    const searchDataNew = [
+        { text: 'peaches', callback: jest.fn() },
+        { text: 'pear', callback: jest.fn() }
+    ];
+
     const defaultSearchInput = (
         <SearchInput
             className='blue'
@@ -54,11 +59,7 @@ describe('<SearchInput />', () => {
 
             expect(wrapper.state(['value'])).toBe(searchData[0].text);
             expect(wrapper.state(['isExpanded'])).toBe(true);
-            expect(wrapper.state(['filteredResult'])).toEqual(
-                expect.arrayContaining([
-                    expect.objectContaining({ text: searchData[0].text })
-                ])
-            );
+
         });
 
         test('should dispatch the onChange callback with the event', () => {
@@ -233,5 +234,50 @@ describe('<SearchInput />', () => {
             ).toBe('Sample');
 
         });
+
+        test('should allow props list to be changed after creation', () => {
+            let ref;
+            class Test extends React.Component {
+                constructor(props) {
+                    super(props);
+                    ref = React.createRef();
+                    this.state = {
+                        list: searchData
+                    };
+                }
+
+                handleChange = () => {
+                    if (ref.current.value === 'pe') {
+                        this.setState({
+                            list: searchDataNew
+                        });
+                    }
+                }
+                render = () => (<SearchInput inputProps={{ ref: ref }} onChange={this.handleChange}
+                    searchList={this.state.list} />);
+            }
+            const wrapper = mount(<Test />);
+
+            wrapper.find('.fd-input').simulate('click');
+            let rows = wrapper.find('li');
+            expect(rows).toHaveLength(searchData.length);
+
+            wrapper
+                .find(searchInput)
+                .simulate('change', { target: { value: 'pe' } });
+
+            rows = wrapper.find('li');
+
+            expect(rows).toHaveLength(searchDataNew.length);
+
+            wrapper
+                .find(searchInput)
+                .simulate('change', { target: { value: searchDataNew[0].text } });
+
+            rows = wrapper.find('li');
+
+            expect(rows).toHaveLength(1);
+
+        });
     });
 });