From ffe185f308369075a646f99a3f311fa2d788a27d Mon Sep 17 00:00:00 2001 From: MarvinKlein1508 Date: Mon, 16 Jun 2025 13:10:17 +0200 Subject: [PATCH 1/2] Add documentation for placeholder conflicts with autofill --- .../List/Autocomplete/AutocompletePage.razor | 2 ++ .../Pages/List/Combobox/ComboboxPage.razor | 2 ++ .../Demo/Shared/Pages/Search/SearchPage.razor | 2 ++ .../Pages/TextField/TextFieldPage.razor | 2 ++ .../wwwroot/docs/PlaceholderAutofill.md | 21 +++++++++++++++++++ 5 files changed, 29 insertions(+) create mode 100644 examples/Demo/Shared/wwwroot/docs/PlaceholderAutofill.md diff --git a/examples/Demo/Shared/Pages/List/Autocomplete/AutocompletePage.razor b/examples/Demo/Shared/Pages/List/Autocomplete/AutocompletePage.razor index 6ac269b8f6..b39eec9ee0 100644 --- a/examples/Demo/Shared/Pages/List/Autocomplete/AutocompletePage.razor +++ b/examples/Demo/Shared/Pages/List/Autocomplete/AutocompletePage.razor @@ -50,6 +50,8 @@ + +

Accessibility

This component is compatible with accessibility rules. diff --git a/examples/Demo/Shared/Pages/List/Combobox/ComboboxPage.razor b/examples/Demo/Shared/Pages/List/Combobox/ComboboxPage.razor index 4ed93d818a..e5d2456f12 100644 --- a/examples/Demo/Shared/Pages/List/Combobox/ComboboxPage.razor +++ b/examples/Demo/Shared/Pages/List/Combobox/ComboboxPage.razor @@ -43,3 +43,5 @@

Documentation

+ + diff --git a/examples/Demo/Shared/Pages/Search/SearchPage.razor b/examples/Demo/Shared/Pages/Search/SearchPage.razor index 6dbf60814c..079c6623ef 100644 --- a/examples/Demo/Shared/Pages/Search/SearchPage.razor +++ b/examples/Demo/Shared/Pages/Search/SearchPage.razor @@ -42,3 +42,5 @@

Documentation

+ + diff --git a/examples/Demo/Shared/Pages/TextField/TextFieldPage.razor b/examples/Demo/Shared/Pages/TextField/TextFieldPage.razor index cdcb063c8b..b4fc90e7d6 100644 --- a/examples/Demo/Shared/Pages/TextField/TextFieldPage.razor +++ b/examples/Demo/Shared/Pages/TextField/TextFieldPage.razor @@ -41,3 +41,5 @@

Documentation

+ + diff --git a/examples/Demo/Shared/wwwroot/docs/PlaceholderAutofill.md b/examples/Demo/Shared/wwwroot/docs/PlaceholderAutofill.md new file mode 100644 index 0000000000..3b438430a4 --- /dev/null +++ b/examples/Demo/Shared/wwwroot/docs/PlaceholderAutofill.md @@ -0,0 +1,21 @@ +### Placeholders and autofill +The `Placeholder` parameter is used to set the placeholder text for the input field. This is a short hint that describes the expected value of the input field. +It is displayed when the input field is empty and not focused. + +The placeholder value affects the autofill suggestion feature in Microsoft Edge and Google Chrome. +Even if you set the `Autofill` parameter to `off`, the browser may still display autofill suggestions based on the placeholder value. + +There are certain placeholder values which you should avoid to prevent the browser from showing autofill suggestions. + +| Value (Placeholder/Name) | Description | +|--------------------------|--------------------------------------| +| `name`, `full name`, `first name`, `last name` | Personal name fields | +| `email`, `e-mail`, `mail` | Email address fields | +| `address`, `street`, `city`, `zip`, `postal` | Address and postal code fields | +| `phone`, `tel` | Phone number fields | +| `username`, `user`, `login` | Username or login fields | +| `password`, `pwd` | Password fields | +| `dob`, `birthdate`, `date of birth` | Date of birth fields | +| `cc`, `card number`, `credit card` | Credit card fields | + +If you still want to use these placeholder values, then you need to disable autofill in your browser settings completely. From cceeec3fe5ceb45559e0abd858f1876cddda046b Mon Sep 17 00:00:00 2001 From: MarvinKlein1508 Date: Mon, 16 Jun 2025 13:12:29 +0200 Subject: [PATCH 2/2] AutoComplete --- examples/Demo/Shared/wwwroot/docs/PlaceholderAutofill.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/Demo/Shared/wwwroot/docs/PlaceholderAutofill.md b/examples/Demo/Shared/wwwroot/docs/PlaceholderAutofill.md index 3b438430a4..f7558ad1ce 100644 --- a/examples/Demo/Shared/wwwroot/docs/PlaceholderAutofill.md +++ b/examples/Demo/Shared/wwwroot/docs/PlaceholderAutofill.md @@ -3,7 +3,7 @@ The `Placeholder` parameter is used to set the placeholder text for the input fi It is displayed when the input field is empty and not focused. The placeholder value affects the autofill suggestion feature in Microsoft Edge and Google Chrome. -Even if you set the `Autofill` parameter to `off`, the browser may still display autofill suggestions based on the placeholder value. +Even if you set the `AutoComplete` parameter to `off`, the browser may still display autofill suggestions based on the placeholder value. There are certain placeholder values which you should avoid to prevent the browser from showing autofill suggestions.