From 74dc419278e9097a073de1e6c6c3b5f0054ab70f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Thu, 4 Jul 2024 08:55:36 +0200
Subject: [PATCH] fix(NcCheckboxRadioSwitch): keep data attributes bound to the
 wrapper
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 .../NcCheckboxRadioSwitch.vue                    | 16 ++++++++++++++--
 .../NcCheckboxRadioSwitch/checkbox.spec.js       |  8 +++++++-
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue b/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
index d6077abf..d4e534d5 100644
--- a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
+++ b/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
 		},
diff --git a/tests/unit/components/NcCheckboxRadioSwitch/checkbox.spec.js b/tests/unit/components/NcCheckboxRadioSwitch/checkbox.spec.js
index f58d4e79..c5eef03e 100644
--- a/tests/unit/components/NcCheckboxRadioSwitch/checkbox.spec.js
+++ b/tests/unit/components/NcCheckboxRadioSwitch/checkbox.spec.js
@@ -17,7 +17,7 @@ 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',
@@ -25,11 +25,17 @@ describe('NcCheckboxRadioSwitch', () => {
 			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')
 	})
 })