Choices-js / Choices

A vanilla JS customisable select box/text input plugin ⚡️
https://choices-js.github.io/Choices/
MIT License
6.24k stars 615 forks source link

Dropdown not working when inside lightbox/modal (Venobox/Glightbox) #1019

Open WRasada opened 2 years ago

WRasada commented 2 years ago

Describe the bug When using either Venobox or Glightbox (Also Oxygen Builder w/ WordPress) for a lightbox/popup modal, dropdown fields inside the modal/popup using ChoicesJS do not function.

To Reproduce Steps to reproduce the behavior:

  1. Install either Venobox or Glightbox
  2. Create a form with a dropdown field
  3. Create a popup with the form inside and test the dropdown to see the issue

Expected behavior ChoicesJS dropdown should work inside the popup/modal

Additional context This is also replicable using WordPress and WPForms with a "Modern" style dropdown that utilizes ChoicesJS. It is not present in other popup plugins and only appears to be an issue with some of these libraries and also the Oxygen Builder for WordPress

Screencast https://a.supportally.com/VEi06b

mmanifacier commented 2 years ago

The only way i found to get my choices field to work inside my modal is to put the js code inside the modal in . Gross but works perfectly :x

davesalomon commented 2 years ago

Hey,

I've created an MCVE at https://github.com/davesalomon/choices-js-modal-problem.

This looks like it's a problem with the way the modal is created; using Venobox, the content is copied into the modal, rather than using the existing (and correctly instantiated) elements. I've tried running the Choices() code in a setInterval to see if simply instantiating on the newly-created elements fixes it, but it thinks it's already done.

Haven't got much time to look in to this atm, but, hopefully this helps someone think of a fix. Using a different modal plugin may fix this, but that'll be down to whichever framework you're using (be that your wordpress theme, etc.)... would be great if it can be fixed within this lib, but I'm not 100% sure it can be.