Add more precise typing for autocomplete HTML attribute #1467
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -352,6 +352,95 @@ | |
| // https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API#browser_compatibility | ||
| "xr-spatial-tracking" | ||
| ] | ||
| }, | ||
| "AutoFillBase": { | ||
| "name": "AutoFillBase", | ||
| "value": [ | ||
| // Off | ||
| "off", | ||
| // Automatic | ||
| "on" | ||
| ] | ||
| }, | ||
| "AutoFillAddressKind": { | ||
| "name": "AutoFillAddressKind", | ||
| "value": [ | ||
| "shipping", | ||
| "billing" | ||
| ] | ||
| }, | ||
| "AutoFillNormalField": { | ||
| "name": "AutoFillNormalField", | ||
| "value": [ | ||
| "name", | ||
| "honorific-prefix", | ||
| "given-name", | ||
| "additional-name", | ||
| "family-name", | ||
| "honorific-suffix", | ||
|
|
||
| "username", | ||
| "new-password", | ||
| "current-password", | ||
| "one-time-code", | ||
|
|
||
| "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-family-name", | ||
| "cc-number", | ||
| "cc-exp", | ||
| "cc-exp-month", | ||
| "cc-exp-year", | ||
| "cc-csc", | ||
| "cc-type", | ||
| "transaction-currency", | ||
| "transaction-amount", | ||
|
|
||
| "bday-day", | ||
| "bday-month", | ||
| "bday-year" | ||
| ] | ||
| }, | ||
| "AutoFillContactKind": { | ||
| "name": "AutoFillContactKind", | ||
| "value": [ | ||
| "home", | ||
| "work", | ||
| "mobile" | ||
| ] | ||
| }, | ||
| "AutoFillContactField": { | ||
| "name": "AutoFillContactField", | ||
| "value": [ | ||
| "tel", | ||
| "tel-country-code", | ||
| "tel-national", | ||
| "tel-area-code", | ||
| "tel-local", | ||
| "tel-local-prefix", | ||
| "tel-local-suffix", | ||
| "tel-extension", | ||
| "email" | ||
| ] | ||
| }, | ||
| "AutoFillCredentialField": { | ||
| "name": "AutoFillCredentialField", | ||
| "value": [ | ||
| "webauthn" | ||
| ] | ||
| } | ||
| } | ||
| }, | ||
|
|
@@ -1422,6 +1511,39 @@ | |
| { | ||
| "name": "EventListenerOrEventListenerObject", | ||
| "overrideType": "EventListener | EventListenerObject" | ||
| }, | ||
| { | ||
| "name": "OptionalPrefixToken", | ||
| "typeParameters": [ | ||
| { | ||
| "name": "T extends string" | ||
| } | ||
| ], | ||
| "overrideType": "`${T} ` | \"\"" | ||
| }, | ||
| { | ||
| "name": "OptionalPostfixToken", | ||
| "typeParameters": [ | ||
| { | ||
| "name": "T extends string" | ||
| } | ||
| ], | ||
| "overrideType": "` ${T}` | \"\"" | ||
| }, | ||
| { | ||
| "name": "AutoFillSection", | ||
| "overrideType": "`section-${string}`" | ||
|
There was a problem hiding this comment. This is problematic as it allows space: There was a problem hiding this comment. Oh ok, There was a test for There was a problem hiding this comment. Honestly it doesn't seem trivial, I don't think I'm fluent enough in typescript to do this (or if it's possible at all). I will add tests that show the expected and unexpected cases anyway. I'll continue looking into it but I would argue that the current type (before this PR) allows much more invalid values, so maybe we could iterate on it? Or do you feel like it would be a blocker? There was a problem hiding this comment. I can see how to do it with a generic, but not inside a template literal type: There was a problem hiding this comment. Yes, pretty sure it's not currently possible. Anyway as I said, still much less false positives than before. :) There was a problem hiding this comment. @sandersn This one is the main reason I'm not approving, what do you think? There was a problem hiding this comment. I think some overgeneration is OK as long as it's not rejecting values that are legal. There was a problem hiding this comment.
Note for other readers that it is not a full catch-all, you still need to add valid tokens to your attribute, so for example, There was a problem hiding this comment.
@sandersn: Hi, I've pushed the final version, are you ok with the generated types? There was a problem hiding this comment. Can you add a TODO comment about the over-match of |
||
| }, | ||
| { | ||
| "name": "AutoFillField", | ||
| "overrideType": "AutoFillNormalField | `${OptionalPrefixToken<AutoFillContactKind>}${AutoFillContactField}`" | ||
| }, | ||
| { | ||
| // See the full list of possible autofill values for the `autocomplete` attribute: | ||
| // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#determine-a-field's-category | ||
| // Full spec at https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill. | ||
| "name": "AutoFill", | ||
| "overrideType": "AutoFillBase | `${OptionalPrefixToken<AutoFillSection>}${OptionalPrefixToken<AutoFillAddressKind>}${AutoFillField}${OptionalPostfixToken<AutoFillCredentialField>}`" | ||
| } | ||
| ] | ||
| } | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| // @ts-expect-error should be a string | ||
| document.body.getElementsByTagName("input")[0].autocomplete = false; | ||
| // @ts-expect-error should not be empty | ||
| document.body.getElementsByTagName("input")[0].autocomplete = ""; | ||
yanndinendal marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| // @ts-expect-error wrong value for this attribute | ||
| document.body.getElementsByTagName("input")[0].autocomplete = "undefined"; | ||
| // @ts-expect-error does not accept boolean attributes | ||
| document.body.getElementsByTagName("input")[0].autocomplete = "true"; | ||
| // @ts-expect-error does not accept boolean attributes | ||
| document.body.getElementsByTagName("input")[0].autocomplete = "false"; | ||
|
|
||
| // @ts-expect-error missing autofill token before webauthn | ||
| document.body.getElementsByTagName("input")[0].autocomplete = "webauthn"; | ||
|
|
||
| // @ts-expect-error wrong order for webauthn token | ||
| document.body.getElementsByTagName("input")[0].autocomplete = | ||
| "webauthn username"; | ||
|
|
||
| // @ts-expect-error wrong order for contact specifier | ||
| document.body.getElementsByTagName("input")[0].autocomplete = "tel mobile"; | ||
|
|
||
| // @ts-expect-error off should be standalone | ||
| document.body.getElementsByTagName("input")[0].autocomplete = | ||
| "section-wrong off"; | ||
|
|
||
| // @ts-expect-error on should be standalone | ||
| document.body.getElementsByTagName("input")[0].autocomplete = "on username"; | ||
|
|
||
| // @ts-expect-error home, work or mobile are only for contact tokens | ||
| document.body.getElementsByTagName("input")[0].autocomplete = "mobile username"; | ||
|
|
||
| // @ts-expect-error should probably be current-password or new-password | ||
| document.body.getElementsByTagName("input")[0].autocomplete = "password"; | ||
|
|
||
| document.body.getElementsByTagName("input")[0].autocomplete = "on"; | ||
| document.body.getElementsByTagName("input")[0].autocomplete = "off"; | ||
| document.body.getElementsByTagName("input")[0].autocomplete = "new-password"; | ||
| document.body.getElementsByTagName("input")[0].autocomplete = | ||
| "current-password"; | ||
|
|
||
| document.body.getElementsByTagName("input")[0].autocomplete = | ||
| "username webauthn"; | ||
|
|
||
| document.body.getElementsByTagName("input")[0].autocomplete = | ||
| "shipping street-address"; | ||
| document.body.getElementsByTagName("input")[0].autocomplete = | ||
| "section-custom shipping street-address"; | ||
|
|
||
| document.body.getElementsByTagName("input")[0].autocomplete = "work email"; | ||
| document.body.getElementsByTagName("input")[0].autocomplete = | ||
| "section-custom billing mobile tel"; | ||
|
|
||
| // @ts-expect-error only on and off are available on a form | ||
| document.body.getElementsByTagName("form")[0].autocomplete = "new-password"; | ||
|
|
||
| document.body.getElementsByTagName("form")[0].autocomplete = "off"; | ||
|
|
||
| // @ts-expect-error autocomplete attribute is only for form elements | ||
| document.body.getElementsByTagName("p")[0].autocomplete = "off"; | ||
Uh oh!
There was an error while loading. Please reload this page.