From 1d673ed616410bd0e1b2f21239f5e5ef5caa1023 Mon Sep 17 00:00:00 2001
From: Lars Rickert <lars.rickert@mail.schwarz>
Date: Mon, 20 Jan 2025 09:57:28 +0100
Subject: [PATCH] fix console warning for form elements about readonly target

---
 .changeset/empty-trees-scream.md                          | 7 +++++++
 .../sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue | 4 ++--
 .../components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue    | 4 ++--
 .../src/components/OnyxDatePicker/OnyxDatePicker.vue      | 4 ++--
 packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue  | 4 ++--
 .../src/components/OnyxRadioButton/OnyxRadioButton.vue    | 4 ++--
 .../src/components/OnyxRadioGroup/OnyxRadioGroup.vue      | 4 ++--
 .../sit-onyx/src/components/OnyxSelect/OnyxSelect.vue     | 8 ++++----
 .../src/components/OnyxSelectInput/OnyxSelectInput.vue    | 4 ++--
 .../sit-onyx/src/components/OnyxStepper/OnyxStepper.vue   | 4 ++--
 .../sit-onyx/src/components/OnyxSwitch/OnyxSwitch.vue     | 4 ++--
 .../sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue | 4 ++--
 12 files changed, 31 insertions(+), 24 deletions(-)
 create mode 100644 .changeset/empty-trees-scream.md

diff --git a/.changeset/empty-trees-scream.md b/.changeset/empty-trees-scream.md
new file mode 100644
index 0000000000..ee4f7141be
--- /dev/null
+++ b/.changeset/empty-trees-scream.md
@@ -0,0 +1,7 @@
+---
+"sit-onyx": patch
+---
+
+fix console warning for form elements about readonly target
+
+The following components were affected: OnyxCheckbox, OnyxCheckboxGroup, OnyxDatePicker, OnyxInput, OnyxRadioButton, OnyxRadioGroup, OnyxSelect, OnyxSelectInput, OnyxStepper, OnyxSwitch and OnyxTextarea
diff --git a/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue b/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue
index d217fc82ca..6c13c1e50b 100644
--- a/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue
+++ b/packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.vue
@@ -47,7 +47,7 @@ const title = computed(() => {
   return props.hideLabel ? props.label : undefined;
 });
 
-const input = useTemplateRef("input");
+const input = useTemplateRef("inputRef");
 defineExpose({ input });
 useAutofocus(input, props);
 </script>
@@ -68,7 +68,7 @@ useAutofocus(input, props);
         <OnyxLoadingIndicator v-if="props.loading" class="onyx-checkbox__loading" type="circle" />
         <input
           v-else
-          ref="input"
+          ref="inputRef"
           v-model="isChecked"
           v-custom-validity
           :aria-label="props.hideLabel ? props.label : undefined"
diff --git a/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue b/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue
index 8da84de636..a80873f295 100644
--- a/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue
+++ b/packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.vue
@@ -57,7 +57,7 @@ const checkAllLabel = computed(() => {
   return props.withCheckAll?.label ?? defaultText;
 });
 
