diff --git a/examples/search.tsx b/examples/search.tsx
index 8cfe19c0..5e44ee96 100644
--- a/examples/search.tsx
+++ b/examples/search.tsx
@@ -13,13 +13,13 @@ const addressOptions = [
value: 'fuzhou',
children: [
{
- label: '马尾',
+ label: '马尾-mw',
value: 'mawei',
},
],
},
{
- label: '泉州',
+ label: '泉州-qz',
value: 'quanzhou',
},
],
@@ -68,7 +68,9 @@ const addressOptions = [
class Demo extends React.Component {
render() {
- return ;
+ return (
+
+ );
}
}
diff --git a/src/OptionList/CacheContent.tsx b/src/OptionList/CacheContent.tsx
new file mode 100644
index 00000000..4f2ec10c
--- /dev/null
+++ b/src/OptionList/CacheContent.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+export interface CacheContentProps {
+ children?: React.ReactNode;
+ open?: boolean;
+}
+
+const CacheContent = React.memo(
+ ({ children }: CacheContentProps) => children as React.ReactElement,
+ (_, next) => !next.open,
+);
+
+if (process.env.NODE_ENV !== 'production') {
+ CacheContent.displayName = 'CacheContent';
+}
+
+export default CacheContent;
diff --git a/src/OptionList/index.tsx b/src/OptionList/index.tsx
index 769834cc..affcc05d 100644
--- a/src/OptionList/index.tsx
+++ b/src/OptionList/index.tsx
@@ -14,12 +14,13 @@ import {
toPathValueStr,
} from '../utils/commonUtil';
import { toPathOptions } from '../utils/treeUtil';
+import CacheContent from './CacheContent';
import Column, { FIX_LABEL } from './Column';
import useActive from './useActive';
import useKeyboard from './useKeyboard';
const RefOptionList = React.forwardRef((props, ref) => {
- const { prefixCls, multiple, searchValue, toggleOpen, notFoundContent, direction } =
+ const { prefixCls, multiple, searchValue, toggleOpen, notFoundContent, direction, open } =
useBaseProps();
const containerRef = React.useRef();
@@ -213,15 +214,17 @@ const RefOptionList = React.forwardRef((props, ref) => {
// >>>>> Render
return (
-
- {columnNodes}
-
+
+
+ {columnNodes}
+
+
);
});
diff --git a/tests/search.spec.tsx b/tests/search.spec.tsx
index a5b1dada..fee7d09e 100644
--- a/tests/search.spec.tsx
+++ b/tests/search.spec.tsx
@@ -1,11 +1,12 @@
/* eslint-disable @typescript-eslint/consistent-type-imports */
-import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
import KeyCode from 'rc-util/lib/KeyCode';
import { resetWarned } from 'rc-util/lib/warning';
-import { mount, ReactWrapper } from './enzyme';
+import React from 'react';
import Cascader from '../src';
import { optionsForActiveMenuItems } from './demoOptions';
+import { mount, ReactWrapper } from './enzyme';
describe('Cascader.Search', () => {
function doSearch(wrapper: ReactWrapper, search: string) {
@@ -244,4 +245,23 @@ describe('Cascader.Search', () => {
wrapper.find('input').simulate('change', { target: { value: 'z' } });
expect(wrapper.render()).toMatchSnapshot();
});
+
+ // https://github.com/ant-design/ant-design/issues/41810
+ it('not back to options when selected', () => {
+ const { container } = render();
+
+ // Search
+ fireEvent.change(container.querySelector('input'), {
+ target: {
+ value: 'bamboo',
+ },
+ });
+
+ // Click
+ fireEvent.click(document.querySelector('.rc-cascader-menu-item-content'));
+ expect(document.querySelector('.rc-cascader-dropdown-hidden')).toBeTruthy();
+ expect(document.querySelector('.rc-cascader-menu-item-content').textContent).toBe(
+ 'Label Bamboo / Label Little / Toy Fish',
+ );
+ });
});