fix: optionLabelProp (#691)

Author: zombieJ

src/OptionList.tsx

@@ -44,7 +44,6 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, OptionListP
     virtual,
     listHeight,
     listItemHeight,
-    optionLabelProp,
   } = React.useContext(SelectContext);
 
   const itemPrefixCls = `${prefixCls}-item`;
@@ -225,13 +224,7 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, OptionListP
 
   const omitFieldNameList = Object.keys(fieldNames).map((key) => fieldNames[key]);
 
-  const getLabel = (item: Record<string, any>) => {
-    if (optionLabelProp) {
-      return item.data[optionLabelProp];
-    }
-
-    return item.label;
-  };
+  const getLabel = (item: Record<string, any>) => item.label;
 
   const renderItem = (index: number) => {
     const item = memoFlattenOptions[index];

src/Select.tsx

@@ -276,7 +276,8 @@ const Select = React.forwardRef(
           const option = valueOptions.get(rawValue);
           if (option) {
             // Fill missing props
-            if (rawLabel === undefined) rawLabel = option?.[mergedFieldNames.label];
+            if (rawLabel === undefined)
+              rawLabel = option?.[optionLabelProp || mergedFieldNames.label];
             if (rawKey === undefined) rawKey = option?.key ?? rawValue;
             rawDisabled = option?.disabled;
 
@@ -297,7 +298,7 @@ const Select = React.forwardRef(
           };
         });
       },
-      [mergedFieldNames, valueOptions],
+      [mergedFieldNames, optionLabelProp, valueOptions],
     );
 
     // =========================== Values ===========================
@@ -594,7 +595,6 @@ const Select = React.forwardRef(
         listHeight,
         listItemHeight,
         childrenAsData,
-        optionLabelProp,
       }),
       [
         parsedOptions,
@@ -609,7 +609,6 @@ const Select = React.forwardRef(
         listHeight,
         listItemHeight,
         childrenAsData,
-        optionLabelProp,
       ],
     );
 

src/SelectContext.ts

@@ -17,7 +17,6 @@ export interface SelectContextProps {
   listHeight?: number;
   listItemHeight?: number;
   childrenAsData?: boolean;
-  optionLabelProp?: string;
 }
 
 const SelectContext = React.createContext<SelectContextProps>(null);

tests/Multiple.test.tsx

@@ -474,4 +474,32 @@ describe('Select.Multiple', () => {
 
     expect(wrapper.exists('.rc-select-selection-item-remove')).toBeFalsy();
   });
+
+  it('optionLabelProp', () => {
+    const wrapper = mount(
+      <Select
+        mode="multiple"
+        value={['bamboo', 'little']}
+        open
+        optionLabelProp="selector"
+        options={[
+          {
+            label: 'Bamboo',
+            value: 'bamboo',
+            selector: 'BAMBOO',
+          },
+          {
+            label: 'Little',
+            value: 'little',
+            selector: 'LITTLE',
+          },
+        ]}
+      />,
+    );
+
+    expect(findSelection(wrapper, 0).text()).toBe('BAMBOO');
+    expect(findSelection(wrapper, 1).text()).toBe('LITTLE');
+    expect(wrapper.find('div.rc-select-item-option-content').at(0).text()).toBe('Bamboo');
+    expect(wrapper.find('div.rc-select-item-option-content').at(1).text()).toBe('Little');
+  });
 });