From 7166145e41e7a5283270475fbb732c1c64b2d9d5 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Thu, 6 Aug 2020 16:26:21 +0800
Subject: [PATCH 1/3] test: Add missing test

---
 tests/Multiple.test.tsx | 36 +++++++++++++++++++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/tests/Multiple.test.tsx b/tests/Multiple.test.tsx
index bcb014495..d9e30ddef 100644
--- a/tests/Multiple.test.tsx
+++ b/tests/Multiple.test.tsx
@@ -121,7 +121,7 @@ describe('Select.Multiple', () => {
     expect(wrapper.find('input').props().value).toBe('');
   });
 
-  it('shouldn\'t separate words when compositing', () => {
+  it("shouldn't separate words when compositing", () => {
     const handleChange = jest.fn();
     const handleSelect = jest.fn();
     const wrapper = mount(
@@ -391,4 +391,38 @@ describe('Select.Multiple', () => {
     toggleOpen(wrapper);
     expect(wrapper.find('input').props().value).toEqual('');
   });
+
+  it('ajax update should keep options', () => {
+    const onChange = jest.fn();
+
+    const wrapper = mount(
+      <Select
+        mode="multiple"
+        options={[{ value: 'light', label: 'Light', option: 2333 }]}
+        onChange={onChange}
+        showSearch
+      />,
+    );
+
+    // First select
+    toggleOpen(wrapper);
+    selectItem(wrapper, 0);
+    expect(onChange).toHaveBeenCalledWith(
+      ['light'],
+      [{ label: 'Light', value: 'light', option: 2333 }],
+    );
+    onChange.mockReset();
+
+    // Next select
+    wrapper.setProps({ options: [{ value: 'bamboo', label: 'Bamboo', option: 444 }] });
+    toggleOpen(wrapper);
+    selectItem(wrapper, 0);
+    expect(onChange).toHaveBeenCalledWith(
+      ['light', 'bamboo'],
+      [
+        { label: 'Light', value: 'light', option: 2333 },
+        { value: 'bamboo', label: 'Bamboo', option: 444 },
+      ],
+    );
+  });
 });

From 218eb052c812a96c6a8822ffb68ed59603484f48 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Thu, 6 Aug 2020 16:54:07 +0800
Subject: [PATCH 2/3] fix: Support cache options

---
 src/generate.tsx        | 17 ++++++++++++++++-
 src/utils/valueUtil.ts  | 15 ++++++++++++++-
 tests/Multiple.test.tsx |  8 ++++++--
 3 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/src/generate.tsx b/src/generate.tsx
index be4c9d420..4062f114b 100644
--- a/src/generate.tsx
+++ b/src/generate.tsx
@@ -190,6 +190,7 @@ export interface GenerateConfig<OptionsType extends object[]> {
   findValueOption: (
     values: RawValueType[],
     options: FlattenOptionsType<OptionsType>,
+    info?: { prevValueOptions?: OptionsType[] },
   ) => OptionsType;
   /** Check if a value is disabled */
   isValueDisabled: (value: RawValueType, options: FlattenOptionsType<OptionsType>) => boolean;
@@ -515,6 +516,9 @@ export default function generateSelector<
       }
     };
 
+    // We need cache options here in case user update the option list
+    const [prevValueOptions, setPrevValueOptions] = useState([]);
+
     const triggerChange = (newRawValues: RawValueType[]) => {
       if (useInternalProps && internalProps.skipTriggerChange) {
         return;
@@ -531,7 +535,18 @@ export default function generateSelector<
       const outValue: ValueType = (isMultiple ? outValues : outValues[0]) as ValueType;
       // Skip trigger if prev & current value is both empty
       if (onChange && (mergedRawValue.length !== 0 || outValues.length !== 0)) {
-        const outOptions = findValueOption(newRawValues, newRawValuesOptions);
+        const outOptions = findValueOption(newRawValues, newRawValuesOptions, { prevValueOptions });
+
+        // We will cache option in case it removed by ajax
+        setPrevValueOptions(
+          outOptions.map((option, index) => {
+            const clone = { ...option };
+            Object.defineProperty(clone, '_INTERNAL_OPTION_VALUE_', {
+              get: () => newRawValues[index],
+            });
+            return clone;
+          }),
+        );
 
         onChange(outValue, isMultiple ? outOptions : outOptions[0]);
       }
diff --git a/src/utils/valueUtil.ts b/src/utils/valueUtil.ts
index c6cd8e01a..ff60640a3 100644
--- a/src/utils/valueUtil.ts
+++ b/src/utils/valueUtil.ts
@@ -90,6 +90,7 @@ function injectPropsWithOption<T>(option: T): T {
 export function findValueOption(
   values: RawValueType[],
   options: FlattenOptionData[],
+  { prevValueOptions = [] }: { prevValueOptions?: OptionData[] } = {},
 ): OptionData[] {
   const optionMap: Map<RawValueType, OptionData> = new Map();
 
@@ -101,7 +102,19 @@ export function findValueOption(
     }
   });
 
-  return values.map(val => injectPropsWithOption(optionMap.get(val)));
+  return values.map(val => {
+    let option = optionMap.get(val);
+
+    // Fallback to try to find prev options
+    if (!option) {
+      option = {
+        // eslint-disable-next-line no-underscore-dangle
+        ...prevValueOptions.find(opt => opt._INTERNAL_OPTION_VALUE_ === val),
+      };
+    }
+
+    return injectPropsWithOption(option);
+  });
 }
 
 export const getLabeledValue: GetLabeledValue<FlattenOptionData[]> = (
diff --git a/tests/Multiple.test.tsx b/tests/Multiple.test.tsx
index d9e30ddef..f14fd5b16 100644
--- a/tests/Multiple.test.tsx
+++ b/tests/Multiple.test.tsx
@@ -397,6 +397,7 @@ describe('Select.Multiple', () => {
 
     const wrapper = mount(
       <Select
+        labelInValue
         mode="multiple"
         options={[{ value: 'light', label: 'Light', option: 2333 }]}
         onChange={onChange}
@@ -408,7 +409,7 @@ describe('Select.Multiple', () => {
     toggleOpen(wrapper);
     selectItem(wrapper, 0);
     expect(onChange).toHaveBeenCalledWith(
-      ['light'],
+      [{ label: 'Light', value: 'light', key: 'light' }],
       [{ label: 'Light', value: 'light', option: 2333 }],
     );
     onChange.mockReset();
@@ -418,7 +419,10 @@ describe('Select.Multiple', () => {
     toggleOpen(wrapper);
     selectItem(wrapper, 0);
     expect(onChange).toHaveBeenCalledWith(
-      ['light', 'bamboo'],
+      [
+        { label: 'Light', value: 'light', key: 'light' },
+        { label: 'Bamboo', value: 'bamboo', key: 'bamboo' },
+      ],
       [
         { label: 'Light', value: 'light', option: 2333 },
         { value: 'bamboo', label: 'Bamboo', option: 444 },

From 57d1edd5a29f3fafde1092823f251f8dd86f0e24 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Thu, 6 Aug 2020 16:59:10 +0800
Subject: [PATCH 3/3] fix ts

---
 src/generate.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/generate.tsx b/src/generate.tsx
index 4062f114b..e4c172409 100644
--- a/src/generate.tsx
+++ b/src/generate.tsx
@@ -187,11 +187,15 @@ export interface GenerateConfig<OptionsType extends object[]> {
   /** Convert single raw value into { label, value } format. Will be called by each value */
   getLabeledValue: GetLabeledValue<FlattenOptionsType<OptionsType>>;
   filterOptions: FilterOptions<OptionsType>;
-  findValueOption: (
-    values: RawValueType[],
-    options: FlattenOptionsType<OptionsType>,
-    info?: { prevValueOptions?: OptionsType[] },
-  ) => OptionsType;
+  findValueOption:
+    | (// Need still support legacy ts api
+      (values: RawValueType[], options: FlattenOptionsType<OptionsType>) => OptionsType)
+    | (// New API add prevValueOptions support
+      (
+        values: RawValueType[],
+        options: FlattenOptionsType<OptionsType>,
+        info?: { prevValueOptions?: OptionsType[] },
+      ) => OptionsType);
   /** Check if a value is disabled */
   isValueDisabled: (value: RawValueType, options: FlattenOptionsType<OptionsType>) => boolean;
   warningProps?: (props: any) => void;