Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Custom JavaScript controls can't capture the nuance of form fields (2021)

drewdevault.com

Post reply on HN
Print view View original

101–110 of 227 posts

Re: Custom JavaScript controls can't capture the nuance of form fields (2021)

#101

Post by Phelinofist »

Aachen wrote: post #36
nick238 wrote: post #16

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.

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 t…

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

Re: Custom JavaScript controls can't capture the nuance of form fields (2021)

#102

Post by egeozcan »

lhorie wrote: post #94
egeozcan wrote: post #82

Earlier quoted context omitted.

I'm arguing that you DO need custom controls. Did you read the thread?

Of course I did. You're the one going on about unstyled elements and whatnot? The article is about subtle behaviors that come built into standard UI elements. My point is you can get those behaviors from leveraging these elements instead of literally writing custom code to handle a series of keypresses in a div-soup-based -lookalike. As far as I can tell, nobody here is arguing for things like no-JS no-CSS solutions.…

Ah, okay now I get the subtlety, I stand corrected.

I'd still argue that there are times that you do have to use completely custom controls, like the case with the date-pickers. Not only because you cannot style them, but they also have a lot of API constraints, and accessibility problems. Even the example in the article, the beloved text area, has a lot of constraints like it's quite cumbersome to get the selection coordinates and it's impossible to offer any highlighting, so welcome to the world of contenteditable!

I completely agree that we should try to compose the native UI controls instead of reinventing the wheel when possible (like the text-input for that date-picker modal).

Re: Custom JavaScript controls can't capture the nuance of form fields (2021)

#103

Post by mmis1000 »

nick238 wrote: post #16

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.

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.

Re: Custom JavaScript controls can't capture the nuance of form fields (2021)

#104

Post by mdoms »

mihaic wrote: post #7

I'd actually put the blame here on browsers, and how limited the default inputs are. There are too many needlessly reimplemented components, but anyone that has ever needed to style a to make it look in line with any modern design quickly reached desperation. I'd love to be able to use standard components everywhere, but most of my users care if my website looks like it's from 2004.

> anyone that has ever needed to style a

No one has ever, in the history of software, NEEDED to style a . You want to style a select. Your users don't give a toss.

Re: Custom JavaScript controls can't capture the nuance of form fields (2021)

#105

Post by mmis1000 »

throw_m239339 wrote: post #70
mihaic wrote: post #7

I'd actually put the blame here on browsers, and how limited the default inputs are. There are too many needlessly reimplemented components, but anyone that has ever needed to style a to make it look in line with any modern design quickly reached desperation. I'd love to be able to use standard components everywhere, but most of my users care if my website looks like it's from 2004.

I agree 100%. and the fact that there are still only a handful of form controls is just jarring. The people who champion using JS frameworks to make up for the lack of form elements are contributing to the problem, especially on mobile. No library, not even well tested JS ones can make up for the native controls. This is why users do prefer mobile native apps.

Imagine a custom implemented drop down that just goes out of the screen and make you unselectable. Let alone the item height are just narrow that make you accidentally click something next to it. And yea, that happens all the time.

And as a developer I often need to argue with the designer that please just don't use dropdown on mobile ui when there are many items. That is just a torture for a phone user.

And sometimes I even need to add hidden area to the ui. Because the controls are way too tiny to click.

Usability are not really in their mind., Or probably it is just a bad designer.

Re: Custom JavaScript controls can't capture the nuance of form fields (2021)

#106

Post by yoz-y »

mdoms wrote: post #104
mihaic wrote: post #7

I'd actually put the blame here on browsers, and how limited the default inputs are. There are too many needlessly reimplemented components, but anyone that has ever needed to style a to make it look in line with any modern design quickly reached desperation. I'd love to be able to use standard components everywhere, but most of my users care if my website looks like it's from 2004.

> anyone that has ever needed to style a No one has ever, in the history of software, NEEDED to style a . You want to style a select. Your users don't give a toss.

That’s untrue. As long as the UI works, people will prefer a nicely looking one.

Re: Custom JavaScript controls can't capture the nuance of form fields (2021)

#107

Post by lhorie »

egeozcan wrote: post #102
lhorie wrote: post #94

Earlier quoted context omitted.

Of course I did. You're the one going on about unstyled elements and whatnot? The article is about subtle behaviors that come built into standard UI elements. My point is you can get those behaviors from leveraging these elements instead of literally writing custom code to handle a series of keypresses in a div-soup-based -lookalike. As far as I can tell, nobody here is arguing for things like no-JS no-CSS solutions.…

Ah, okay now I get the subtlety, I stand corrected. I'd still argue that there are times that you do have to use completely custom controls, like the case with the date-pickers. Not only because you cannot style them, but they also have a lot of API constraints, and accessibility problems. Even the example in the article, the beloved text area, has a lot of constraints like it's quite cumbersome to get the selection…

Yeah I can see why people get torn on date pickers. This was especially egregious back when they weren't as well supported/implemented across different browsers. The problem with them, as some people alluded in some comments, is that often times when people reinvent that wheel, they do an objectively worse job at it.

Because of my bad experience with these poorly implemented controls in the wild, these days I quite appreciate the way the inputs appear on mobile (i.e. it's a completely different UI than desktop that optimizes against fat fingering/tiny hit areas/etc). Certainly beats implementations that rely on trapping input events and rewriting `input.value` on a plain text input...

Re: Custom JavaScript controls can't capture the nuance of form fields (2021)

#108

Post by SPBS »

mihaic wrote: post #7

I'd actually put the blame here on browsers, and how limited the default inputs are. There are too many needlessly reimplemented components, but anyone that has ever needed to style a to make it look in line with any modern design quickly reached desperation. I'd love to be able to use standard components everywhere, but most of my users care if my website looks like it's from 2004.

What kind of CSS do you need to add to ? Do you have an example of this modern design?

Re: Custom JavaScript controls can't capture the nuance of form fields (2021)

#109

Post by cycomanic »

egeozcan wrote: post #37
mihaic wrote: post #7

I'd actually put the blame here on browsers, and how limited the default inputs are. There are too many needlessly reimplemented components, but anyone that has ever needed to style a to make it look in line with any modern design quickly reached desperation. I'd love to be able to use standard components everywhere, but most of my users care if my website looks like it's from 2004.

The problem is not just styling, but usability, the API, and even accessibility too. Example, a multi-select, see https://jsfiddle.net/z0Ltxh47/1/ : Usability is bad because I can't select multiple non-consecutive items by using just my mouse. It's very narrow by default, and doesn't allow me to resize. API: Your typical HTMLInputElement.value doesn't give me all the selected values. I need to map the .selectedValues…

What is the problem exactly seems to work fine on Firefox mobile

Re: Custom JavaScript controls can't capture the nuance of form fields (2021)

#110

Post by com2kid »

marcosdumay wrote: post #76
egeozcan wrote: post #37

Earlier quoted context omitted.

The problem is not just styling, but usability, the API, and even accessibility too. Example, a multi-select, see https://jsfiddle.net/z0Ltxh47/1/ : Usability is bad because I can't select multiple non-consecutive items by using just my mouse. It's very narrow by default, and doesn't allow me to resize. API: Your typical HTMLInputElement.value doesn't give me all the selected values. I need to map the .selectedValues…

To be fair, multi selection is a disaster on any platform. It is a hard concept that isn't completely solved by any of the standard GUI widgets.

Hilariously, lots of good implementations on mobile. Long tap to start, checkbox next to each item that is then selected. Confirm button when done selecting.
Post reply on HN