Merge pull request #1069 from dnbexperience/fix/autocomplete-indexing

fix(Autocomplete): fix updateData when selected_key changes
dnbexperience · Oct 28, 2021 · c6f8653 · c6f8653
2 parents 218315a + 90f8b05
commit c6f8653
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 6 deletions.
diff --git a/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js b/packages/dnb-eufemia/src/components/autocomplete/Autocomplete.js
@@ -646,7 +646,7 @@ class AutocompleteInstance extends React.PureComponent {
   }
 
   emptyData = () => {
-    this._rC = {}
+    this._cacheMemory = {}
 
     this.setState({
       inputValue: '',
@@ -731,6 +731,17 @@ class AutocompleteInstance extends React.PureComponent {
       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.setData(
       () => rawData, // set data as a function, so it gets re-evaluated with normalizeData
       (newData) => {
@@ -1034,7 +1045,7 @@ class AutocompleteInstance extends React.PureComponent {
     } = {},
     cb
   ) {
-    this._rC = {}
+    this._cacheMemory = {}
 
     if (!overwriteSearchIndex && this.state.searchIndex) {
       return this.state.searchIndex
@@ -1294,9 +1305,9 @@ class AutocompleteInstance extends React.PureComponent {
 
         // if the ID and the content is the same, use the cached version
         const cacheHash = id + value
-        this._rC = this._rC || {}
-        if (this._rC[cacheHash]) {
-          return this._rC[cacheHash]
+        this._cacheMemory = this._cacheMemory || {}
+        if (this._cacheMemory[cacheHash]) {
+          return this._cacheMemory[cacheHash]
         }
 
         const isComponent =
@@ -1396,7 +1407,7 @@ class AutocompleteInstance extends React.PureComponent {
           return result
         })
 
-        return (this._rC[cacheHash] = children)
+        return (this._cacheMemory[cacheHash] = children)
       }
 
       if (this.skipFilter || skipFilter) {
@@ -1543,6 +1554,10 @@ class AutocompleteInstance extends React.PureComponent {
       }
     }
 
+    if (typeof args.data.render === 'function') {
+      delete args.data.render
+    }
+
     dispatchCustomElementEvent(this, 'on_change', {
       ...args,
       ...this.getEventObjects('on_change'),

diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.js b/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.test.js
@@ -831,6 +831,66 @@ describe('Autocomplete component', () => {
     expect(onBlur.mock.calls[0][0].value).toBe('BB cc zethx')
   })
 
+  it('will invalidate selected_item when selected_key changes', () => {
+    const mockData = [
+      { selected_key: 'a', content: 'AA c' },
+      { selected_key: 'b', content: 'BB cc zethx' },
+      { selected_key: 'c', content: ['CC', 'cc'] },
+    ]
+
+    const newMockData = [
+      { selected_key: 'a', content: 'AA c' },
+      { selected_key: 'x', content: 'BB cc changed value' },
+      { selected_key: 'c', content: ['CC', 'cc'] },
+    ]
+
+    const onTypeHandler = ({ value, updateData }) => {
+      if (value === 'c') {
+        updateData(newMockData)
+      }
+    }
+
+    const on_change = jest.fn()
+    const on_type = jest.fn(onTypeHandler)
+
+    const Comp = mount(
+      <Component
+        {...mockProps}
+        on_change={on_change}
+        on_type={on_type}
+        data={mockData}
+      />
+    )
+
+    Comp.find('input').simulate('change', { target: { value: 'cc' } })
+
+    // Make a selection
+    Comp.find('li.dnb-drawer-list__option').at(1).simulate('click')
+
+    expect(Comp.find('input').instance().value).toBe(mockData[1].content)
+
+    expect(on_change).toHaveBeenCalledTimes(1)
+    expect(on_change.mock.calls[0][0].data).toEqual(mockData[1])
+
+    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)
+
+    Comp.find('input').simulate('change', { target: { value: 'cc' } })
+    expect(on_type).toHaveBeenCalledTimes(3)
+
+    // Make a selection
+    Comp.find('li.dnb-drawer-list__option').at(1).simulate('click')
+
+    expect(on_change).toHaveBeenCalledTimes(3)
+    expect(on_change.mock.calls[2][0].data).toEqual(newMockData[1])
+    expect(Comp.find('input').instance().value).toBe(
+      newMockData[1].content
+    )
+  })
+
   const runBlurActiveItemTest = ({
     Comp,
     shouldHaveActiveItem,