-const checkboxes = useTemplateRef("checkboxes");
+const checkboxes = useTemplateRef("checkboxesRef");
 
 defineExpose({
   inputs: computed<HTMLInputElement[]>(() => {
@@ -99,7 +99,7 @@ defineExpose({
           v-for="option in props.options"
           :key="option.value.toString()"
           v-bind="option"
-          ref="checkboxes"
+          ref="checkboxesRef"
           :truncation="option.truncation ?? props.truncation"
           :model-value="props.modelValue.includes(option.value)"
           class="onyx-checkbox-group__option"
diff --git a/packages/sit-onyx/src/components/OnyxDatePicker/OnyxDatePicker.vue b/packages/sit-onyx/src/components/OnyxDatePicker/OnyxDatePicker.vue
index 87d9ca4fa7..61720e95b1 100644
--- a/packages/sit-onyx/src/components/OnyxDatePicker/OnyxDatePicker.vue
+++ b/packages/sit-onyx/src/components/OnyxDatePicker/OnyxDatePicker.vue
@@ -74,7 +74,7 @@ const value = computed({
     emit("update:modelValue", isValidDate(newDate) ? newDate.toISOString() : undefined);
   },
 });
-const input = useTemplateRef("input");
+const input = useTemplateRef("inputRef");
 useAutofocus(input, props);
 </script>
 
@@ -102,7 +102,7 @@ useAutofocus(input, props);
           <input
             :id="inputId"
             :key="props.type"
-            ref="input"
+            ref="inputRef"
             v-model="value"
             v-custom-validity
             class="onyx-datepicker__native"
diff --git a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
index aeec9220ac..de63b73071 100644
--- a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
+++ b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
@@ -68,7 +68,7 @@ const patternSource = computed(() => {
   return props.pattern;
 });
 
-const input = useTemplateRef("input");
+const input = useTemplateRef("inputRef");
 defineExpose({ input });
 
 const { disabled, showError } = useFormContext(props);
@@ -97,7 +97,7 @@ useAutofocus(input, props);
           <OnyxLoadingIndicator v-if="props.loading" class="onyx-input__loading" type="circle" />
           <input
             :id="inputId"
-            ref="input"
+            ref="inputRef"
             v-model="modelValue"
             v-custom-validity
             :placeholder="props.placeholder"
diff --git a/packages/sit-onyx/src/components/OnyxRadioButton/OnyxRadioButton.vue b/packages/sit-onyx/src/components/OnyxRadioButton/OnyxRadioButton.vue
index ee40fc1292..28927dac15 100644
--- a/packages/sit-onyx/src/components/OnyxRadioButton/OnyxRadioButton.vue
+++ b/packages/sit-onyx/src/components/OnyxRadioButton/OnyxRadioButton.vue
@@ -32,7 +32,7 @@ const { densityClass } = useDensity(props);
 const { disabled } = useFormContext(props);
 const skeleton = useSkeletonContext(props);
 
-const input = useTemplateRef("input");
+const input = useTemplateRef("inputRef");
 defineExpose({ input });
 useAutofocus(input, props);
 </script>
@@ -49,7 +49,7 @@ useAutofocus(input, props);
       <!-- TODO: accessible error: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-errormessage -->
       <input
         v-else
-        ref="input"
+        ref="inputRef"
         v-custom-validity
         class="onyx-radio-button__selector"
         type="radio"
diff --git a/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue b/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue
index 8fa4f6b34a..2a9c418656 100644
--- a/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue
+++ b/packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.vue
@@ -37,7 +37,7 @@ const handleChange = (selected: boolean, value: TValue) => {
   emit("update:modelValue", value);
 };
 
-const radiobuttons = useTemplateRef("radiobuttons");
+const radiobuttons = useTemplateRef("radiobuttonsRef");
 
 defineExpose({
   inputs: computed<HTMLInputElement[]>(() => {
@@ -70,7 +70,7 @@ defineExpose({
           v-for="(option, index) in props.options"
           :key="option.value.toString()"
           v-bind="option"
-          ref="radiobuttons"
+          ref="radiobuttonsRef"
           :name="props.name"
           :custom-error="props.customError"
           :checked="option.value === props.modelValue"
diff --git a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
index 407085ab2d..d2963fe8e6 100644
--- a/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
+++ b/packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.vue
@@ -133,8 +133,8 @@ const selectionLabels = computed(() => {
   }, []);
 });
 
-const miniSearch = useTemplateRef("miniSearch");
-const selectInput = useTemplateRef("selectInput");
+const miniSearch = useTemplateRef("miniSearchRef");
+const selectInput = useTemplateRef("selectInputRef");
 
 const filteredOptions = computed(() => {
   // if onyx does not manage the search, we don't filter the options further
@@ -334,7 +334,7 @@ defineExpose({ input: computed(() => selectInput.value?.input) });
 <template>
   <div ref="selectRef" class="onyx-component onyx-select-wrapper">
     <OnyxSelectInput
-      ref="selectInput"
+      ref="selectInputRef"
       v-bind="selectInputProps"
       :show-focus="open"
       :autofocus="props.autofocus"
@@ -356,7 +356,7 @@ defineExpose({ input: computed(() => selectInput.value?.input) });
         <!-- model-value is set here, as it is written by the onAutocomplete callback -->
         <OnyxMiniSearch
           v-if="props.withSearch"
-          ref="miniSearch"
+          ref="miniSearchRef"
           :model-value="searchTerm"
           v-bind="input"
           :label="t('select.searchInputLabel')"
diff --git a/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue b/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue
index 759faa91e3..df9b5fbd3b 100644
--- a/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue
+++ b/packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.vue
@@ -84,7 +84,7 @@ const wasTouched = ref(false);
 
 const { densityClass } = useDensity(props);
 
-const input = useTemplateRef("input");
+const input = useTemplateRef("inputRef");
 defineExpose({ input });
 
 /**
@@ -158,7 +158,7 @@ useAutofocus(input, props);
 
           <input
             :id="inputId"
-            ref="input"
+            ref="inputRef"
             v-custom-validity
             :class="{
               'onyx-select-input__native': true,
diff --git a/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue b/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue
index 23d9f4c2b3..ea4ac36477 100644
--- a/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue
+++ b/packages/sit-onyx/src/components/OnyxStepper/OnyxStepper.vue
@@ -33,7 +33,7 @@ const emit = defineEmits<{
 }>();
 
 const { t } = injectI18n();
-const input = useTemplateRef("input");
+const input = useTemplateRef("inputRef");
 
 const { disabled, showError } = useFormContext(props);
 const skeleton = useSkeletonContext(props);
@@ -127,7 +127,7 @@ useAutofocus(input, props);
         <OnyxLoadingIndicator v-if="props.loading" class="onyx-stepper__loading" type="circle" />
         <input
           v-else
-          ref="input"
+          ref="inputRef"
           v-model="inputValue"
           v-custom-validity
           class="onyx-stepper__native"
diff --git a/packages/sit-onyx/src/components/OnyxSwitch/OnyxSwitch.vue b/packages/sit-onyx/src/components/OnyxSwitch/OnyxSwitch.vue
index 3f8985aba3..a987bd29a6 100644
--- a/packages/sit-onyx/src/components/OnyxSwitch/OnyxSwitch.vue
+++ b/packages/sit-onyx/src/components/OnyxSwitch/OnyxSwitch.vue
@@ -50,7 +50,7 @@ const isChecked = computed({
   },
 });
 
-const input = useTemplateRef("input");
+const input = useTemplateRef("inputRef");
 defineExpose({ input });
 useAutofocus(input, props);
 </script>
@@ -70,7 +70,7 @@ useAutofocus(input, props);
       :title="title"
     >
       <input
-        ref="input"
+        ref="inputRef"
         v-model="isChecked"
         v-custom-validity
         type="checkbox"
diff --git a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
index 5d0837ed00..de891092f1 100644
--- a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
+++ b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
@@ -64,7 +64,7 @@ const { disabled, showError } = useFormContext(props);
 const skeleton = useSkeletonContext(props);
 const errorClass = useErrorClass(showError);
 
-const input = useTemplateRef("input");
+const input = useTemplateRef("inputRef");
 defineExpose({ input });
 useAutofocus(input, props);
 </script>
@@ -94,7 +94,7 @@ useAutofocus(input, props);
         <div class="onyx-textarea__wrapper" :data-autosize-value="modelValue">
           <textarea
             :id="id"
-            ref="input"
+            ref="inputRef"
             v-model="modelValue"
             v-custom-validity
             class="onyx-textarea__native"