work for #4842 fix vue3 ref

surveyjs · Nov 29, 2023 · a19c326 · a19c326
1 parent c8dbb90
commit a19c326
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/packages/survey-vue3-ui/src/Text.vue b/packages/survey-vue3-ui/src/Text.vue
@@ -8,7 +8,7 @@
       <option v-for="item in question.dataList" :value="item"></option>
     </datalist>
   </div>
-  <survey-text-input v-else :question="question" ref="root" />
+  <survey-text-input v-else :question="question" :get-ref="(ref: any) => { root = ref; }" />
 </template>
 
 <script lang="ts" setup>

diff --git a/packages/survey-vue3-ui/src/TextInput.vue b/packages/survey-vue3-ui/src/TextInput.vue
@@ -1,6 +1,7 @@
 <template>
   <input
     v-if="!question.getMaxLength()"
+    :ref="(el)=>getRef(el as HTMLElement)"
     :disabled="question.isInputReadOnly"
     :class="question.getControlClass()"
     :type="question.inputType"
@@ -27,7 +28,7 @@
     :aria-invalid="question.a11y_input_ariaInvalid"
     :aria-describedby="question.a11y_input_ariaDescribedBy"
   />
-  <div v-else>
+  <div v-else :ref="(el)=>getRef(el as HTMLElement)">
     <input
       :disabled="question.isInputReadOnly"
       :class="question.getControlClass()"
@@ -65,9 +66,14 @@
 <script lang="ts" setup>
 import type { QuestionTextModel } from "survey-core";
 import { useBase } from "./base";
-import { computed } from "vue";
+import { computed, ref } from "vue";
 
-const props = defineProps<{ question: QuestionTextModel }>();
+const props = defineProps<{ question: QuestionTextModel; getRef?: Function; }>();
+const getRef = function (element: HTMLElement) {
+  if (props.getRef) props.getRef(element);
+}
+const root = ref(null);
+defineExpose({ root });
 
 useBase(() => props.question);