Toast: error on dismiss [React wrapper]

leosole-trimble commented 3 weeks ago

Prerequisites

[X] I have searched for duplicate or closed issues
[X] I have read the contributing guidelines

Describe the issue

When dismissing the toast (either by clicking the x button or letting the timer expire) I'm getting the following error: NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. I'm using the react wrapper. This doesn't seems to be happening in storybook.

This is how I'm using the toast:

{toast && (
        <ModusToast type={toast.type} showIcon onDismissClick={() => setToast(null)}>
          {toast.message}
        </ModusToast>
)}

Reduced test cases

No response

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What is the issue regarding ?

@trimble-oss/modus-web-components

What version of npm package are you using ?

0.37.0-react18

Priority

High

What product/project are you using Modus Components for ?

Trimble DVIR

What is your team/division name ?

Camaleão/Transportation

Are you willing to contribute ?

No

Are you using Modus Web Components in production ?

No response

github-actions[bot] commented 3 weeks ago

Hello @leosole-trimble! Thanks for opening an issue. The Modus core team will get back to you soon (usually within 24-hours) and provide guidance on how to proceed. Contributors are welcome to participate in the discussion and provide their input on how to best solve the issue, and even submit a PR if they want to.

Please wait until the issue is ready to be worked on before submitting a PR, or you can reach out to the core team if it is time bound. For trivial things, or bugs that don't change the expected behaviors and UI, you can go ahead and make a PR.

prashanth-offcl commented 2 weeks ago

For the current implementation to work, the consumer will have to create new toast element for every new message which is not ideal so we will introduce a new prop retainElement that will control the removal of element when the toast message is dismissed. The default value for the prop will be set to false.

trimble-oss / modus-web-components