sl-change event fired unexpectedly

[fransdeboer]

Provide a general summary of the issue here

if a sl-checkbox-group and sl-radio-group are used in the same component. A change in sl-radio-group triggers the sl-change of the sl-checkbox-group

🤔 Expected Behavior?

change event of sl-checkbox-group and sl-radio-group should not interact with each other.

😯 Current Behavior

see general summary

💁 Possible Solution

No response

🖥️ Steps to Reproduce

clone the repository at https://github.com/fransdeboer/sl-change-poc

install dependencies npm ci

run the example npm run dev

start a browser and open http://localhost:5173/

check both or one of the check boxes

change the radio button to Yes

the sl-change event of the sl-checkbox-group is fired and the selection of the check boxes is erased.

What browsers are you seeing the problem on? (only for bugs in code)

Chrome

If other, please specify.

No response

What operating system are you using?

WSL

🧢 Your product/team

Magister

🎨 Your Theme(s)

Magister

[Diaan]

The problem that occurred was not (directly) because the checkbox group and radio group events got mixed up. The setting of the variable that toggles the visibility of the extra options causes a redraw/update and that causes the form controls to rerender, with the value that is currently set. Because the value of the checkbox group was not updated on change (.value=${this.visibilityOptions} is no two-way binding) it was being "reset" once the change in the radiogroup caused a redraw.

Solution: https://github.com/fransdeboer/sl-change-poc/pull/1

What we can do is look into whether we need (and if not, can prevent) an emit of the change event on redraw/ initial render.

[jpzwarte]

I'm going to close this issue with the following explanation:

What you are seeing is not actually SLDS behavior but instead is Lit behavior:

• After checking a checkbox, the value of the checkbox group changes
• When you select an option in the radio group, change detection is triggert (you're changing a state variable)
• Lit then compares values of the checkbox group and sees they don't match
• So Lit "updates" the value property of the checkbox group

The solution here is to either

• keep the form control values in sync
• use a FormController do keep the form control values in sync for you