Hacker News Reader

Comment by nick238 | Hacker News Reader

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.

View on HN

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.

> 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.

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.

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".

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.

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-mo...). Still doesn't support type-to-select, or god knows how many other accessibility and power user niceties.

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.

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

You could organize your playlist in folders. Not a solution but that might make it bearable :P

what does this have to do with form fields? edit: I see you think that context menus are form fields. Thats incorrect.

It's not about form fields, it's about type-to-select. No one said anything about context menus being the same as form fields.

did you read the article? the context of this entire thread is about form fields.

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

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

Numbers vs. names for months is a legit casus belli

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.

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)

Reply on news.ycombinator.com