From 72d74183aecdf0a20f400d6aaed8f8746ad4cb83 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Tue, 12 Apr 2022 11:54:28 +0800
Subject: [PATCH] feat: comobobox mode should not has selected item

close https://github.com/ant-design/ant-design/issues/34975
---
 assets/index.less       |  2 +-
 src/OptionList.tsx      | 23 +++++++++++++++++++----
 tests/Combobox.test.tsx | 14 ++++++++++++++
 3 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/assets/index.less b/assets/index.less
index fb19012f7..c7f91afcf 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -238,7 +238,7 @@
 
       // ------- Active -------
       &-active {
-        background: green;
+        background: #ddd;
       }
 
       // ------ Disabled ------
diff --git a/src/OptionList.tsx b/src/OptionList.tsx
index 49648103d..1e65a10ee 100644
--- a/src/OptionList.tsx
+++ b/src/OptionList.tsx
@@ -36,8 +36,17 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, OptionListP
   _,
   ref,
 ) => {
-  const { prefixCls, id, open, multiple, searchValue, toggleOpen, notFoundContent, onPopupScroll } =
-    useBaseProps();
+  const {
+    prefixCls,
+    id,
+    open,
+    multiple,
+    mode,
+    searchValue,
+    toggleOpen,
+    notFoundContent,
+    onPopupScroll,
+  } = useBaseProps();
   const {
     flattenOptions,
     onActiveValue,
@@ -108,6 +117,12 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, OptionListP
     setActive(defaultActiveFirstOption !== false ? getEnabledActiveIndex(0) : -1);
   }, [memoFlattenOptions.length, searchValue]);
 
+  // https://github.com/ant-design/ant-design/issues/34975
+  const isSelected = React.useCallback(
+    (value: RawValueType) => rawValues.has(value) && mode !== 'combobox',
+    [mode, [...rawValues].toString()],
+  );
+
   // Auto scroll to item position in single mode
   useEffect(() => {
     /**
@@ -246,7 +261,7 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, OptionListP
         key={index}
         role={group ? 'presentation' : 'option'}
         id={`${id}_list_${index}`}
-        aria-selected={rawValues.has(value)}
+        aria-selected={isSelected(value)}
       >
         {value}
       </div>
@@ -293,7 +308,7 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, OptionListP
           const passedProps = omit(otherProps, omitFieldNameList);
 
           // Option
-          const selected = rawValues.has(value);
+          const selected = isSelected(value);
 
           const optionPrefixCls = `${itemPrefixCls}-option`;
           const optionClassName = classNames(itemPrefixCls, optionPrefixCls, className, {
diff --git a/tests/Combobox.test.tsx b/tests/Combobox.test.tsx
index da4a2eeb9..0b207738b 100644
--- a/tests/Combobox.test.tsx
+++ b/tests/Combobox.test.tsx
@@ -507,4 +507,18 @@ describe('Select.Combobox', () => {
 
     expect(wrapper.find('List').prop('data')).toHaveLength(2);
   });
+
+  // https://github.com/ant-design/ant-design/issues/34975
+  it('should not contain selected className in combobox mode', () => {
+    const onChange = jest.fn();
+    const wrapper = mount(
+      <Select mode="combobox" onChange={onChange}>
+        <Option value="One">One</Option>
+        <Option value="Two">Two</Option>
+      </Select>,
+    );
+    toggleOpen(wrapper);
+    selectItem(wrapper);
+    expect(wrapper.find('.rc-select-item-option-selected').length).toBe(0);
+  });
 });