diff --git a/components/mentions/__tests__/index.test.tsx b/components/mentions/__tests__/index.test.tsx
index 320336eafd09..01b874f02ce3 100644
--- a/components/mentions/__tests__/index.test.tsx
+++ b/components/mentions/__tests__/index.test.tsx
@@ -84,4 +84,24 @@ describe('Mentions', () => {
expect(wrapper.container.querySelectorAll('li.ant-mentions-dropdown-menu-item').length).toBe(1);
expect(wrapper.container.querySelectorAll('.bamboo-light').length).toBeTruthy();
});
+
+ it('do not lose label when use children Option', () => {
+ const wrapper = render(
+
+ Afc163
+ ZombieJ
+ Yesmeck
+ ,
+ );
+ simulateInput(wrapper, '@');
+ const { container } = wrapper;
+ fireEvent.mouseEnter(container.querySelector('li.ant-mentions-dropdown-menu-item:last-child')!);
+ fireEvent.focus(container.querySelector('textarea')!);
+ act(() => {
+ jest.runAllTimers();
+ });
+ expect(
+ wrapper.container.querySelector('.ant-mentions-dropdown-menu-item-active')?.textContent,
+ ).toBe('Yesmeck');
+ });
});
diff --git a/components/mentions/demo/async.tsx b/components/mentions/demo/async.tsx
index 1f9e66e6a39c..d62b26852ba0 100644
--- a/components/mentions/demo/async.tsx
+++ b/components/mentions/demo/async.tsx
@@ -2,7 +2,6 @@ import React, { useCallback, useRef, useState } from 'react';
import { Mentions } from 'antd';
import debounce from 'lodash/debounce';
-const { Option } = Mentions;
const App: React.FC = () => {
const [loading, setLoading] = useState(false);
const [users, setUsers] = useState<{ login: string; avatar_url: string }[]>([]);
@@ -36,14 +35,22 @@ const App: React.FC = () => {
};
return (
-
- {users.map(({ login, avatar_url: avatar }) => (
-
- ))}
-
+ ({
+ key: login,
+ value: login,
+ className: 'antd-demo-dynamic-option',
+ label: (
+ <>
+
+ {login}
+ >
+ ),
+ }))}
+ />
);
};
diff --git a/components/mentions/demo/autoSize.tsx b/components/mentions/demo/autoSize.tsx
index 9454cd4864e7..3f6bc7847624 100644
--- a/components/mentions/demo/autoSize.tsx
+++ b/components/mentions/demo/autoSize.tsx
@@ -1,14 +1,25 @@
import React from 'react';
import { Mentions } from 'antd';
-const { Option } = Mentions;
-
const App: React.FC = () => (
-
-
-
-
-
+
);
export default App;
diff --git a/components/mentions/demo/basic.tsx b/components/mentions/demo/basic.tsx
index e307d99ae95c..10f6f9150594 100644
--- a/components/mentions/demo/basic.tsx
+++ b/components/mentions/demo/basic.tsx
@@ -1,14 +1,12 @@
import React from 'react';
import { Mentions } from 'antd';
-import type { OptionProps } from 'antd/es/mentions';
-
-const { Option } = Mentions;
+import type { MentionsOptionProps } from 'antd/es/mentions';
const onChange = (value: string) => {
console.log('Change:', value);
};
-const onSelect = (option: OptionProps) => {
+const onSelect = (option: MentionsOptionProps) => {
console.log('select', option);
};
@@ -18,11 +16,21 @@ const App: React.FC = () => (
onChange={onChange}
onSelect={onSelect}
defaultValue="@afc163"
- >
-
-
-
-
+ options={[
+ {
+ value: 'afc163',
+ label: 'afc163',
+ },
+ {
+ value: 'zombieJ',
+ label: 'zombieJ',
+ },
+ {
+ value: 'yesmeck',
+ label: 'yesmeck',
+ },
+ ]}
+ />
);
export default App;
diff --git a/components/mentions/demo/form.tsx b/components/mentions/demo/form.tsx
index 98d5703d35ad..53879bbd0fea 100644
--- a/components/mentions/demo/form.tsx
+++ b/components/mentions/demo/form.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import { Button, Form, Mentions } from 'antd';
-const { Option, getMentions } = Mentions;
+const { getMentions } = Mentions;
const App: React.FC = () => {
const [form] = Form.useForm();
@@ -36,11 +36,23 @@ const App: React.FC = () => {
wrapperCol={{ span: 16 }}
rules={[{ validator: checkMention }]}
>
-
-
-
-
-
+
{
wrapperCol={{ span: 16 }}
rules={[{ required: true }]}
>
-
-
-
-
-
+