search

hCaptcha / react-hcaptcha

hCaptcha Component Library for ReactJS and Preact
MIT License
371 stars 43 forks source link

Component is not compatible with dialog element #201

Open marcinburzynski opened 1 year ago

marcinburzynski commented 1 year ago

Issue: hCaptcha popup is hidden behind the dialog element

image

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 commented 1 year ago

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