Fix selecting an option with the keyboard while using fieldNames (#713)

* Fix selecting an option with the keyboard while using fieldNames

* Missed one

* Test cases for fieldNames and key operations

Author: akmjenkins

src/OptionList.tsx

@@ -31,8 +31,16 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, OptionListP
   _,
   ref,
 ) => {
-  const { prefixCls, id, open, multiple, searchValue, toggleOpen, notFoundContent, onPopupScroll } =
-    useBaseProps();
+  const {
+    prefixCls,
+    id,
+    open,
+    multiple,
+    searchValue,
+    toggleOpen,
+    notFoundContent,
+    onPopupScroll,
+  } = useBaseProps();
   const {
     flattenOptions,
     onActiveValue,
@@ -95,8 +103,7 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, OptionListP
       onActiveValue(null, -1, info);
       return;
     }
-
-    onActiveValue(flattenItem.data.value, index, info);
+    onActiveValue(flattenItem.value, index, info);
   };
 
   // Auto active first item when list length or searchValue changed
@@ -180,7 +187,7 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, OptionListP
           // value
           const item = memoFlattenOptions[activeIndex];
           if (item && !item.data.disabled) {
-            onSelectValue(item.data.value);
+            onSelectValue(item.value);
           } else {
             onSelectValue(undefined);
           }

tests/OptionList.test.tsx

@@ -24,7 +24,7 @@ describe('OptionList', () => {
   });
 
   function generateList({ options, values, ref, ...props }: any) {
-    const fieldNames = fillFieldNames({}, false);
+    const fieldNames = fillFieldNames(props.fieldNames || {}, false);
     const flattenedOptions = flattenOptions(options, {
       fieldNames,
       childrenAsData: false,
@@ -121,6 +121,56 @@ describe('OptionList', () => {
     );
   });
 
+  it('key operation with fieldNames', () => {
+    const onActiveValue = jest.fn();
+    const toggleOpen = jest.fn();
+    const onSelect = jest.fn();
+    const listRef = React.createRef<RefOptionListProps>();
+    mount(
+      generateList({
+        fieldNames: { value: 'foo', label: 'bar' },
+        options: [{ foo: '1' }, { foo: '2' }],
+        onActiveValue,
+        onSelect,
+        toggleOpen,
+        ref: listRef,
+      }),
+    );
+
+    onActiveValue.mockReset();
+    act(() => {
+      listRef.current.onKeyDown({ which: KeyCode.DOWN } as any);
+    });
+    expect(onActiveValue).toHaveBeenCalledWith(
+      '2',
+      expect.anything(),
+      expect.objectContaining({ source: 'keyboard' }),
+    );
+
+    act(() => {
+      listRef.current.onKeyDown({ which: KeyCode.ENTER } as any);
+    });
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    expect(onSelect).toHaveBeenCalledWith('2', expect.objectContaining({ selected: true }));
+
+    onSelect.mockReset();
+    onActiveValue.mockReset();
+    act(() => {
+      listRef.current.onKeyDown({ which: KeyCode.UP } as any);
+    });
+    expect(onActiveValue).toHaveBeenCalledWith(
+      '1',
+      expect.anything(),
+      expect.objectContaining({ source: 'keyboard' }),
+    );
+
+    act(() => {
+      listRef.current.onKeyDown({ which: KeyCode.ENTER } as any);
+    });
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    expect(onSelect).toHaveBeenCalledWith('1', expect.objectContaining({ selected: true }));
+  });
+
   // mocked how we detect running platform in test environment
   it('special key operation on Mac', () => {
     const onActiveValue = jest.fn();