From 756aa0ced336b28c70df15398619c066301161b7 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Mon, 6 Sep 2021 14:23:17 +0800
Subject: [PATCH 1/2] test: Test driven

---
 src/OptionList.tsx           |  5 +++--
 tests/Accessibility.test.tsx | 41 +++++++++++++++++++++++++++++++++++-
 2 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/src/OptionList.tsx b/src/OptionList.tsx
index fb8d3a8bd..ff81cc311 100644
--- a/src/OptionList.tsx
+++ b/src/OptionList.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useEffect } from 'react';
 import KeyCode from 'rc-util/lib/KeyCode';
 import omit from 'rc-util/lib/omit';
 import pickAttrs from 'rc-util/lib/pickAttrs';
@@ -140,12 +141,12 @@ const OptionList: React.ForwardRefRenderFunction<
   };
 
   // Auto active first item when list length or searchValue changed
-  React.useEffect(() => {
+  useEffect(() => {
     setActive(defaultActiveFirstOption !== false ? getEnabledActiveIndex(0) : -1);
   }, [memoFlattenOptions.length, searchValue]);
 
   // Auto scroll to item position in single mode
-  React.useEffect(() => {
+  useEffect(() => {
     /**
      * React will skip `onChange` when component update.
      * `setActive` function will call root accessibility state update which makes re-render.
diff --git a/tests/Accessibility.test.tsx b/tests/Accessibility.test.tsx
index 0bcf1e8f6..92ae997d7 100644
--- a/tests/Accessibility.test.tsx
+++ b/tests/Accessibility.test.tsx
@@ -1,7 +1,8 @@
 import { mount } from 'enzyme';
 import * as React from 'react';
+import KeyCode from 'rc-util/lib/KeyCode';
 import Select from '../src';
-import { injectRunAllTimers } from './utils/common';
+import { injectRunAllTimers, expectOpen } from './utils/common';
 
 describe('Select.Accessibility', () => {
   injectRunAllTimers(jest);
@@ -23,4 +24,42 @@ describe('Select.Accessibility', () => {
       }),
     );
   });
+
+  it.only('active index should keep', () => {
+    const wrapper = mount(
+      <Select
+        options={[
+          {
+            label: 'Bamboo',
+            value: 'bamboo',
+          },
+          {
+            label: 'Light',
+            value: 'light',
+          },
+        ]}
+      />,
+    );
+
+    // First Match
+    wrapper.find('input').simulate('change', { target: { value: 'b' } });
+    jest.runAllTimers();
+
+    expectOpen(wrapper);
+    expect(
+      wrapper.find('.rc-select-item-option-active .rc-select-item-option-content').text(),
+    ).toEqual('Bamboo');
+
+    wrapper.find('input').simulate('keyDown', { which: KeyCode.ENTER });
+    expectOpen(wrapper, false);
+
+    // Next Match
+    wrapper.find('input').simulate('change', { target: { value: 'l' } });
+    jest.runAllTimers();
+
+    expectOpen(wrapper);
+    expect(
+      wrapper.find('.rc-select-item-option-active .rc-select-item-option-content').text(),
+    ).toEqual('Light');
+  });
 });

From f184deee87ef854b9f1c12cf69f8644f56e9699b Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Mon, 6 Sep 2021 15:13:37 +0800
Subject: [PATCH 2/2] fix: searchValue update should refresh scroll logic

---
 src/OptionList.tsx           |  9 ++++++---
 tests/Accessibility.test.tsx | 11 +++++++++--
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/OptionList.tsx b/src/OptionList.tsx
index ff81cc311..ccb822192 100644
--- a/src/OptionList.tsx
+++ b/src/OptionList.tsx
@@ -158,8 +158,11 @@ const OptionList: React.ForwardRefRenderFunction<
         const index = memoFlattenOptions.findIndex(
           ({ data }) => (data as OptionData).value === value,
         );
-        setActive(index);
-        scrollIntoView(index);
+
+        if (index !== -1) {
+          setActive(index);
+          scrollIntoView(index);
+        }
       }
     });
 
@@ -169,7 +172,7 @@ const OptionList: React.ForwardRefRenderFunction<
     }
 
     return () => clearTimeout(timeoutId);
-  }, [open]);
+  }, [open, searchValue]);
 
   // ========================== Values ==========================
   const onSelectValue = (value: RawValueType) => {
diff --git a/tests/Accessibility.test.tsx b/tests/Accessibility.test.tsx
index 92ae997d7..e2996f745 100644
--- a/tests/Accessibility.test.tsx
+++ b/tests/Accessibility.test.tsx
@@ -25,10 +25,16 @@ describe('Select.Accessibility', () => {
     );
   });
 
-  it.only('active index should keep', () => {
+  // https://github.com/ant-design/ant-design/issues/31850
+  it('active index should keep', () => {
     const wrapper = mount(
       <Select
+        showSearch
         options={[
+          {
+            label: 'Little',
+            value: 'little',
+          },
           {
             label: 'Bamboo',
             value: 'bamboo',
@@ -54,7 +60,8 @@ describe('Select.Accessibility', () => {
     expectOpen(wrapper, false);
 
     // Next Match
-    wrapper.find('input').simulate('change', { target: { value: 'l' } });
+    wrapper.find('input').simulate('change', { target: { value: '' } });
+    wrapper.find('input').simulate('change', { target: { value: 'g' } });
     jest.runAllTimers();
 
     expectOpen(wrapper);