fix: update message content with a unique key and cancel manually

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 <div>test</div>;
+      }
+    }
+
+    mount(<Test />);
+    expect(document.querySelectorAll('.ant-message-notice').length).toBe(1);
+    jest.advanceTimersByTime(1500);
+    expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
+  });
 });

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(

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: (