From d1b03c24b9feb9c616047b89c3ede60d53c11de0 Mon Sep 17 00:00:00 2001
From: Joakim Bjerknes <joakbjerk@gmail.com>
Date: Mon, 22 Jan 2024 08:17:58 +0100
Subject: [PATCH] fix(DrawerList): update original data when data prop changes
 (#3247)

---
 .../drawer-list/DrawerListHelpers.js          |  1 +
 .../drawer-list/__tests__/DrawerList.test.tsx | 59 +++++++++++++++++++
 2 files changed, 60 insertions(+)

diff --git a/packages/dnb-eufemia/src/fragments/drawer-list/DrawerListHelpers.js b/packages/dnb-eufemia/src/fragments/drawer-list/DrawerListHelpers.js
index fabebce1941..97ec3d116b6 100644
--- 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
index 2c07ab87e2d..b99164c109e 100644
--- 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()