Nuxt•8mo ago

How to typescript UInput?

I'm struggling to type the ref-element for a UInput, has anybody done that yet?

const el = ref<???>()
onMounted(() => el.value?.input.focus())
[...]
<UInput ref="el" />

const el = ref<???>()
onMounted(() => el.value?.input.focus())
[...]
<UInput ref="el" />

Currently I'm using any, but I installed eslint at it's not happy with that... 😅

14 Replies

Sam K•8mo ago

const el = ref<HTMLInputElement | null>(null)

const el = ref<HTMLInputElement | null>(null)

JonathanDoerflerOP•8mo ago

When running nuxt typecheck I get the error

error TS2551: Property 'input' does not exist on type 'HTMLInputElement'. Did you mean 'oninput'?

120   el.value.input.focus()
                              ~~~~~

  node_modules/typescript/lib/lib.dom.d.ts:9147:5
    9147     oninput: ((this: GlobalEventHandlers, ev: Event) => any) | null;
             ~~~~~~~
    'oninput' is declared here.

error TS2551: Property 'input' does not exist on type 'HTMLInputElement'. Did you mean 'oninput'?

120   el.value.input.focus()
                              ~~~~~

  node_modules/typescript/lib/lib.dom.d.ts:9147:5
    9147     oninput: ((this: GlobalEventHandlers, ev: Event) => any) | null;
             ~~~~~~~
    'oninput' is declared here.

Sam K•8mo ago

the html inside UInput the wrapper element is it an input? if It's an div or so you can use HTMLElement if the root html element inside <UiInput /> is an input you don't need the el.value.input.focus would be just el.value.focus();

JonathanDoerflerOP•7mo ago

Sorry I forgot to mention I'm using NuxtUI, so the root element inside <UInput /> is a div.. I was following https://github.com/nuxt/ui/issues/1019 but the import type ... part did not work...?

GitHub

Expose input element focus in Input.vue · Issue #1019 · nuxt/ui

Description Currently, it seems to me there's no official way to programmatically focus the input element inside Input.vue. This limitation requires a more complex workaround involving direct D...

Sam K•7mo ago

if you want to focus Nuxt UI Input it has autofocus and autofocus delay props https://ui.nuxt.com/components/input#props if you still want to do more complex stuff refrencing the input by it's ref, taking a look at the UInput source code you can see that there's a ref="input" prop on the input itself. So you can try with the code below but am not sure if it's gonna work

const input = ref<HTMLInputElement | null>(null)

const input = ref<HTMLInputElement | null>(null)

Nuxt UI

Input - Nuxt UI

Display an input field.

JonathanDoerflerOP•7mo ago

Thanks @Sam K! I'm trying to switch between several Input-Fields. Roughly like this::

const refInOne = ref<?? | null>(null>
const refInTwo = ref<?? | null>(null>
[...]
<UInput ref="refInOne" @keyup.enter="refInTwo.input.focus()" />
<UInput ref="refInTwo" @keyup.enter="refInOne.input.focus()" />

const refInOne = ref<?? | null>(null>
const refInTwo = ref<?? | null>(null>
[...]
<UInput ref="refInOne" @keyup.enter="refInTwo.input.focus()" />
<UInput ref="refInTwo" @keyup.enter="refInOne.input.focus()" />

When working with any as ?? and refInTwo.input.focus() instead of refInTwo.focus(), it works as planned - but then there is eslint/typecheck 😅

Sam K•7mo ago

welcome 🙂 could you try instead of ?? to use HTMLElement I am on the phone now, later I'll check in a project that I have Nuxt UI in

Sam K•7mo ago

or HTMLDivElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement

MDN Web Docs

HTMLDivElement - Web APIs | MDN

The HTMLDivElement interface provides special properties (beyond the regular HTMLElement interface it also has available to it by inheritance) for manipulating elements.

JonathanDoerflerOP•7mo ago

Yeah, same error as with HTMLInputElement: Property 'input' does not exist on type 'HTMLDivElement'. Did you mean 'oninput'?ts(2551) 😦 I couldn't find anything useful that's exported in https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/Input.vue myself...

GitHub

ui/src/runtime/components/forms/Input.vue at dev · nuxt/ui

A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS. - nuxt/ui

dwol•7mo ago

the same way you type regular vue component refs https://vuejs.org/guide/typescript/composition-api.html#typing-component-template-refs

Vue.js

Vue.js - The Progressive JavaScript Framework

dwol•7mo ago

import { UInput } from '#components' const inputRef = ref<InstanceType<typeof UInput> | null>(null)

JonathanDoerflerOP•7mo ago

Thanks @dwol! Is it right, that VSCode now just interprets it as "any"? (but at least typecheck and linter aren't complaining anymore 😉 Anyhow, I'm using inputRef.value?.input!.focus() now 🤓

dwol•7mo ago

To be honest I didnt realize it returns as any. My guess is the types aren't being returned properly because if you use that method to type a component you made yourself its correctly typed. Maybe there is a different import im unaware of with the correct typing

JonathanDoerflerOP•7mo ago

I tried to read the code of NuxtUI but could only find types of InputSize, InputColor and InputVariant - so yeah, I think there is no full export of the UInput-type... (As I mentioned, the code from github issue #1019 didn't work for me, either I'm dumb or the code changed since 11/2023...)

Gaming

Programming

How to typescript UInput?