On `useConfirm`, apparent z-index changes as `hostElement` is reused

[Rafatcb]

Description

When using useConfirm, a hostElement is created to display the Dialog. As this hostElement is not removed from the DOM, when browsing, its position in the DOM changes from "last" to a higher position. This causes z-index: 1 to behave differently depending on the occasion on which confirm() is invoked.

The issue reproduced in the CodeSandbox mentioned bellow

Steps to reproduce

Reproducible example: CodeSandbox.

1. Click on the "Run confirm" button.
2. Close the dialog.
3. Click on the "Navigate to page 2" button.
4. Click on the "Run confirm" button.

The yellow div will be above the Dialog.

Version

v35.10.0

Browser

Chrome, Firefox

[broccolinisoup]

Hi @Rafatcb 👋 Thanks you for creating this issue. We can confirm that there is a bug here and it is in our backlog now.

You are welcome to raise a pull request to fix the bug. Thank you! 🙌