oruga
oruga copied to clipboard
o-input issues with ref/focus
Overview of the problem
@oruga-ui/oruga-next: 0.5.5 @oruga-ui/theme-bulma: 0.2.5 vue: 3.2.31
@vueuse/core: 8.2.5
Description
I'm trying to use the vueuse library's useFocus in combination with Oruga's input element. Not sure if we should call this a bug or a feature request.
This is my code, simplified:
.....
<o-input v-model="model" type="text" ref="focusInput"/>
</template>
<script lang="ts" setup>
.....
const focusInput = ref();
const { focused } = useFocus(focusInput, { initialValue: true });
.....
But instead of focusing the native input as expected, nothing happens and the focused-value doesn't change.
After checking the affected source-code of oruga and vueuse, I created this quite dirty workaround. It of course only works for the native type text and only as long there is no change to the Oruga input source-code internally.
const focusInput = ref();
// "workaround"
const focusInputComp = computed(() => focusInput.value?.$refs.input);
const { focused } = useFocus(focusInputComp, { initialValue: true });
Expected behavior
Rather pass ref to the native input's ref or maybe at least provide a focus-function/method on the component, to redirect it to the native element's one.