Skip to content

[Docs] Add documentation for possible placeholder autocomplete conflicts #3923

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vnbaaij merged 2 commits into from
Jun 16, 2025
Merged

[Docs] Add documentation for possible placeholder autocomplete conflicts #3923

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ffe185f
Add documentation for placeholder conflicts with autofill
MarvinKlein1508 Jun 16, 2025
cceeec3
AutoComplete
MarvinKlein1508 Jun 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions examples/Demo/Shared/Pages/List/Autocomplete/AutocompletePage.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,8 @@

<ApiDocumentation Component="typeof(FluentPersona)" />

<MarkdownSection FromAsset="./_content/FluentUI.Demo.Shared/docs/PlaceholderAutofill.md" />

<h2>Accessibility</h2>

This component is compatible with accessibility rules.
Expand Down
2 changes: 2 additions & 0 deletions examples/Demo/Shared/Pages/List/Combobox/ComboboxPage.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,3 +43,5 @@
<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentCombobox<>)" GenericLabel="TOption" />

<MarkdownSection FromAsset="./_content/FluentUI.Demo.Shared/docs/PlaceholderAutofill.md" />
2 changes: 2 additions & 0 deletions examples/Demo/Shared/Pages/Search/SearchPage.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,3 +42,5 @@
<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentSearch)" GenericLabel="string?" />

<MarkdownSection FromAsset="./_content/FluentUI.Demo.Shared/docs/PlaceholderAutofill.md" />
2 changes: 2 additions & 0 deletions examples/Demo/Shared/Pages/TextField/TextFieldPage.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,3 +41,5 @@
<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentTextField)" GenericLabel="string?" />

<MarkdownSection FromAsset="./_content/FluentUI.Demo.Shared/docs/PlaceholderAutofill.md" />
21 changes: 21 additions & 0 deletions examples/Demo/Shared/wwwroot/docs/PlaceholderAutofill.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 `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.

| 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.
Loading