[Docs] Fix incorrect Icon in search after Navigation - #4641
Merged
vnbaaij merged 1 commit intoMar 22, 2026
Conversation
Fix an issue where the 'X' icon would remain visible on the Docs Search input after a user has selected an item and navigated away. This is due to the check that the Autocomplete component does where with this component usage, this.SelectedOption is not null at this point.
Contributor
There was a problem hiding this comment.
Pull request overview
Updates the docs site’s navigation search implementation to correctly reset the FluentAutocomplete “clear (X)” icon after an item is selected and the app navigates, by switching from a “multi-select with max 1” setup to true single-select binding.
Changes:
- Configure the
FluentAutocompleteas single-select (Multiple="false"). - Replace
SelectedOptionsbinding withSelectedOptionbinding and update click handler state clearing accordingly.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| examples/Demo/Shared/Shared/DemoSearch.razor | Switches the autocomplete to single-select and binds to SelectedOption instead of SelectedOptions. |
| examples/Demo/Shared/Shared/DemoSearch.razor.cs | Updates the backing field and navigation handler to use/clear a single selected option. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
Author
|
@microsoft-github-policy-service agree |
vnbaaij
approved these changes
Mar 22, 2026
vnbaaij
enabled auto-merge (squash)
March 22, 2026 09:12
This was referenced Apr 22, 2026
Closed
Merged
Merged
This was referenced Apr 30, 2026
Closed
This was referenced May 19, 2026
This was referenced Jun 7, 2026
Closed
Closed
dkurepa
added a commit
to dotnet/arcade-services
that referenced
this pull request
Jul 15, 2026
…AspNetCore.Components.Icons (#6497) Updated [Microsoft.FluentUI.AspNetCore.Components](https://github.com/microsoft/fluentui-blazor) from 4.14.0 to 4.14.2. <details> <summary>Release notes</summary> _Sourced from [Microsoft.FluentUI.AspNetCore.Components's releases](https://github.com/microsoft/fluentui-blazor/releases)._ ## 4.14.2 ## What's Changed * [Select] Fix selected items color by @MarvinKlein1508 in microsoft/fluentui-blazor#4760 * [DesignTheme] Tolerate blocked localStorage during startup by @Copilot in microsoft/fluentui-blazor#4857 * [Chore] Prep for release and update icons by @vnbaaij in microsoft/fluentui-blazor#4869 **Full Changelog**: microsoft/fluentui-blazor@v4.14.1...v4.14.2 ## 4.14.1 ## What's Changed * Merge changes from Main by @vnbaaij in microsoft/fluentui-blazor#4516 * [AppBar] Make OnClick close popover by @vnbaaij in microsoft/fluentui-blazor#4518 * [Docs] Update keycode docs to reflect latest interface by @MarvinKlein1508 in microsoft/fluentui-blazor#4522 * Fix index.ts section causing "Illegal constructor" on older iOS devices by @GusPietrasanta-Polygon in microsoft/fluentui-blazor#4531 * [Docs] Add note about render mode and required interactivity by @MarvinKlein1508 in microsoft/fluentui-blazor#4540 * [Tabs] Call HandleOnTabChange when changing to a tab through the menu by @vnbaaij in microsoft/fluentui-blazor#4564 * [Popover] Allow tabbing inside open anchored regions, support keyboard accessible navigation for popover by @adamint in microsoft/fluentui-blazor#4561 * [DataGrid] Add OnSortChanged event callback by @vnbaaij in microsoft/fluentui-blazor#4573 * [Templates] Fix 404 in WebAssembly temp by @vnbaaij in microsoft/fluentui-blazor#4578 * Bump minimatch from 3.1.2 to 3.1.5 in /src/Core.Assets by @dependabot[bot] in microsoft/fluentui-blazor#4586 * fix: rename `dateselected` custom event to `fluentdateselected` to resolve .NET 11 exception by @Copilot in microsoft/fluentui-blazor#4605 * fix: rename custom events matching browserEventName to use fluent prefix by @Copilot in microsoft/fluentui-blazor#4609 * [General] Add accent-color in reboot.css by @wherewhere in microsoft/fluentui-blazor#4614 * [Dialog] Update docs by @vnbaaij in microsoft/fluentui-blazor#4625 * [DataGrid] Fix SelectedItems getting unselected when using pagination (and virtualization) by @vnbaaij in microsoft/fluentui-blazor#4623 * Bump flatted from 3.3.1 to 3.4.2 in /src/Core.Assets by @dependabot[bot] in microsoft/fluentui-blazor#4638 * [Docs] Fix incorrect Icon in search after Navigation by @sebbogle in microsoft/fluentui-blazor#4641 * [SplashScreen] Mark sync methods as Obsolete by @MarvinKlein1508 in microsoft/fluentui-blazor#4644 * Bump picomatch from 2.3.1 to 2.3.2 in /src/Core.Assets by @dependabot[bot] in microsoft/fluentui-blazor#4646 * [NavGroup] Fix disabled state for top-level `FluentNavGroup` by @MarvinKlein1508 in microsoft/fluentui-blazor#4647 * [NavGroup] Apply font opacity instead of color by @MarvinKlein1508 in microsoft/fluentui-blazor#4648 * Rollup PRs #4677 and and #4678 by @vnbaaij in microsoft/fluentui-blazor#4680 ## New Contributors * @GusPietrasanta-Polygon made their first contribution in microsoft/fluentui-blazor#4531 * @sebbogle made their first contribution in microsoft/fluentui-blazor#4641 **Full Changelog**: microsoft/fluentui-blazor@v4.14.0...v4.14.1 Commits viewable in [compare view](microsoft/fluentui-blazor@v4.14.0...v4.14.2). </details> Updated [Microsoft.FluentUI.AspNetCore.Components.Icons](https://github.com/microsoft/fluentui-blazor) from 4.14.2 to 4.14.3. <details> <summary>Release notes</summary> _Sourced from [Microsoft.FluentUI.AspNetCore.Components.Icons's releases](https://github.com/microsoft/fluentui-blazor/releases)._ ## 4.14.3 ## What's Changed * [Chore] Publish symbols from CI builds to internal symbol server by @tlmii in microsoft/fluentui-blazor#4910 * [Chore] Update dependencies in package.json by @dvoituron in microsoft/fluentui-blazor#4946 * [Docs] Update link to v5 docs by @MarvinKlein1508 in microsoft/fluentui-blazor#4927 * Update icons and prep for release by @vnbaaij in microsoft/fluentui-blazor#4958 **Full Changelog**: microsoft/fluentui-blazor@v4.14.2...v4.14.3 Commits viewable in [compare view](microsoft/fluentui-blazor@v4.14.2...v4.14.3). </details> Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) --- <details> <summary>Dependabot commands and options</summary> <br /> You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot show <dependency name> ignore conditions` will show all of the ignore conditions of the specified dependency - `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) </details> --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Djuradj Kurepa <dkurepa@microsoft.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Pull Request
📖 Description
Fix an issue where the 'X' icon would remain visible on the Docs Search input after a user has selected an item and navigated away. This is due to the check that the Autocomplete component does where with this component usage, this.SelectedOption is not null at this point.
Updating the component to use
Multiple="false"fixes this issue and still allows for correct handling of navigation.I had originally ran into this issue myself as when implementing a similar Navigation Search for my own project where I used the docs as a starting point for how best to achieve this with FluentUI.
🎫 Issues
👩💻 Reviewer Notes
Current Behaviour:
Behaviour After Changes:
📑 Test Plan
Manually testing after making the change to see that the icon correctly updates to the search icon when navigating matching the expended behaviour as the search input text clears. Checked with both mouse clicks, and keyboard arrow keys + enter.
As this change is just to the docs page rather than a change to the component library itself, I don't believe there is any unit testings that covers this. However if I'm wrong, please just let me know and I'd be happy to add something in.
✅ Checklist
General
⏭ Next Steps