From 208650b0b23a904c3992807e2e7dad1cc1029cea Mon Sep 17 00:00:00 2001
From: Yaroslav Kuznietsov <kuznetsov.yaroslav.yk@gmail.com>
Date: Wed, 17 Jul 2024 12:26:43 +0300
Subject: [PATCH 1/3] [PickerList]: fixed PickerList predefined value update.

---
 .../src/pickers/hooks/usePickerList.ts         | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/uui-components/src/pickers/hooks/usePickerList.ts b/uui-components/src/pickers/hooks/usePickerList.ts
index 57235b4949..4eb1b3f186 100644
--- a/uui-components/src/pickers/hooks/usePickerList.ts
+++ b/uui-components/src/pickers/hooks/usePickerList.ts
@@ -1,9 +1,10 @@
-import { useContext, useMemo } from 'react';
+import { useContext, useEffect, useMemo } from 'react';
 import { DataRowProps, UuiContext } from '@epam/uui-core';
 import { i18n } from '../../i18n';
 import { usePicker } from './usePicker';
 import { usePickerListState } from './usePickerListState';
 import { UsePickerListProps } from './types';
+import { applyValueToDataSourceState, dataSourceStateToValue } from '../bindingHelpers';
 
 interface LastUsedRec<TId> {
     id: TId;
@@ -69,7 +70,7 @@ export function usePickerList<TItem, TId, TProps>(props: UsePickerListProps<TIte
         visibleIds: getVisibleIds(),
     });
 
-    const { dataSourceState, visibleIds } = pickerListState;
+    const { dataSourceState, setDataSourceState, visibleIds } = pickerListState;
 
     const pickerProps = { ...props, showSelectedOnly: pickerListState.showSelected };
     const picker = usePicker<TItem, TId, UsePickerListProps<TItem, TId, TProps>>(pickerProps, pickerListState);
@@ -85,6 +86,19 @@ export function usePickerList<TItem, TId, TProps>(props: UsePickerListProps<TIte
         getRowOptions,
     } = picker;
 
+    useEffect(() => {
+        const prevValue = dataSourceStateToValue(props, dataSourceState, props.dataSource);
+        if (prevValue !== props.value) {
+            setDataSourceState((state) =>
+                applyValueToDataSourceState(
+                    props,
+                    state,
+                    props.value,
+                    props.dataSource,
+                ));
+        }
+    }, [props.value]);
+
     const onlySelectedView = props.dataSource.useView(getDataSourceState(), handleDataSourceValueChange, {
         rowOptions: getRowOptions(),
         getSearchFields: props.getSearchFields || ((item: TItem) => [getName(item)]),

From 749d52f5eb9a7f68cf8dbaa053a8c72da8878333 Mon Sep 17 00:00:00 2001
From: Yaroslav Kuznietsov <kuznetsov.yaroslav.yk@gmail.com>
Date: Wed, 17 Jul 2024 12:34:06 +0300
Subject: [PATCH 2/3] [PickerList]: added tests for this edge case.

---
 .../pickers/__tests__/PickerList.test.tsx     | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/uui/components/pickers/__tests__/PickerList.test.tsx b/uui/components/pickers/__tests__/PickerList.test.tsx
index c04b60c9b1..be53a7e11e 100644
--- a/uui/components/pickers/__tests__/PickerList.test.tsx
+++ b/uui/components/pickers/__tests__/PickerList.test.tsx
@@ -415,6 +415,38 @@ describe('PickerList', () => {
             });
         });
 
+        it('[valueType id] should update prechecked items', async () => {
+            const { mocks } = await setupPickerListForTest({
+                value: [2],
+                selectionMode: 'multi',
+            });
+
+            await PickerListTestObject.waitForOptionsToBeReady();
+
+            expect(await PickerListTestObject.findCheckedOptions()).toEqual(['A1']);
+
+            await PickerListTestObject.clickOptionCheckbox('A1+');
+            await waitFor(() => {
+                expect(mocks.onValueChange).toHaveBeenLastCalledWith([2, 3]);
+            });
+
+            expect(await PickerListTestObject.findCheckedOptions()).toEqual(['A1', 'A1+']);
+
+            const toggler = PickerListTestObject.getPickerToggler();
+            fireEvent.click(toggler);
+
+            await PickerListTestObject.waitForOptionsToBeReady('modal');
+
+            const checkedOptions1 = await PickerListTestObject.findCheckedOptions({ editMode: 'modal' });
+            expect(checkedOptions1).toEqual(['A1', 'A1+']);
+
+            await PickerListTestObject.clickOptionCheckbox('A1+', { editMode: 'modal' });
+            await waitFor(async () => {
+                const checkedOptions2 = await PickerListTestObject.findCheckedOptions({ editMode: 'modal' });
+                expect(checkedOptions2).toEqual(['A1']);
+            });
+        });
+
         it('[valueType entity] should select & clear several options', async () => {
             const { mocks } = await setupPickerListForTest({
                 value: undefined,

From fd7590d243005bc5d6161eefb0618e0347ca50ac Mon Sep 17 00:00:00 2001
From: Yaroslav Kuznietsov <kuznetsov.yaroslav.yk@gmail.com>
Date: Fri, 19 Jul 2024 15:26:04 +0300
Subject: [PATCH 3/3] [PickerList]: added changelog notes.

---
 changelog.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/changelog.md b/changelog.md
index 6a20c53fcf..2242397c6c 100644
--- a/changelog.md
+++ b/changelog.md
@@ -6,6 +6,7 @@
 
 **What's Fixed**
 * [ApiContext] Combine user's headers with internal ones instead of replacing them when calling `processRequest` function
+* [PickerList]: Fixed updating predefined checked values in PickerList.
 
 # 5.8.2 - 11.07.2024
 
@@ -14,7 +15,7 @@
 * [RTE]: added possibility to customize set of available options for Header, Color and Note plugins
 
 **What's Fixed**
-* Fixed invalid mode for inline inputs 
+* Fixed invalid mode for inline inputs
 * [AnalyticContext]: fixed GA connection
 * [Checkbox]: fixed icon size according design
 * [RadioInput]: fixed caption line-height according design