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', + ); + }); });