Add more precise typing for autocomplete HTML attribute #1467

yanndinendal · 2023-01-09T19:22:31Z

This will allow to autocomplete… the autoComplete attribute in vscode for example.

The list is quite long and it's not easy remembering the spelling of each one of them (first_name or given-name? password or current-password?), and it would improve the UX of sites if they were more appropriately used (for example, some people may think that the input's type and/or name attributes may be enough for fields like email or password, but knowing to use autoComplete="new-password" or one-time-code can be really useful).

I tried declaring a type AutoComplete to avoid repetition but didn't find how to do that:
microsoft/TypeScript#52169.

See updated proposal at #1467 (comment)

Fixes microsoft/TypeScript#52168.
See also #71.

github-actions · 2023-01-09T19:22:53Z

Thanks for the PR!

This section of the codebase is owned by @saschanaz - if they write a comment saying "LGTM" then it will be merged.

yanndinendal · 2023-01-09T19:25:55Z

@microsoft-github-policy-service agree

yanndinendal · 2023-01-09T19:34:07Z

@microsoft-github-policy-service agree

saschanaz · 2023-01-10T06:20:42Z

First, please define an enum (which then generates a union type) and use that.

Second, are we sure every item here is well supported? Poorly supported items shouldn't be added.

HolgerJeromin · 2023-01-10T07:31:48Z

Typescript team should be confident that they want (string & {}) in this repo which uses a side effect of current typescript intellisense code.
If yes, this should perhaps be done for all attributes instead of one (the data should be available afaik).

orta · 2023-01-10T12:46:15Z

/cc @sandersn @weswigham

yanndinendal · 2023-01-10T12:51:25Z

@saschanaz: thanks, fixed (I didn't know how to do it with these json files, at first).

I've re-read the spec and declared an AutoFill enum that matches the spec, and I've tested most of them and confirmed they seem indeed supported in at least Chrome or Firefox.
I couldn't find definite info on Can I Use or MDN except for some of them like new-passport which is largely supported:
https://caniuse.com/mdn-html_global_attributes_autocomplete_new-password

I've also fixed the possible values for autocomplete on a form element, which can't act as an autofill element, and confirmed it's supported on textareas and selects:

I added webauthn, which is in the spec (linked in the comments) and can be used in combination with username or current-password values (already available in stable releases of Chrome):
https://web.dev/passkey-form-autofill/

Unfortunately, I don't know how to add typescript auto-completion for a list of strings (space-separated tokens, like "username webauthn" or "shipping street-address"), but it should already cover most use-cases (and more advanced ones are handled with (string & {})).
@HolgerJeromin: So it's necessary to keep it instead of a strict list to follow the spec (it also prevents this to be a breaking change).

Also note that this syntax/workaround is already used and tested in the TypeScript repo,
such as with tests/baselines/reference/specialIntersectionsInMappedTypes.types's
type Alignment = (string & {}) | "left" | "center" | "right";
or tests/lib/react18/react18.d.ts's AriaRole.

saschanaz · 2023-01-10T13:29:51Z

What does (string & {}) do, why not just string?

It's also currently broken, please use AutoFill | string instead for overrideType.

yanndinendal · 2023-01-10T13:42:00Z

@saschanaz:

With `| (string & {})`:

With `| string`:

no editor auto-completion at all.

See microsoft/TypeScript#33471, and microsoft/TypeScript#29729 for an explanation of the issue.

I think I originally stumbled on this method in React's typedefs.

yanndinendal · 2023-01-10T14:03:04Z

It's also currently broken, please use AutoFill | string instead for overrideType.

@saschanaz: Sorry I don't understand that last part, the tests pass and it seems to work.
By broken, do you mean that it should generate something else? Or that some cases (not handled by the tests) will not work?

I can't use | string or we will lose autocompletion (it would have type string only).

saschanaz · 2023-01-10T14:04:04Z

Look at the output: type AutoFill = "(string & {})". You don't want this 😛

yanndinendal · 2023-01-10T14:07:19Z

(wrong obsolete comment)

Do you see the right commit? I see the full union:

yanndinendal · 2023-01-10T14:51:36Z

Sorry I got it, the rest of the union is ok but "(string & {})" should not be quoted :o

~~I don't know how to do that :/~~ fixed

RyanCavanaugh · 2023-01-10T18:08:55Z

Do not add string & {} to this file.

If the set of values is truly unconstrained, string is the appropriate type, and is what should be written here.

RyanCavanaugh

Per prior comment

saschanaz · 2023-01-10T18:10:37Z

Yup, that's also what other properties do.

yanndinendal · 2023-01-11T08:37:38Z

If the set of values is truly unconstrained, string is the appropriate type, and is what should be written here.

It's not unconstrained. Writing string or any union | string wold lose any auto-completion, so we might as well close this PR if that's not something you want. Can I ask why?

I could try writing it as a string template literal type instead, based on this table from the spec, to allow 1, 2, 3 or 4 tokens from the union, in the correct order, but it would take me some time to do it right so we may want to first discuss if this could be investigated/accepted, or if it wouldn't be accepted either.

yanndinendal · 2023-01-11T09:01:03Z

Typescript team should be confident that they want (string & {}) in this repo which uses a side effect of current typescript intellisense code.

just to clarify that this is to work around a bug in typescript; I would be happy to use | string instead once it's fixed, but in the meanwhile it would be no better than closing this PR and losing type suggestions.

See issues linked in #issuecomment-1377304118 for explanations.

yanndinendal · 2023-01-11T09:33:54Z

Re #issuecomment-1378404272

I could try writing it as a string template literal type instead, based on this table from the spec, to allow 1, 2, 3 or 4 tokens from the union, in the correct order

Here are the full constraints, in the right order, for the set of space-separated tokens:

- `section-${string}`
- "shipping" | "billing"
- AutoFill // (the union I added to this PR, excluding "webauthn")
- "webauthn"

yanndinendal · 2023-01-11T10:17:56Z

@saschanaz, @RyanCavanaugh: Ok, here is how it would look like, it should be restricted to all authorized permutations (because for Autofill detail tokens (all except on/off), the autofill field names union is the only mandatory token of the list).
I will need to declare these types in this repo's json files but I made it work locally with a standard .d.ts file and it's quite impressive what it can suggest!

  type AutoFillSection = `section-${string}`;
  type AutoFillAddressKind = 'shipping' | 'billing';
  type AutoFillNormalField =
    | 'name'
    | 'honorific-prefix'
    | 'given-name'
    | 'additional-name'
    | 'family-name'
    | 'honorific-suffix'
    | 'nickname'
    | 'username'
    | 'new-password'
    | 'current-password'
    | 'one-time-code'
    | 'organization-title'
    | 'organization'
    | 'street-address'
    | 'address-line1'
    | 'address-line2'
    | 'address-line3'
    | 'address-level4'
    | 'address-level3'
    | 'address-level2'
    | 'address-level1'
    | 'country'
    | 'country-name'
    | 'postal-code'
    | 'cc-name'
    | 'cc-given-name'
    | 'cc-additional-name'
    | 'cc-family-name'
    | 'cc-number'
    | 'cc-exp'
    | 'cc-exp-month'
    | 'cc-exp-year'
    | 'cc-csc'
    | 'cc-type'
    | 'transaction-currency'
    | 'transaction-amount'
    | 'language'
    | 'bday'
    | 'bday-day'
    | 'bday-month'
    | 'bday-year'
    | 'sex'
    | 'url'
    | 'photo';
  type AutoFillContactKind = 'home' | 'work' | 'mobile' | 'fax' | 'pager';
  type AutoFillContactField =
    | 'tel'
    | 'tel-country-code'
    | 'tel-national'
    | 'tel-area-code'
    | 'tel-local'
    | 'tel-local-prefix'
    | 'tel-local-suffix'
    | 'tel-extension'
    | 'email'
    | 'impp';
  type AutoFillField =
    | AutoFillNormalField
    | AutoFillContactField
    | `${AutoFillContactKind} ${AutoFillContactField}`;
  type AutoFillCredentialField = 'webauthn';

  type AutoFill =
    | 'off'
    | 'on'
    | AutoFillField
    | `${AutoFillSection} ${AutoFillField}`
    | `${AutoFillAddressKind} ${AutoFillField}`
    | `${AutoFillSection} ${AutoFillAddressKind} ${AutoFillField}`
    | `${AutoFillSection} ${AutoFillAddressKind} ${AutoFillField} ${AutoFillCredentialField}`
    | `${AutoFillAddressKind} ${AutoFillField} ${AutoFillCredentialField}`
    | `${AutoFillSection} ${AutoFillField} ${AutoFillCredentialField}`
    | `${AutoFillField} ${AutoFillCredentialField}`;

Here are example suggestions and valid strings:

even the space-separated "contact kind + contact field" template string are suggested, with all possible permutations:
only section- isn't auto-completed (but is typed/validated):
typed section-*:
invalid string with missing mandatory AutoFillField:
other autocompleted valid strings with several categories:
still works for trivial values:
invalid example:

HolgerJeromin · 2023-01-11T12:41:44Z

Also note that this syntax/workaround is already used and tested in the TypeScript repo,
such as with tests/baselines/reference/specialIntersectionsInMappedTypes.types's
type Alignment = (string & {}) | "left" | "center" | "right";
or tests/lib/react18/react18.d.ts's AriaRole.

Internal tests are different from code which is shipped to many developers and shapes the way they work.

yanndinendal · 2023-01-11T13:15:48Z

@HolgerJeromin: Right. Does the above proposition sound better than the first one? With template string types?

yanndinendal · 2023-01-21T00:43:20Z

Hi @RyanCavanaugh, @saschanaz: I pushed a new version without | (string & {}) that is now fully spec-compliant. I would appreciate any feedback. :)

