fix(DrawerList): update original data when data prop changes (#3247)

dnbexperience · Jan 22, 2024 · d1b03c2 · d1b03c2
1 parent 1aa3338
commit d1b03c2
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 0 deletions.
diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/DrawerListHelpers.js b/packages/dnb-eufemia/src/fragments/drawer-list/DrawerListHelpers.js
@@ -451,6 +451,7 @@ export const prepareDerivedState = (props, state) => {
       state.cache_hash = state.cache_hash + Date.now()
     }
     state.data = getData(props)
+    state.original_data = getData(props)
   }
 
   state.usePortal =

diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/DrawerList.test.tsx b/packages/dnb-eufemia/src/fragments/drawer-list/__tests__/DrawerList.test.tsx
@@ -9,6 +9,7 @@ import { act, render, screen, waitFor } from '@testing-library/react'
 import DrawerList, {
   DrawerListProps,
   DrawerListDataObjectUnion,
+  DrawerListData,
 } from '../DrawerList'
 
 import {
@@ -480,6 +481,64 @@ describe('DrawerList component', () => {
     })
   })
 
+  it('should update and correctly set selected item on data prop change', () => {
+    const data: Record<string, DrawerListData> = {
+      first: [
+        { selected_key: 'key_1', content: 'Content 1' },
+        { selected_key: 'key_2', content: 'Content 2' },
+        { selected_key: 'key_3', content: 'Content 3' },
+      ],
+      second: [
+        { selected_key: 'key_4', content: 'Content 4' },
+        { selected_key: 'key_5', content: 'Content 5' },
+      ],
+      third: [
+        { selected_key: 'key_6', content: 'Content 6' },
+        { selected_key: 'key_7', content: 'Content 7' },
+        { selected_key: 'key_8', content: 'Content 8' },
+      ],
+    }
+
+    const getSelectedItem = () =>
+      document.querySelector('.dnb-drawer-list__option--selected')
+
+    const { rerender } = render(
+      <DrawerList
+        opened
+        no_animation
+        data={data.first}
+        value={data.first[0].selected_key}
+        {...mockProps}
+      />
+    )
+
+    expect(getSelectedItem()).toHaveTextContent('Content 1')
+
+    rerender(
+      <DrawerList
+        opened
+        no_animation
+        data={data.second}
+        value={data.second[1].selected_key}
+        {...mockProps}
+      />
+    )
+
+    expect(getSelectedItem()).toHaveTextContent('Content 5')
+
+    rerender(
+      <DrawerList
+        opened
+        no_animation
+        data={data.third}
+        value={data.third[2].selected_key}
+        {...mockProps}
+      />
+    )
+
+    expect(getSelectedItem()).toHaveTextContent('Content 8')
+  })
+
   it('has to return all additional attributes the event return', () => {
     const on_show = jest.fn()
     const on_hide = jest.fn()