Skip to content
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.

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

Scrolling not working with keyboard in AutoComplete #2220

Closed
Lindsay-Mathieson opened this issue Jun 19, 2024 · 5 comments
Closed

Scrolling not working with keyboard in AutoComplete #2220

Lindsay-Mathieson opened this issue Jun 19, 2024 · 5 comments
Labels
triage New issue. Needs to be looked at

Comments

@Lindsay-Mathieson
Copy link

Lindsay-Mathieson commented Jun 19, 2024

🐛 Bug Report

When an auto complete has many items in its drop down, which require scrolling to access, using the keyboard down arrow to navigate down the list causes the selection bar to vanish below the list viewport. Scrolling with the mouse works fine

💻 Repro or Code Sample

The Many Items sample from the demo site

https://www.fluentui-blazor.net/Autocomplete#manyitems

🤔 Expected Behavior

After opening the autocomplete dropdown, using the down arrow to move down the list should cause scrolling when the selection bar hits the bottom of the dropdown pane

😯 Current Behavior

The selected row moves out of sight. Using the Up arrow brings it back into sight.

💁 Possible Solution

🔦 Context

I'm developing a data entry page for customers in a WPF Blazor app which needs to be keyboard accessible.

🌍 Your Environment

  • Windows desktop, Webbrowser
  • WebView2 in a a windows WPF App, Edge (Windows)
  • .NET 8, FluentUI 4.8, 4.7.2
@microsoft-github-policy-service microsoft-github-policy-service bot added the triage New issue. Needs to be looked at label Jun 19, 2024
@dvoituron
Copy link
Collaborator

Except for reducing the number of filtered values or adding a style to increase the height of the popup, we don't yet have a solution.

.fluent-autocomplete-multiselect div[role=listbox] {
  max-height: 400px;
}

@Lindsay-Mathieson
Copy link
Author

Except for reducing the number of filtered values or adding a style to increase the height of the popup, we don't yet have a solution.

Ah, thanks, good to know. It's not a huge issue for us as they can use the mouse or as you say reduce the items. I'll look into alternative dropdowns, fluentui certainly does have many of them!

@dvoituron
Copy link
Collaborator

I've found a solution to this problem. It will be included in the next version.
See #2221

@Lindsay-Mathieson
Copy link
Author

I've found a solution to this problem. It will be included in the next version. See #2221

Brilliant, thankyou

@Lindsay-Mathieson
Copy link
Author

Can confirm this is fixed in 4.9, thank you so much!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
triage New issue. Needs to be looked at
Projects
None yet
Development

No branches or pull requests

2 participants