chore: Cache display label (#484)

* test driven

* cache with label

Author: zombieJ

package.json

@@ -50,6 +50,7 @@
     "warning": "^4.0.3"
   },
   "devDependencies": {
+    "@types/enzyme": "^3.10.5",
     "@types/jest": "^25.1.0",
     "@types/react": "^16.8.19",
     "@types/react-dom": "^16.8.4",

src/generate.tsx

@@ -39,6 +39,7 @@ import useDelayReset from './hooks/useDelayReset';
 import useLayoutEffect from './hooks/useLayoutEffect';
 import { getSeparatedContent } from './utils/valueUtil';
 import useSelectTriggerControl from './hooks/useSelectTriggerControl';
+import useCacheDisplayValue from './hooks/useCacheDisplayValue';
 
 const DEFAULT_OMIT_PROPS = [
   'removeIcon',
@@ -450,7 +451,7 @@ export default function generateSelector<
     }, [mergedSearchValue]);
 
     // ============================ Selector ============================
-    const displayValues = React.useMemo<DisplayLabelValueType[]>(
+    let displayValues = React.useMemo<DisplayLabelValueType[]>(
       () =>
         mergedRawValue.map((val: RawValueType) => {
           const displayValue = getLabeledValue(val, {
@@ -468,6 +469,9 @@ export default function generateSelector<
       [baseValue, mergedOptions],
     );
 
+    // Polyfill with cache label
+    displayValues = useCacheDisplayValue(displayValues);
+
     const triggerSelect = (newValue: RawValueType, isSelect: boolean, source: SelectSource) => {
       const outOption = findValueOption([newValue], mergedFlattenOptions)[0];
 
@@ -781,10 +785,13 @@ export default function generateSelector<
     };
 
     const activeTimeoutIds: number[] = [];
-    React.useEffect(() => () => {
+    React.useEffect(
+      () => () => {
         activeTimeoutIds.forEach(timeoutId => clearTimeout(timeoutId));
         activeTimeoutIds.splice(0, activeTimeoutIds.length);
-      }, []);
+      },
+      [],
+    );
 
     const onInternalMouseDown: React.MouseEventHandler<HTMLDivElement> = (event, ...restArgs) => {
       const { target } = event;

src/hooks/useCacheDisplayValue.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { DisplayLabelValueType } from '../interface/generator';
+
+export default function useCacheDisplayValue(
+  values: DisplayLabelValueType[],
+): DisplayLabelValueType[] {
+  const prevValuesRef = React.useRef(values);
+
+  const mergedValues = React.useMemo(() => {
+    // Create value - label map
+    const valueLabels = new Map();
+    prevValuesRef.current.forEach(({ value, label }) => {
+      if (value !== label) {
+        valueLabels.set(value, label);
+      }
+    });
+
+    const resultValues = values.map(item => {
+      const cacheLabel = valueLabels.get(item.value);
+      if (item.value === item.label && cacheLabel) {
+        return {
+          ...item,
+          label: cacheLabel,
+        };
+      }
+
+      return item;
+    });
+
+    prevValuesRef.current = resultValues;
+    return resultValues;
+  }, [values]);
+
+  return mergedValues;
+}

tests/Select.test.tsx

@@ -1599,4 +1599,12 @@ describe('Select.Basic', () => {
     toggleOpen(wrapper);
     expect(wrapper.find('.rc-select-selection-placeholder').length).toBeFalsy();
   });
+
+  it('Remove options can keep the cache', () => {
+    const wrapper = mount(<Select value={903} options={[{ value: 903, label: 'Bamboo' }]} />);
+    expect(findSelection(wrapper).text()).toEqual('Bamboo');
+
+    wrapper.setProps({ options: [] });
+    expect(findSelection(wrapper).text()).toEqual('Bamboo');
+  });
 });