fix console warning for form elements about readonly target

SchwarzIT · Jan 20, 2025 · 1d673ed · 1d673ed
1 parent f5946a0
commit 1d673ed
Show file tree

Hide file tree

Showing 12 changed files with 31 additions and 24 deletions.
diff --git a/.changeset/empty-trees-scream.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"