when we have two forms in the same page, the toggle checkbox doesn't work in the second form

[maysam]

Description:

when we have two forms in the same page, the toggle checkbox doesn't work in the second form

Environment Details:

• formBuilder Version: latest
• Browser: chrome/safari
• OS: macosx

Expected Behavior

checkbox to tggle

Actual Behavior

the checkbox in the second form doesn't toggle

Steps to Reproduce

put two forms in the same html page, both having toggle checkbox groups

Screenshot - (optional)

Referencing #24

[lucasnetau]

Can you please provide a reproduction and some screenshots? I cannot replicate.

Is this with formBuilder or formRender?

[maysam]

Hi @lucasnetau

It's actually renderer issue, I wasn't clear

https://codepen.io/maysam-the-scripter/pen/poBybPK

here is a demo, when you try to toggle the checkbox in the second form, it toggles the ones in the first form
it works fine when checkbox is not in toggle mode though

[lucasnetau]

You have the same ID for the control in both forms. So the selector is picking up the first control of that ID. Please adjust your form control ids so that you have valid HTML.

[maysam]

well this need to be localized, also this is only happening for the toggle, and other fields don't have this problem

in my application, I am rendering same form 4 times and this problem only happens when I turn on the toggle for checkboxes

[lucasnetau]

We can investigate if the selector can be reduced to target the expected control.

However it still holds that duplicate IDs in a single HTML page is invalid and you cannot expect anything to work. Giving a unique name in the formData JSON prior to render is a quick method (Array.map and append form-- to the name of each control field)

[lucasnetau]

This is the browser applying the checked flag when the label is clicked on. The label for the checkbox group includes the 'for' attribute and the duplicate ids mean the event is forwarded to the first element of that id. The for attribute can be removed for toggles however there are other javascript errors seen in formBuilder when you have two checkbox fields with the same name.

@kevinchappell Removing the for attribute for toggles is simple enough, generates valid HTML and the toggles will work. However I don't believe we should be fixing any other duplicate ID issues since it is invalid markup.

[lucasnetau]

@kevinchappell this is the quick patch I tested, since the label wraps the form element in the kc-toggle the for attribute isn't required anymore

diff --git a/src/js/control/select.js b/src/js/control/select.js
index 9de4191..163fa98 100644
--- a/src/js/control/select.js
+++ b/src/js/control/select.js
@@ -93,6 +93,7 @@ export default class controlSelect extends control {
           const labelAttrs = { for: optionAttrs.id }
           let output = [input, this.markup('label', labelContents, labelAttrs)]
           if (toggle) {
+            delete labelAttrs.for
             labelAttrs.className = 'kc-toggle'
             labelContents.unshift(input, this.markup('span'))
             output = this.markup('label', labelContents, labelAttrs)