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

[Widget] Dropdown should be able to capture keystrokes to quick select desired value #11966

Open
srirambv opened this issue Oct 2, 2020 · 2 comments

Comments

@srirambv
Copy link
Contributor

srirambv commented Oct 2, 2020

Description

In the current implementation of widgets, dropdown list doesn't capture keystrokes to select a value. Since the dropdown is quite small, selecting values from the dropdown list can cause some uncomfortable scrolling and clicking to select the value. Keystrokes should be captured to make it easy to just type in and auto-select value

Steps to Reproduce

  1. Open any widget which has a dropdown
  2. Try to type in to select the desired value
  3. Doesn't work

Actual result:

Dropdown should be able to capture keystrokes to quick select desired value

Expected result:

Should capture keystrokes to make selection easier

Reproduces how often:

Easy

Brave version (brave://version info)

All

Version/Channel Information:

  • Can you reproduce this issue with the current release? Yes
  • Can you reproduce this issue with the beta channel? Yes
  • Can you reproduce this issue with the nightly channel? Yes

Other Additional Information:

  • Does the issue resolve itself when disabling Brave Shields? NA
  • Does the issue resolve itself when disabling Brave Rewards? NA
  • Is the issue reproducible on the latest version of Chrome? NA

Miscellaneous Information:

@srirambv srirambv mentioned this issue Oct 2, 2020
32 tasks
@ryanml ryanml self-assigned this Oct 9, 2020
@ryanml ryanml added the priority/P4 Planned work. We expect to get to it "soon". label Oct 9, 2020
@ryanml ryanml removed their assignment Nov 2, 2020
@rebron
Copy link
Collaborator

rebron commented Jan 29, 2021

cc: @AlanBreck When you get a chance, take a look as we're implementing drop down lists for Crypto.com v2.

@AlanBreck
Copy link

The reason that this isn't capturing keyboard input is because we're not using a <select> element, therefore we'd have to build in any sort of keyboard capturing ourselves rather than leverage native browser functionality. Unfortunately, <select> doesn't give us ample styling opportunities for the options, we'd have to go one of two directions:

  1. Build our own version of a <datalist> type functionality which has a text box the user enters to filter through a list: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist
    Note: here again, we can't use the native <datalist> element, but we would recreate something like this.

  2. We don't add an input field and instead create our own way of capturing keyboard events to auto select list items. See really rough example here: https://nsfw8.csb.app/

cc @jamesmudgett @rebron

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants