Skip to content

MudSelect: Enhance Keyboard Searching#10433

Merged
henon merged 13 commits intoMudBlazor:devfrom
Anu6is:7638-MudSelect-KeyboardDrivenSearch
Jan 8, 2025
Merged

MudSelect: Enhance Keyboard Searching#10433
henon merged 13 commits intoMudBlazor:devfrom
Anu6is:7638-MudSelect-KeyboardDrivenSearch

Conversation

@Anu6is
Copy link
Contributor

@Anu6is Anu6is commented Dec 12, 2024

Description

Enhances the use of the MudSelect when using the keyboard only

  • Initiate search without having to open the menu
  • Continuously cycle through matching search results (current behavior stops after one iteration)
  • Facilitate multi-character searching
    • Added QuickSearchInterval parameter to customize sensitivity (defaults to 0 - single character search)

Resolves #7638

How Has This Been Tested?

Unit tests and visually via docs

Type of Changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)
  • Documentation (fix or improvement to the website or code docs)

Checklist

  • The PR is submitted to the correct branch (dev).
  • My code follows the code style of this project.
  • I've added relevant tests.

…d initiates a search

- Cycle through matches
- Multi-character search
- Configurable search debounce
@github-actions github-actions bot added enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library PR: needs review labels Dec 12, 2024
@codecov
Copy link

codecov bot commented Dec 12, 2024

Codecov Report

Attention: Patch coverage is 91.30435% with 2 lines in your changes missing coverage. Please review.

Project coverage is 91.56%. Comparing base (85cad19) to head (aacb655).
Report is 3 commits behind head on dev.

Files with missing lines Patch % Lines
src/MudBlazor/Components/Select/MudSelect.razor.cs 91.30% 1 Missing and 1 partial ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##              dev   #10433      +/-   ##
==========================================
- Coverage   91.57%   91.56%   -0.01%     
==========================================
  Files         426      426              
  Lines       13311    13334      +23     
  Branches     2567     2571       +4     
==========================================
+ Hits        12189    12209      +20     
- Misses        548      549       +1     
- Partials      574      576       +2     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

Copy link
Member

@danielchalmers danielchalmers left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Few notes:

I don't think a SearchContext object is necessary if it's only initialized once and has two members.

I noticed if you get a letter wrong (in this case "Veru" instead of "Verm") it'll go to the next one:

Recording.2024-12-14.092320.mp4

If you spam the keyboard the page will lag for a few seconds

If you type a key there is a new delay because of the debounce. The selection should begin immediately on keydown, not after the debounce. The debounce property should also probably have a more specific name. It should also be more like 1s which I believe is the browser default (for accessibility)

The popover list should not appear after typing (to match native select behavior)

@henon henon requested a review from mckaragoz December 14, 2024 18:06
@Anu6is
Copy link
Contributor Author

Anu6is commented Dec 14, 2024

I noticed if you get a letter wrong (in this case "Veru" instead of "Verm") it'll go to the next one:

Yes, once a string search fails, there's a fallback to the character search and the standard cycling through results apply. That's how typing T -> T does Tennessee -> Texas add there are no valid results for TT

@danielchalmers would you like it to instead ignore the newly entered invalid character and search for Ver again (dropping the U)

@danielchalmers
Copy link
Member

I think every invalid character after a string of valid characters should be ignored and it shouldn't perform a new search until after the debounce.

  • Typing Ala selects Alabama. Typing s for Alas within the debounce selects the better match Alaska
  • Typing Alab selects Alabama. Typing s is ignored. Anything after this within the debounce is also ignored
  • Typing Ala selects Alabama. Typing Ala again AFTER the debounce selects the next match Alaska

I believe that's the behavior of the native select HTML component which is what I'm modeling it off.

@danielchalmers
Copy link
Member

I can't use keyboard shortcuts (including search) at all anymore on the SelectFocusAndTypeTest

@Anu6is
Copy link
Contributor Author

Anu6is commented Dec 17, 2024

I can't use keyboard shortcuts (including search) at all anymore on the SelectFocusAndTypeTest

Just pulled this down on my work machine.... all originally documented shortcuts and the updates work as expected.

Copy link
Member

@danielchalmers danielchalmers left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Working great on a different PC!

@danielchalmers
Copy link
Member

