Merge pull request #8355 from nextcloud-libraries/backport/8324/stable8

[stable8] fix(NcCheckboxRadioSwitch): use reactive state for group checkbox toggle

Author: pringelmann

src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue

@@ -708,26 +708,13 @@ export default {
 				return
 			}
 
-			// Dispatch the checked values as an array if multiple, or single value otherwise
-			const values = this.getInputsSet()
-				.filter((input) => input.checked)
-				.map((input) => input.value)
-
-			if (values.includes(this.value)) {
-				this.internalModelValue = values.filter((v) => v !== this.value)
+			// Toggle this value in/out of the array
+			if (this.isChecked) {
+				this.internalModelValue = this.internalModelValue.filter((v) => v !== this.value)
 			} else {
-				this.internalModelValue = [...values, this.value]
+				this.internalModelValue = [...this.internalModelValue, this.value]
 			}
 		},
-
-		/**
-		 * Get the input set based on this name
-		 *
-		 * @return {Node[]}
-		 */
-		getInputsSet() {
-			return [...document.getElementsByName(this.name)]
-		},
 	},
 }
 </script>

tests/unit/components/NcCheckboxRadioSwitch/checkbox.spec.js

@@ -84,4 +84,66 @@ describe('NcCheckboxRadioSwitch', () => {
 		expect(descriptionElement.exists()).toBe(true)
 		expect(descriptionElement.text()).toContain('My description')
 	})
+
+	it('emits correct value on keyboard toggle for boolean checkbox', async () => {
+		const wrapper = mount(NcCheckboxRadioSwitch, {
+			propsData: {
+				modelValue: false,
+			},
+			slots: {
+				default: 'Toggle me',
+			},
+		})
+
+		await wrapper.find('input').trigger('change')
+		expect(wrapper.emitted('update:modelValue')[0]).toEqual([true])
+	})
+
+	it('emits correct value on keyboard toggle for checkbox group', async () => {
+		const wrapper = mount(NcCheckboxRadioSwitch, {
+			propsData: {
+				modelValue: ['a'],
+				value: 'b',
+				name: 'test-group',
+			},
+			slots: {
+				default: 'Option B',
+			},
+			attachTo: document.body,
+		})
+
+		// Simulate keyboard spacebar: browser toggles input.checked BEFORE firing change
+		const input = wrapper.find('input')
+		const inputEl = input.element
+		inputEl.checked = true // Browser would do this before firing change
+		await input.trigger('change')
+
+		expect(wrapper.emitted('update:modelValue')[0]).toEqual([['a', 'b']])
+
+		wrapper.destroy()
+	})
+
+	it('emits correct value on keyboard un-toggle for checkbox group', async () => {
+		const wrapper = mount(NcCheckboxRadioSwitch, {
+			propsData: {
+				modelValue: ['a', 'b'],
+				value: 'b',
+				name: 'test-group',
+			},
+			slots: {
+				default: 'Option B',
+			},
+			attachTo: document.body,
+		})
+
+		// Simulate keyboard spacebar unchecking: browser sets checked=false before change
+		const input = wrapper.find('input')
+		const inputEl = input.element
+		inputEl.checked = false
+		await input.trigger('change')
+
+		expect(wrapper.emitted('update:modelValue')[0]).toEqual([['a']])
+
+		wrapper.destroy()
+	})
 })