See #1467 (comment) for screenshots and context.

sandersn · 2023-04-24T23:26:31Z

I turned the types into values and got 424:

var OptionalPostfixToken = _ => 2
var OptionalPrefixToken = _ => 2
var AutoFillSection = 1
var AutoFillAddressKind = 2
var AutoFillBase = 2
var AutoFillContactField = 9
var AutoFillContactKind = 3
var AutoFillCredentialField = 1
var AutoFillNormalField = 36
var AutoFillField = AutoFillNormalField + OptionalPrefixToken(AutoFillContactKind) * AutoFillContactField;
var AutoFill = AutoFillBase + OptionalPrefixToken(AutoFillSection)*OptionalPrefixToken(AutoFillAddressKind)*AutoFillField*OptionalPostfixToken(AutoFillCredentialField)
console.log(AutoFill)

I think that's reasonable; any sizeable addition to the DOM adds that many types.

Replaces: microsoft/TypeScript#52169 This will allow to autocomplete… the `autoComplete` attribute in vscode for example. ![autoComplete autocomplete in vscode](https://user-images.githubusercontent.com/58247/211378145-c01c665b-9f4b-4918-83cc-16532f555935.png) The list is quite long and it's not easy remembering the spelling of each one of them (first_name or given-name? password or current-password?), and it would improve the UX of sites if they were more appropriately used (for example, some people may think that the input's `type` and/or `name` attributes may be enough for fields like email or password, but knowing to use `autoComplete="new-password"` or `one-time-code` can be really useful).

Add missing value according to spec (`webauthn`).

Per microsoft#1467 (comment)

Don't list all possible alterations manually. microsoft#1467 (comment)

yanndinendal · 2023-06-19T14:17:57Z

Edit: WPT wpt.fyi/results/html/semantics/forms/the-form-element/form-autocomplete.html?label=master&label=experimental&aligned&q=autocomplete

@saschanaz So looks like everything is good on that page, right?

The only tests that fail on two browsers are with one-time-code, but it's clearly supported by iOS Safari: https://developer.apple.com/documentation/security/password_autofill/enabling_password_autofill_on_an_html_input_element
and webauthn with a combination of everything else (section, mode, contact, field, and credential), which is probably an unexpected limitation (webauthn alone is supported; other combinations are supported), so there is no reason to add arbitrary restrictions to type definitions for this.

I've rebased, is it ready to merge? :)

saschanaz

Sorry for the long delay, and thank you for maintaining this so far!

