Internal issue 2777 - Opening an IcToast in a useEffect requires a delay

[ticket-sync[bot]]

{noformat}name: 'Opening an IcToast in a useEffect requires a delay' about: 'IcToast compoment' title: '' labels: 'type: bug 🐛' assignees: '' type: 'Bug'

---

Summary of the bug

Opening an IcToast in a useEffect (as opposed to an onClick event) requires a delay

🪜 How to reproduce

See below

📸 Screenshots or code

{noformat}

{noformat}{noformat}

{noformat}

🖥 📱 Device

• Type: [e.g. Desktop, mobile]
• Device: [e.g. iPhone, MacBook, ThinkPad]
• OS version: [e.g. macOS13, iOS16, Android 13]
• Browser version: [e.g. Chrome 115, Safari 16]

🧐 Expected behaviour

Tell us, in enough detail, what you expected to happen instead.

📝 Acceptance Criteria

If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.

Given When
Then

Additional info

Tell us anything else useful to help us fix or understand the problem.{noformat}

[jd239]

After a brief look, it looks like the component has not been hydrated as soon as the useEffect mount has been triggered. The shadowDOM appears empty which explains why nothing is shown.

Adding...

    window.addEventListener('appload', () => {
      toastRegionEl.current.openToast = toastEl.current;
    })

...within useEffect worked as well as adding a delay.

appload

[MI6-255]

Could be guidance

[GCHQ-Developer-741]

Closed by https://github.com/mi6/ic-ui-kit/pull/2458