diff --git a/components/message/__tests__/index.test.js b/components/message/__tests__/index.test.js
index d1692463b6ce..5eb5d4e074de 100644
--- a/components/message/__tests__/index.test.js
+++ b/components/message/__tests__/index.test.js
@@ -169,4 +169,24 @@ describe('message', () => {
jest.runAllTimers();
expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
});
+
+ it('update message content with a unique key and cancel manually', () => {
+ const key = 'updatable';
+ class Test extends React.Component {
+ componentDidMount() {
+ const hideLoading = message.loading({ content: 'Loading...', key, duration: 0 });
+ // Testing that content of the message should be cancel manually.
+ setTimeout(hideLoading, 1000);
+ }
+
+ render() {
+ return
test
;
+ }
+ }
+
+ mount();
+ expect(document.querySelectorAll('.ant-message-notice').length).toBe(1);
+ jest.advanceTimersByTime(1500);
+ expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
+ });
});
diff --git a/components/message/demo/update.md b/components/message/demo/update.md
index 318c9c978a18..a6b40f581c4b 100644
--- a/components/message/demo/update.md
+++ b/components/message/demo/update.md
@@ -22,7 +22,7 @@ const openMessage = () => {
message.loading({ content: 'Loading...', key });
setTimeout(() => {
message.success({ content: 'Loaded!', key, duration: 2 });
- });
+ }, 1000);
};
ReactDOM.render(
diff --git a/components/message/index.tsx b/components/message/index.tsx
index ce00359eccb7..c16aa0a9a0e6 100755
--- a/components/message/index.tsx
+++ b/components/message/index.tsx
@@ -66,7 +66,7 @@ function notice(args: ArgsProps): MessageType {
loading: 'loading',
}[args.type];
- const target = key++;
+ const target = args.key || key++;
const closePromise = new Promise(resolve => {
const callback = () => {
if (typeof args.onClose === 'function') {
@@ -80,7 +80,7 @@ function notice(args: ArgsProps): MessageType {
);
const switchIconNode = iconType ? iconNode : '';
instance.notice({
- key: args.key || target,
+ key: target,
duration,
style: {},
content: (