Will want to wait on @mckaragoz

@ScarletKuro
Copy link
Member

type
Should we make this change?

@mckaragoz
Copy link
Member

Will want to wait on @mckaragoz

Will look at in 2 days :)

@Anu6is
Copy link
Contributor Author

Anu6is commented Dec 19, 2024

type Should we make this change?

tbh, I'm not sure we need it ... would there really be a null select item?

@henon
Copy link
Contributor

henon commented Jan 6, 2025

type Should we make this change?

I also don't think so. default(T) for int would mean 0 and this could be problematic.

Copy link
Contributor

@henon henon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mckaragoz will you look at this shortly or shall we just merge it?

@mckaragoz
Copy link
Member

@Anu6is yes users use select item that hold null values. They already opened some issues about highlighted items when the value is null.

@mckaragoz
Copy link
Member

mckaragoz commented Jan 6, 2025

All the explained features are very smart. But i have 2 arguments:

  1. Actually im not in favor of multi-character search in select. It's more likely of autocomplete or combobox feature.

  2. Instead of open popover and search directly while press any key, what about never open popover and search and show the result directly on input? We already have space and enter keys to open popover for standard search. This advanced and direct search sounds like they designed for pro users. A pro user prefers not to open popover, when they press "a" it selects Alabama, when they pressed again, it selects Alaska. With this, they will save maximum time and fill a big form quickly. If we don't need enter key to open popover, we also should not have to press enter key to close popover.

@henon
Copy link
Contributor

henon commented Jan 7, 2025

  • Actually im not in favor of multi-character search in select. It's more likely of autocomplete or combobox feature.

This is a good point. Some might prefer single character search. We might have to make it configurable.

  • Instead of open popover and search directly while press any key, what about never open popover and search and show the result directly on input? We already have space and enter keys to open popover for standard search. This advanced and direct search sounds like they designed for pro users. A pro user prefers not to open popover, when they press "a" it selects Alabama, when they pressed again, it selects Alaska. With this, they will save maximum time and fill a big form quickly. If we don't need enter key to open popover, we also should not have to press enter key to close popover.

I checked with Native HTML Select and it seems to behave exactly like you prefer. Another valid point, I guess. But I can also see users wanting to have the behavior @Anu6is implemented in this PR.

So I guess we could add switches for both to MudGlobal.SelectDefaults. Something like bool MultiCharacterSearch { get; set; } and bool OpenDropdownOnSearch { get; set; } or similar, default values for both to be decided.

The question is, can it be switched easily without adding too much complexity?

@Anu6is
Copy link
Contributor Author

Anu6is commented Jan 7, 2025

@mckaragoz @henon
For multi-character search, the default for the debounce can be set to 0 which would essentially limit it to single character searches. If needed the parameter name could be updated or an additional remark can be added in the documentation (@henon)

Opening the select on any key press was to facilitate the search as the list of items is only available once rendered after opening. I can look into rendering the component in code instead of rendering in the UI.
Edit: _shadowLookup solves this

- allow searching without opening the popover
@sonarqubecloud
Copy link

sonarqubecloud bot commented Jan 7, 2025

@Anu6is
Copy link
Contributor Author

Anu6is commented Jan 7, 2025

Implemented changes suggested by @mckaragoz
@henon - The default is now single character search, setting a QuickSearchInterval will allow multi-character searches (xml documentation has been added)

@henon
Copy link
Contributor

henon commented Jan 8, 2025

@mckaragoz @henon For multi-character search, the default for the debounce can be set to 0 which would essentially limit it to single character searches. If needed the parameter name could be updated or an additional remark can be added in the documentation (@henon)

That's cool.

Opening the select on any key press was to facilitate the search as the list of items is only available once rendered after opening. I can look into rendering the component in code instead of rendering in the UI.

No need to dive deep into this. This technical limitation is enough a reason for the current behavior.

@henon henon merged commit 75070da into MudBlazor:dev Jan 8, 2025
6 checks passed
@Anu6is Anu6is deleted the 7638-MudSelect-KeyboardDrivenSearch branch January 22, 2025 13:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement Adds a new feature or enhances existing functionality (not fixing a defect) in the main library

Projects

None yet

Development

Successfully merging this pull request may close these issues.

MudSelect Tab and Type

5 participants