acf-repeater-tabs icon indicating copy to clipboard operation
acf-repeater-tabs copied to clipboard

Select or Multi-select of copied tab doesn't work

Open jas8522 opened this issue 7 years ago • 4 comments

Steps to reproduce:

  1. Create a repeater field with a select or multiselect box within (Mine is a taxonomy but I can't imagine that matters)
  2. Add your first tab with data selected
  3. Hover over the tab and click Copy (note that there's also some odd visual glitches where the background of the copy tab flickers then disappears when you move your cursor over the "Copy" text)
  4. The copied data appears, however when I then try to interact with the select or multiselect box on the new clone, I can't remove values (it does nothing when I click the small x) nor can I add new ones, as the typical select2 style dropdown never appears.

I'm guessing perhaps the select2 javascript needs to be re-attached to the newly inserted/copied HTML.

My workaround was to change it to checkbox instead, although that isn't quite as user friendly with larger data sets.

jas8522 avatar Feb 09 '18 19:02 jas8522

I believe you're right, in that Select2 will have to be reinitialized every time a row is duplicated, if that row has a select item within.

JamesParkNINJA avatar Feb 27 '18 14:02 JamesParkNINJA

Hey @JamesParkNINJA I was trying to make that work by selecting the new tab's input/select fields and applying select2() to them, but it didn't do anything different. So then I thought I'd try deregistering the existing select2 with the idea that perhaps the existing HTML that select2() auto applies was causing problems, but it said it wasn't already a select2 element.

I wonder if the only way to fix this is to strip all the select2() html manually from the cloned element, reverting it to a standard input field, then apply .select2() anew. I was kind of hoping that the select2 library had an option for this, but I didn't spot it anywhere :(

jas8522 avatar Feb 27 '18 15:02 jas8522

Yeah, that sounds about right, @jas8522 though I think this might be the order of events:

  1. Click Clone
  2. Deinit Original Select2 Input (or maybe all Select2 on page, if possible)
  3. Perform clone of row
  4. Reinit Select2 (either on original and cloned elements, or an all Select2 elements)

JamesParkNINJA avatar Feb 27 '18 15:02 JamesParkNINJA

@JamesParkNINJA Good thinking. I'll give it a try in the next couple of days :)

jas8522 avatar Feb 27 '18 16:02 jas8522