Skip to content

Commit f3e42d8

Browse files
committed
Add more precise typing for autoComplete HTML attribute
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).
1 parent 0337998 commit f3e42d8

File tree

2 files changed

+25
-5
lines changed

2 files changed

+25
-5
lines changed

baselines/dom.generated.d.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6676,7 +6676,7 @@ interface HTMLFormElement extends HTMLElement {
66766676
/** Sets or retrieves the URL to which the form content is sent for processing. */
66776677
action: string;
66786678
/** Specifies whether autocomplete is applied to an editable text field. */
6679-
autocomplete: string;
6679+
autocomplete: "off" | "on" | "name" | "honorific-prefix" | "given-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "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" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo" | (string & {});
66806680
/** Retrieves a collection, in source order, of all controls in a given form. */
66816681
readonly elements: HTMLFormControlsCollection;
66826682
/** Sets or retrieves the MIME encoding for the form. */
@@ -7105,7 +7105,7 @@ interface HTMLInputElement extends HTMLElement {
71057105
/** Sets or retrieves a text alternative to the graphic. */
71067106
alt: string;
71077107
/** Specifies whether autocomplete is applied to an editable text field. */
7108-
autocomplete: string;
7108+
autocomplete: "off" | "on" | "name" | "honorific-prefix" | "given-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "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" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo" | (string & {});
71097109
capture: string;
71107110
/** Sets or retrieves the state of the check box or radio button. */
71117111
checked: boolean;
@@ -7948,7 +7948,7 @@ declare var HTMLScriptElement: {
79487948

79497949
/** A <select> HTML Element. These elements also share all of the properties and methods of other HTML elements via the HTMLElement interface. */
79507950
interface HTMLSelectElement extends HTMLElement {
7951-
autocomplete: string;
7951+
autocomplete: "off" | "on" | "name" | "honorific-prefix" | "given-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "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" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo" | (string & {});
79527952
disabled: boolean;
79537953
/** Retrieves a reference to the form that the object is embedded in. */
79547954
readonly form: HTMLFormElement | null;
@@ -8402,7 +8402,7 @@ declare var HTMLTemplateElement: {
84028402

84038403
/** Provides special properties and methods for manipulating the layout and presentation of <textarea> elements. */
84048404
interface HTMLTextAreaElement extends HTMLElement {
8405-
autocomplete: string;
8405+
autocomplete: "off" | "on" | "name" | "honorific-prefix" | "given-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "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" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo" | (string & {});
84068406
/** Sets or retrieves the width of the object. */
84078407
cols: number;
84088408
/** Sets or retrieves the initial contents of the object. */

inputfiles/overridingTypes.jsonc

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1203,6 +1203,10 @@
12031203
"HTMLSelectElement": {
12041204
"properties": {
12051205
"property": {
1206+
"autocomplete": {
1207+
"name": "autocomplete",
1208+
"overrideType": "\"off\" | \"on\" | \"name\" | \"honorific-prefix\" | \"given-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"email\" | \"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\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"url\" | \"photo\" | (string & {})"
1209+
},
12061210
"selectedOptions": {
12071211
"name": "selectedOptions",
12081212
"overrideType": "HTMLCollectionOf<HTMLOptionElement>"
@@ -1606,6 +1610,10 @@
16061610
"HTMLInputElement": {
16071611
"properties": {
16081612
"property": {
1613+
"autocomplete": {
1614+
"name": "autocomplete",
1615+
"overrideType": "\"off\" | \"on\" | \"name\" | \"honorific-prefix\" | \"given-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"email\" | \"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\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"url\" | \"photo\" | (string & {})"
1616+
},
16091617
"selectionDirection": {
16101618
"name": "selectionDirection",
16111619
"overrideType": "\"forward\" | \"backward\" | \"none\""
@@ -1725,6 +1733,10 @@
17251733
"HTMLTextAreaElement": {
17261734
"properties": {
17271735
"property": {
1736+
"autocomplete": {
1737+
"name": "autocomplete",
1738+
"overrideType": "\"off\" | \"on\" | \"name\" | \"honorific-prefix\" | \"given-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"email\" | \"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\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"url\" | \"photo\" | (string & {})"
1739+
},
17281740
"labels": {
17291741
"name": "labels",
17301742
"overrideType": "NodeListOf<HTMLLabelElement>"
@@ -2354,7 +2366,15 @@
23542366
"overrideIndexSignatures": [
23552367
"[index: number]: Element",
23562368
"[name: string]: any"
2357-
]
2369+
],
2370+
"properties": {
2371+
"property": {
2372+
"autocomplete": {
2373+
"name": "autocomplete",
2374+
"overrideType": "\"off\" | \"on\" | \"name\" | \"honorific-prefix\" | \"given-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"email\" | \"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\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-extension\" | \"impp\" | \"url\" | \"photo\" | (string & {})"
2375+
}
2376+
}
2377+
}
23582378
},
23592379
"Blob": {
23602380
"methods": {

0 commit comments

Comments
 (0)