6 ms·

It's suuuper annoying when the type-to-pick-dropdown doesn't work. Mildly annoying for US states, I live in Illinois, so when it flashes "Idaho", "Louisiana", o

It's suuuper annoying when the type-to-pick-dropdown doesn't work. Mildly annoying for US states, I live in Illinois, so when it flashes "Idaho", "Louisiana", oh boy. These are usually the forms that then have a 'fake' dropdown for credit card expiration dates, so I can't type-to-pick the month/year either.

grishka 5y ago
Bonus points for when the month is the name of the month.
- vsareto 5y ago
  Numbers vs. names for months is a legit casus belli
  - grishka 5y ago
    For credit cards though it's not — your card has the expiration month as a number on it. The form should take a number so you don't have to pause for several seconds to convert one to the other.
Aachen 5y ago
Spotify custom implemented this for their desktop client. You could right click on a song, open the submenu "add to playlist", and type a few characters. Idk why they bothered custom implementing that when a select list is a standard element no matter what framework they use, but I was happy. Then cometh the update and the feature be regressed. I now need to use the mouse for literally everything, including looking through this list with no discernable sorting (it's not alphabetical). Only spacebar for play/pause survived, all other keyboard controls seem gone or I can't guess them. Just use normal components. Save the effort, help the screen reader, please the power user. Please.
- marcellus23 5y ago
  Ugh, Slack too. For ages they didn't have right-click menus anywhere. Then a while ago, they added right-click menus to channels, but of course they couldn't just use the native menus that every OS already has, so it's some HTML abomination that had to rewrite the wheel for handling things like lenient mouse movement (e.g. https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/ https://css-tricks.com/dropdown-menus-with-more-forgiving-mo...). Still doesn't support type-to-select, or god knows how many other accessibility and power user niceties.
  - easrng 5y ago
    I don't know if Electron has an API for menus, but the HTML elements that let you add items to the native contextmenu were scrapped, and every browser I know of renders their own menus on Windows/Linux anyway. There is not a way to add a native contextmenu unless you do something cursed like positioning an invisible <select> where the mouse is and opening it on right click. Edit: Never mind, there is no way to open a <select> with JS.
    - marcellus23 5y ago
      I know, but other Electron apps manage to do it (VS Code, Postman), so there must be a way. edit: some quick googling reveals there is an API for this https://www.electronjs.org/docs/latest/api/menu#class-menu https://www.electronjs.org/docs/latest/api/menu#class-menu
- Phelinofist 5y ago
  You could organize your playlist in folders. Not a solution but that might make it bearable :P
- stereocodes 5y ago
  what does this have to do with form fields? edit: I see you think that context menus are form fields. Thats incorrect.
  - 5y ago
thfuran 5y ago
As long as it's not one of the sites that truncates passwords differently at signup and at login, I can probably manage.
mmis1000 5y ago
As a chinese user, I don't know this function until now. Character in chinese requires multi keystroke. And the IME won't be even triggered when you are not focusing a text field, render the whole function useless. So, a common pattern here is "use combobox instead". Because combobox has a working input field build-in, make it usable with chinese. But.... the HTML don't have combobox build-in, so you end up get one in literally any ui framework or a handwritten one if you really don't want to use framework.
- bmn__ 5y ago
  > HTML don't have combobox build-in Yes, it does. Supported in browsers since 2010, specified earlier. You have not taken the time to research this topic. <input list="administrative_areas" name="PRC_AA" /> <datalist id="administrative_areas"> <option value="华北"> <option value="东北"> <option value="华东"> <option value="中南"> <option value="西北"> <option value="西南"> </datalist> Type `南` to test.
  - 8n4vidtmkvmk 5y ago
    It's not very good tho. It offers some autocomplete suggestions once you type the first character, but there's no indicator that there's a hidden list there. It seems if you double click on the input you can pull up the full list, but no one would know that.
  - mmis1000 5y ago
    I think this don't really work as a combo box on firefox, more like auto complete. It is some what a replacement on chrome, because chrome decide to show it with arrow point to bottom. And in both firefox and chrome. It don't even have a indicator display by default to tell you "you are supposed to select it, not type it" or "Type yourself is invalid, you need to use predefined options".
sandruso 5y ago
I just figured out one thing: when delay between keystrokes is < 100ms or less the search through options works and it will highlight Illinois. (Chrome)

grishka 5y ago

Bonus points for when the month is the name of the month.

vsareto 5y ago
Numbers vs. names for months is a legit casus belli
- grishka 5y ago
  For credit cards though it's not — your card has the expiration month as a number on it. The form should take a number so you don't have to pause for several seconds to convert one to the other.

Aachen 5y ago

Spotify custom implemented this for their desktop client. You could right click on a song, open the submenu "add to playlist", and type a few characters. Idk why they bothered custom implementing that when a select list is a standard element no matter what framework they use, but I was happy. Then cometh the update and the feature be regressed. I now need to use the mouse for literally everything, including looking through this list with no discernable sorting (it's not alphabetical). Only spacebar for play/pause survived, all other keyboard controls seem gone or I can't guess them. Just use normal components. Save the effort, help the screen reader, please the power user. Please.

marcellus23 5y ago
Ugh, Slack too. For ages they didn't have right-click menus anywhere. Then a while ago, they added right-click menus to channels, but of course they couldn't just use the native menus that every OS already has, so it's some HTML abomination that had to rewrite the wheel for handling things like lenient mouse movement (e.g. https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/ https://css-tricks.com/dropdown-menus-with-more-forgiving-mo...). Still doesn't support type-to-select, or god knows how many other accessibility and power user niceties.
- easrng 5y ago
  I don't know if Electron has an API for menus, but the HTML elements that let you add items to the native contextmenu were scrapped, and every browser I know of renders their own menus on Windows/Linux anyway. There is not a way to add a native contextmenu unless you do something cursed like positioning an invisible <select> where the mouse is and opening it on right click. Edit: Never mind, there is no way to open a <select> with JS.
  - marcellus23 5y ago
    I know, but other Electron apps manage to do it (VS Code, Postman), so there must be a way. edit: some quick googling reveals there is an API for this https://www.electronjs.org/docs/latest/api/menu#class-menu https://www.electronjs.org/docs/latest/api/menu#class-menu
Phelinofist 5y ago
You could organize your playlist in folders. Not a solution but that might make it bearable :P
stereocodes 5y ago
what does this have to do with form fields? edit: I see you think that context menus are form fields. Thats incorrect.
- 5y ago

thfuran 5y ago

As long as it's not one of the sites that truncates passwords differently at signup and at login, I can probably manage.

mmis1000 5y ago

As a chinese user, I don't know this function until now. Character in chinese requires multi keystroke. And the IME won't be even triggered when you are not focusing a text field, render the whole function useless. So, a common pattern here is "use combobox instead". Because combobox has a working input field build-in, make it usable with chinese. But.... the HTML don't have combobox build-in, so you end up get one in literally any ui framework or a handwritten one if you really don't want to use framework.

bmn__ 5y ago
> HTML don't have combobox build-in Yes, it does. Supported in browsers since 2010, specified earlier. You have not taken the time to research this topic. <input list="administrative_areas" name="PRC_AA" /> <datalist id="administrative_areas"> <option value="华北"> <option value="东北"> <option value="华东"> <option value="中南"> <option value="西北"> <option value="西南"> </datalist> Type `南` to test.
- 8n4vidtmkvmk 5y ago
  It's not very good tho. It offers some autocomplete suggestions once you type the first character, but there's no indicator that there's a hidden list there. It seems if you double click on the input you can pull up the full list, but no one would know that.
- mmis1000 5y ago
  I think this don't really work as a combo box on firefox, more like auto complete. It is some what a replacement on chrome, because chrome decide to show it with arrow point to bottom. And in both firefox and chrome. It don't even have a indicator display by default to tell you "you are supposed to select it, not type it" or "Type yourself is invalid, you need to use predefined options".

sandruso 5y ago

I just figured out one thing: when delay between keystrokes is < 100ms or less the search through options works and it will highlight Illinois. (Chrome)