oruga icon indicating copy to clipboard operation
oruga copied to clipboard

o-input issues with ref/focus

Open reskes opened this issue 3 years ago • 0 comments

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.

reskes avatar Apr 12 '22 15:04 reskes