Component is not compatible with dialog element

[marcinburzynski]

Issue: hCaptcha popup is hidden behind the dialog element

This is a real issue because the dialog element is already widely supported and we're going to see more and more modal implementations based on this element. https://caniuse.com/?search=dialog

Expected behavior: Either: a) add a flag so that we can choose to render a captcha popup in a dialog b) add a portalTarget prop so that we can pass element reference where popup should be rendered

[zoryana94]

Hi @marcinburzynski ,

Thank you a lot for notifying us about the issue! Unfortunately, I haven't been able to reproduce it. Do you have any custom styles (related to z-index, maybe)? What OS and browser have you used for testing? It would be great if you could send us the piece of code with your implementation details or some test app, so that we could reproduce the issue.

Could you please also try to specify the challenge-container with the id the following way?

  <dialog open>
      <div id="hcaptcha-challenge-container"></div>
      <HCaptcha
        challenge-container="hcaptcha-challenge-container"
      />
  </dialog>

Best Regards, hCaptcha Dev Team