fix(NcCheckboxRadioSwitch): keep data attributes bound to the wrapper

Signed-off-by: John Molakvoæ (skjnldsv) <[email protected]>

Author: skjnldsv

src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue

@@ -258,7 +258,7 @@ export default {
 		class="checkbox-radio-switch"
 		:style="cssVars"
 		:type="isButtonType ? 'button' : null"
-		v-bind="isButtonType ? $attrs : {}"
+		v-bind="isButtonType ? $attrs : dataAttrs"
 		v-on="isButtonType ? listeners : null">
 		<input v-if="!isButtonType"
 			:id="id"
@@ -272,7 +272,7 @@ export default {
 			:indeterminate.prop="hasIndeterminate ? indeterminate : null"
 			:required="required"
 			:name="name"
-			v-bind="$attrs"
+			v-bind="nonDataAttrs"
 			v-on="listeners">
 		<NcCheckboxContent :id="id"
 			class="checkbox-radio-switch__content"
@@ -450,6 +450,18 @@ export default {
 	emits: ['update:checked'],
 
 	computed: {
+		dataAttrs() {
+			// filter all data attributes
+			return Object.fromEntries(Object.entries(this.$attrs)
+				.filter(([key]) => key.startsWith('data-')))
+		},
+
+		nonDataAttrs() {
+			// filter all non-data attributes
+			return Object.fromEntries(Object.entries(this.$attrs)
+				.filter(([key]) => !key.startsWith('data-')))
+		},
+
 		isButtonType() {
 			return this.type === TYPE_BUTTON
 		},

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

@@ -17,19 +17,25 @@ describe('NcCheckboxRadioSwitch', () => {
 		expect(wrapper.text()).toContain('Test')
 	})
 
-	it('forwards aria-invalid and aria-errormessage to input', () => {
+	it('forwards all but data- attributes to the input', () => {
 		const wrapper = shallowMount(NcCheckboxRadioSwitch, {
 			slots: {
 				default: 'Test',
 			},
 			attrs: {
 				'aria-invalid': 'true',
 				'aria-errormessage': 'id-test',
+				'data-test': 'checkbox-test-data-attr',
+				title: 'Test title',
 			},
 		})
 
 		const input = wrapper.find('input')
 		expect(input.attributes('aria-invalid')).toBe('true')
 		expect(input.attributes('aria-errormessage')).toBe('id-test')
+		expect(input.attributes('title')).toBe('Test title')
+		expect(input.attributes('data-test')).not.toBe('checkbox-test-data-attr')
+		expect(wrapper.attributes('data-test')).toBe('checkbox-test-data-attr')
+		expect(wrapper.attributes('title')).not.toBe('Test title')
 	})
 })