How to remove third-party auto-fill control in UInput

[stlbucket]

is there a way to disallow third-parties to affect UInput?

Here, you can see the 1Password icon, and it gives suggestions.

        <UFormGroup name="name" label="Name">
          <UInput placeholder="name your todo" v-model="formData.name" type="text"/>
        </UFormGroup>

[madebyfabian]

Hi! This is just due to the fact that nuxt/ui is using the native html input field. You can disable certain 3rd parties by adding autocomplete="off" to the<UInput> (see https://1password.community/discussion/117501/as-a-web-developer-how-can-i-disable-1password-filling-for-a-specific-field) but it's not guaranteed, as it's within the scope of those 3rd parties to respect this prop.

[jduartea]

You can use the data-1p-ignore attribute.

<UInput placeholder="name your todo" v-model="formData.name" type="text" data-1p-ignore />

Source

[stlbucket]

OK - that works, but seems a bit inelegant.

What about other tools? Is there a big list of these ignore directives?

I assume this is an issue that is kinda out of direct Nuxt-UI control?

[benjamincanac]

This is indeed not related to Nuxt UI, it's up to the user to configure its <input> the way they want.

[some-user123]

Using autocomplete="off" causes a typescript error when using vueCompilerOptions.strictTemplates = true. Any chance to change this?

[madebyfabian]

@some-user123 Where do you set vueCompilerOptions.strictTemplates?

Could be caused by https://github.com/nuxt/ui/blob/dev/src/runtime/components/forms/Input.vue#L53 not having this explicitly defined as a prop. Wdyt @benjamincanac can I add a PR to add it as a possible prop?

[some-user123]

Where do you set vueCompilerOptions.strictTemplates?

In my tsconfig.json

[benjamincanac]

I intentionally removed all the props that don't have any impact on the component logic. What about the other 20+ attributes possible on the HTML <input> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes?

[some-user123]

vueCompilerOptions.strictTemplates is of great help to identify wrong use of components in templates, e.g., typos, unsupported props, etc. Much like typescript in the script.

From my point of view, props that are allowed on <input> should also be allowed on <UInput> (if they are passed down). If not, you are preventing proper usage of type checking and/or restricting the functionality of the component...

[madebyfabian]

@benjamincanac I am currently looking for a way. With defineProps<InputProps>(), you can just do something like

type InputProps = HTMLInputElement & {
  customStuff: string
}

But I am not sure this could be done via the defineComponent the library is using. I mean it would be great to have these html props typed, but I don't think it would be good to add them all manually, especially because there are not only parameters, but also a lot of on listeners which would then be missing.

[benjamincanac]

Indeed we cannot define props with TypeScript as we're using defineComponent. Does the behaviour you describe work when using a normal <input>?

[some-user123]

Does the behaviour you describe work when using a normal <input>?

You mean whether autocomplete property can be validated? Yes:

You can see, autocomplete is valid on <input>, foo is not.

[benjamincanac]

@some-user123 Same as https://github.com/nuxt/ui/issues/668#issuecomment-1732071695.