Messages keep dangling despite duration set to 2

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

The ant design ‘message’ component with an assigned key does not disappear despite having set a duration of 2 seconds. It’s generally not a problem when the messages are activated by clicking (and generally also not when there is no key assigned to them). But since my messages are being generated by a websocket with a message ticketing system and delivered async to the client, they seem to not disappear. Hence, it is very hard to reproduce in the code sandbox. You can see here: https://imgur.com/a/Cg2uxdD that these are being generated by the websocket, and they are just left dangling on the site. This is causing a very frustrating user experience.

The specific component that is causing it is:

export const displayMessageWithIconAndProgress = (type, key, message) => {
  const { current_iteration, max_iterations, start_iteration } = message;
  const progress = Math.round(((current_iteration - start_iteration) / (max_iterations - start_iteration)) * 100);
  return (
    progress === 100
      ? antMessage.success({ content: `${message.description} (${progress}%)`, key, duration: 2 })
      : antMessage.loading({ content: `${message.description} (${progress}%)`, key, duration: 2 })
  );
};

There is also a specific key assigned to the messages so that the previous keys are overwritten.

What is expected?

I am expecting the message popup to disappear after 2 seconds.

What is actually happening?

The message keeps dangling, it doesn’t disappear after 2 seconds and I cannot close it as there is no closable tag.

Environment	Info
antd	4.3.5
React	16.13.1
System	Mac OSX
Browser	Google CHrome

[Floriferous]

I can confirm this is happening to us as well on 4.15.3, reverting to 4.8.3 fixes the issue.

[ulsha]

What’s the reproduce step?

@zombieJ please see comment