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! 🙌

[github-actions[bot]]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.

[Rafatcb]

It's still an issue, but I wasn't able to update the package version in the CodeSandbox example due to the error:

ModuleNotFoundError Could not find module in path: '@primer/react/lib/node_modules/@oddbird/popover-polyfill/dist/popover-fn.js' relative to '/node_modules/@primer/react/lib/TooltipV2/Tooltip.js'