fix(Autocomplete): fix wrong on_change reset event call

dnbexperience · Nov 15, 2021 · abd9bdd · abd9bdd
1 parent c0c16f5
commit abd9bdd
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 16 deletions.
diff --git a/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js b/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js
@@ -390,9 +390,9 @@ class AutocompleteInstance extends React.PureComponent {
         state.inputValue = props.input_value
       }
 
-      if (props.data !== state.init_data) {
+      if (props.data !== state.prevData) {
         state.updateData(props.data)
-        state.init_data = props.data
+        state.prevData = props.data
       }
     }
 
@@ -410,7 +410,7 @@ class AutocompleteInstance extends React.PureComponent {
     this.state = this.state || {}
     this.state._listenForPropChanges = true
     this.state.mode = props.mode
-    this.state.init_data = props.data // only to compare against new data
+    this.state.prevData = props.data // only to compare against new data
     this.state.updateData = this.updateData // only so we can call setData
 
     if (context.drawerList && context.drawerList.current_title) {
@@ -731,20 +731,25 @@ class AutocompleteInstance extends React.PureComponent {
   updateData = (rawData) => {
     // invalidate the local cache now,
     // because we get else the same after we show the new result
-    this.context.drawerList.setState({
-      cache_hash: 'updateData',
-    })
-
-    // If the "selected_key" has changed in comparison to the existing data,
-    // invalidated our selected_item
-    const itemIndex = this.context.drawerList.selected_item
-    if (parseFloat(itemIndex) > -1) {
-      const newItem = rawData[itemIndex]
-      const oldItem = this.context.drawerList.original_data[itemIndex]
-      if (newItem?.selected_key !== oldItem?.selected_key) {
-        this.resetSelectionItem()
+    this.context.drawerList.setState(
+      {
+        cache_hash: 'updateData',
+      },
+      () => {
+        // If the "selected_key" has changed in comparison to the existing data,
+        // invalidated our selected_item
+        // Also, ensure to run if after a state update, because the "selected_item" (value prop) can have changed,
+        // and should match the new data
+        const itemIndex = this.context.drawerList.selected_item
+        if (parseFloat(itemIndex) > -1) {
+          const newItem = rawData[itemIndex]
+          const oldItem = this.context.drawerList.original_data[itemIndex]
+          if (newItem?.selected_key !== oldItem?.selected_key) {
+            this.resetSelectionItem()
+          }
+        }
       }
-    }
+    )
 
     this.context.drawerList.setData(
       () => rawData, // set data as a function, so it gets re-evaluated with normalizeData

diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.js b/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.js
@@ -865,6 +865,24 @@ describe('Autocomplete component', () => {
       />
     )
 
+    // 1. Make first a selected_item change
+    Comp.setProps({ value: 2 })
+
+    // 2. Then update the data
+    Comp.setProps({ data: newMockData })
+
+    // 3. And change the value again
+    Comp.setProps({ value: 1 })
+
+    // It should not trigger the resetSelectionItem method
+    expect(on_change).toHaveBeenCalledTimes(0)
+    expect(Comp.find('input').instance().value).toBe(
+      newMockData[1].content
+    )
+
+    // Reset data and value
+    Comp.setProps({ value: null, data: mockData })
+
     Comp.find('input').simulate('change', { target: { value: 'cc' } })
 
     // Make a selection
@@ -875,9 +893,11 @@ describe('Autocomplete component', () => {
     expect(on_change).toHaveBeenCalledTimes(1)
     expect(on_change.mock.calls[0][0].data).toEqual(mockData[1])
 
+    // Trigger data update
     Comp.find('input').simulate('change', { target: { value: 'c' } })
 
     expect(Comp.find('input').instance().value).toBe('c')
+
     expect(on_change).toHaveBeenCalledTimes(2)
     expect(on_change.mock.calls[1][0].data).toEqual(undefined)