Looks good with some nits. It seems a bit more fields are supported now than this was written, but asking that change here would be very unfair, that can be done separately.

saschanaz · 2023-06-19T15:10:35Z

inputfiles/addedTypes.jsonc

+            },
+            {
+                "name": "AutoFillSection",
+                "overrideType": "`section-${string}`"


Can you add a TODO comment about the over-match of section-{string}?

unittests/files/autocomplete.ts

inputfiles/addedTypes.jsonc

saschanaz · 2023-06-19T15:34:26Z

I'm assuming that having the Optional*Token helper types here is okay, as @sandersn hasn't complained about that.

microsoft#1467 (review)

yanndinendal · 2023-06-19T17:48:51Z

@saschanaz: pushed, thanks! :)

saschanaz · 2023-06-19T18:12:23Z

Let's see I can merge this even if there's a change request, because that's solved now.

LGTM

github-actions · 2023-06-19T18:13:01Z

Merging because @saschanaz is a code-owner of all the changes - thanks!

yanndinendal · 2023-06-20T18:54:56Z

@sandersn, @saschanaz: Hi, do you when it will be included in https://github.com/microsoft/TypeScript/blob/main/src/lib/dom.generated.d.ts and released? 😄

saschanaz · 2023-06-20T21:43:20Z

(I'm not really allowed to know such info, but the roadmap implies the new release is coming soonish, as the release happens roughly every three months and the last release was three months ago.) https://github.com/microsoft/TypeScript/wiki/Roadmap)

saschanaz · 2023-06-20T21:44:45Z

If you need it today, consider using https://www.npmjs.com/package/@types/web.

... except it looks like the release step is broken since 0.0.99. (Edit: Filed #1580)

sandersn · 2023-06-20T23:53:16Z

I'm assuming that having the Optional*Token helper types here is okay, as @sandersn hasn't complained about that.
Basically yes. I'll check the performance numbers when I copy the types into TS 5.2 beta tomorrow but I think it'll be OK.

I'll check out the publication failure and try to fix it.

Edit: Oh, looks you have a potential fix already. I'll merge that.

See microsoft/TypeScript-DOM-lib-generator#1467

yanndinendal · 2023-10-09T10:51:48Z

Unfortunately, this does not get picked up by @types/react / @types/react-dom JSX autoComplete prop. ¯\_(ツ)_/¯

Asking for instructions here: DefinitelyTyped/DefinitelyTyped#66982

yanndinendal mentioned this pull request Jan 9, 2023

Add more precise typing for autoComplete HTML attribute microsoft/TypeScript#52169

Closed

orta mentioned this pull request Jan 9, 2023

Support Intellisense for string/number literals in a widened union microsoft/TypeScript#33471

Open

5 tasks

RyanCavanaugh requested changes Jan 10, 2023

View reviewed changes

yanndinendal requested a review from RyanCavanaugh January 11, 2023 08:39

yanndinendal mentioned this pull request Jan 11, 2023

Improve HTML autocomplete attribute microsoft/TypeScript#52168

Closed

5 tasks

yanndinendal force-pushed the add_autocomplete_html_attribute branch 2 times, most recently from 2f40faa to ca386d5 Compare January 21, 2023 00:39

yanndinendal marked this pull request as draft January 24, 2023 08:43

yanndinendal mentioned this pull request Apr 11, 2023

Regex-validated string types (feedback reset) microsoft/TypeScript#41160

Open

sandersn approved these changes Apr 24, 2023

View reviewed changes

yanndinendal added 7 commits June 19, 2023 16:01

Declare AutoFill enum for autocomplete values

b62fee2

Add missing value according to spec (`webauthn`).

Use precise types allowing completion of several tokens

8179c44

Remove unsupported impp autofill contact token

88318d6

Remove poorly supported attributes

6d6f63e

Per microsoft#1467 (comment)

Add tests for autofill values

5bc8f65

Simplify optional tokens to improve maintainability

b3466ed

Don't list all possible alterations manually. microsoft#1467 (comment)

yanndinendal force-pushed the add_autocomplete_html_attribute branch from d3cb416 to b3466ed Compare June 19, 2023 14:02

saschanaz reviewed Jun 19, 2023

View reviewed changes

Fixes after review

5453d21

microsoft#1467 (review)

saschanaz approved these changes Jun 19, 2023

View reviewed changes

github-actions bot merged commit dbf56b1 into microsoft:main Jun 19, 2023

yanndinendal deleted the add_autocomplete_html_attribute branch June 19, 2023 18:14

yanndinendal added a commit to yanndinendal/DefinitelyTyped that referenced this pull request Oct 9, 2023

Draft: Add jsx autoComplete types from the DOM

5ecc4be

See microsoft/TypeScript-DOM-lib-generator#1467

yanndinendal mentioned this pull request Oct 9, 2023

Draft: [react] Add jsx autoComplete types from the DOM DefinitelyTyped/DefinitelyTyped#66982

Closed

8 tasks

saschanaz mentioned this pull request Nov 3, 2024

Added strict typings for ARIAMixin with literals #1840

Open

HolgerJeromin mentioned this pull request Apr 1, 2025

Add types to fetch methods #1957

Closed

Add more precise typing for autocomplete HTML attribute #1467

Add more precise typing for autocomplete HTML attribute #1467

Conversation

yanndinendal commented Jan 9, 2023 • edited Loading

github-actions bot commented Jan 9, 2023

yanndinendal commented Jan 9, 2023 • edited Loading

yanndinendal commented Jan 9, 2023

saschanaz commented Jan 10, 2023

HolgerJeromin commented Jan 10, 2023

orta commented Jan 10, 2023

yanndinendal commented Jan 10, 2023 • edited Loading

saschanaz commented Jan 10, 2023

yanndinendal commented Jan 10, 2023 • edited Loading

With | (string & {}):

With | string:

yanndinendal commented Jan 10, 2023

saschanaz commented Jan 10, 2023

yanndinendal commented Jan 10, 2023 • edited Loading

yanndinendal commented Jan 10, 2023 • edited Loading

RyanCavanaugh commented Jan 10, 2023

RyanCavanaugh left a comment

Choose a reason for hiding this comment

saschanaz commented Jan 10, 2023

yanndinendal commented Jan 11, 2023 • edited Loading

yanndinendal commented Jan 11, 2023 • edited Loading

yanndinendal commented Jan 11, 2023

yanndinendal commented Jan 11, 2023 • edited Loading

HolgerJeromin commented Jan 11, 2023

yanndinendal commented Jan 11, 2023 • edited Loading

yanndinendal commented Jan 21, 2023

sandersn commented Apr 24, 2023

yanndinendal commented Jun 19, 2023

saschanaz left a comment

Choose a reason for hiding this comment

saschanaz Jun 19, 2023

Choose a reason for hiding this comment

saschanaz commented Jun 19, 2023

yanndinendal commented Jun 19, 2023

saschanaz commented Jun 19, 2023

github-actions bot commented Jun 19, 2023

yanndinendal commented Jun 20, 2023

saschanaz commented Jun 20, 2023

saschanaz commented Jun 20, 2023 • edited Loading

sandersn commented Jun 20, 2023 • edited Loading

yanndinendal commented Oct 9, 2023 • edited Loading

yanndinendal commented Jan 9, 2023 •

edited

Loading

yanndinendal commented Jan 9, 2023 •

edited

Loading

yanndinendal commented Jan 10, 2023 •

edited

Loading

yanndinendal commented Jan 10, 2023 •

edited

Loading

With `| (string & {})`:

With `| string`:

yanndinendal commented Jan 10, 2023 •

edited

Loading

yanndinendal commented Jan 10, 2023 •

edited

Loading

yanndinendal commented Jan 11, 2023 •

edited

Loading

yanndinendal commented Jan 11, 2023 •

edited

Loading

yanndinendal commented Jan 11, 2023 •

edited

Loading

yanndinendal commented Jan 11, 2023 •

edited

Loading

saschanaz commented Jun 20, 2023 •

edited

Loading

sandersn commented Jun 20, 2023 •

edited

Loading

yanndinendal commented Oct 9, 2023 •

edited

Loading