[Docs] Fix incorrect Icon in search after Navigation

[sebbogle]

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

• I have added tests for my changes.
• I have tested my changes.
• I have updated the project documentation to reflect my changes.
• I have read the CONTRIBUTING documentation and followed the standards for this project.

⏭ Next Steps

[Copilot]

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 FluentAutocomplete as single-select (Multiple="false").
• Replace SelectedOptions binding with SelectedOption binding 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.

[sebbogle]

@microsoft-github-policy-service agree