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

61–70 of 227 posts

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

#61

Post by Klaster_1 »

obpe wrote: post #10

I have implemented many custom form controls. The reason is almost always because the design requires it. But other reasons can be to "improve" the control; for the select box to make the invisible edit buffer visible. I appreciate this is not the way but it is also pretty annoying how limited the styling, and customization, of form controls is. We use Angular so it's pretty easy to hide the custom control and have a…

The UI designers I had worked with do not have much experience working with the web platform as a user or developer, are not aware of capabilities default controls provide and almost never use the products they've designed. Additional exposure of UI compared to under-the-hood stuff begs for additional bikeshedding and micromanagement by people who understand this even less, like management. Maybe I never met good a designer or worked in a company with sane process.

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

#62

Post by mattwad »

lol768 wrote: post #59
msoad wrote: post #45

It's such a blanket statement to say "you can't". Those controls themselves are coded up mostly using JavaScript so it is defiantly possible. It just requires a lot of work. The most accessible component library that I've seen is Adobe Spectrum React[1] which supports all of those nuances mentioned here for all of their controls and allow for styling and customization. [1] https://react-spectrum.adobe.com/react-spect…

> supports all of those nuances mentioned here for all of their controls and allow for styling and customization I don't believe it. Just tried the picker https://react-spectrum.adobe.com/react-spectrum/Picker.html and within 30 seconds you can find divergences from the browser's behaviour. The invisible input field behaviour Drew mentions in the article doesn't work. If I hit backspace, my browser doesn't know I'm i…

Nor should we want to! I have spent a week trying just to make my forms screen-reader-friendly and it is very hard, especially if you're using a library already to build the components. But the reason I know it won't work is that all my changes look like weird hacks and are bound to be immediately broken by the next person to work on them that's not using a screenreader.

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

#63

Post by codeptualize »

This is not helpful imo. Although it correctly identifies a problem of badly implemented controls. The explanation and solution show a lack of knowledge and understanding about the topic and current situation.

It's easy to say "use just the browser provided controls" until you actually have to build something that people need to use. What is expected today from even a simple form involves a lot of custom behavior that browsers do not provide, at what point is it "custom"? Advising against that will not help things become more usable nor accessible.

Instead of "just don't do it", I suggest to promote caring about usability and accessibility, and make people realize it should be evaluated for each individual situation and give practical information on how to do that.

Very basic practical advice; Use native elements where possible, if you run into their limitations preferably use an existing well build and maintained alternative that does implement all of the intricate details. Building something completely custom should be a last resort, if you do end up in that situation it's often beneficial to build it on top of something else.

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

#64

Post by karaterobot »

> Making a custom form control with JavaScript is going to make life worse for a lot of people. Just don’t do it. The browser’s built-in controls are quite sufficient.

An extremely common use case at the last two companies I've worked at is a multi-select dropdown with autosuggest. Optionally, new items can be added to the list. Sometimes we needed to use ajax to populate the list, because you were searching 25,000+ items. We used this control in 10-15 different places, usually inside a spreadsheet cell. Which built-in controls should I use for this? I agree with the author that it is difficult to implement.

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

#65

Post by shadowgovt »

codeptualize wrote: post #63

This is not helpful imo. Although it correctly identifies a problem of badly implemented controls. The explanation and solution show a lack of knowledge and understanding about the topic and current situation. It's easy to say "use just the browser provided controls" until you actually have to build something that people need to use. What is expected today from even a simple form involves a lot of custom behavior tha…

Agreed. I think about custom controls like I think about cryptography libraries: most hackers aren't specialized enough to have thought through all the corner cases and unless you want that to be your specialty, you're taking on a lot of risk of blowing your own leg off (metaphorically speaking) trying to hack out a solution instead of using something (ideally) well-maintained and with some history behind it.

(Having had some experience working on custom controls in a browser: it's the kind of project that will occupy a three-person team at a Fortune-500 full-time over multiple quarters to get right. Set your expectations accordingly.)

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

#66

Post by withinboredom »

codeptualize wrote: post #63

This is not helpful imo. Although it correctly identifies a problem of badly implemented controls. The explanation and solution show a lack of knowledge and understanding about the topic and current situation. It's easy to say "use just the browser provided controls" until you actually have to build something that people need to use. What is expected today from even a simple form involves a lot of custom behavior tha…

I’ve used browser controls for the last 20 years on any form I’ve ever implemented. These days you get validation errors, accessibility, and so much more for free — even if JavaScript is turned off. I can’t think of a reason you’d ever want to use a custom control on a form.

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

#67

Post by lhorie »

egeozcan wrote: post #48
cookiengineer wrote: post #43

Earlier quoted context omitted.

How about some checkboxes and labels with the for attribute then?

Which becomes a nightmare to look at with no styling: https://jsfiddle.net/wdqjyvsu/ and then it gets complicated very quickly: https://jsfiddle.net/wdqjyvsu/1/ You also have still undiscovered problems: How to let people filter the options if you have lots of them (and don't say ctrl+f because it doesn't restrict the search within the element)? What about lazy-loading if you have lots and lots and lots of them? Usab…

No offense, but this feels like trying too hard to make the argument that a perfectly normal pattern is somehow too obtuse to be considered.

I'm guessing you're trying to argue that something like a pill autocompleter is more appropriate for specific use cases (e.g. the `to:` field in email clients). And sure, sometimes some controls are better suited than others depending on the use case, but that doesn't necessarily mean that it's impossible to implement similarly complex controls by leveraging standard controls as opposed to reinventing headless behaviors on top of div soup[0]

[0] https://codepen.io/lhorie/pen/xxPJpeB

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

#68

Post by Uehreka »

K0nserv wrote: post #60
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.

You don’t have to style the select. If you are being forced to, your designers are either incompetent or ignorant. Aesthetics shouldn’t trump usability

By this logic, almost every designer is incompetent or ignorant. Styling form elements is not an extreme position, even if you might want it to be.

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

#69

Post by egeozcan »

lhorie wrote: post #67
egeozcan wrote: post #48

Earlier quoted context omitted.

Which becomes a nightmare to look at with no styling: https://jsfiddle.net/wdqjyvsu/ and then it gets complicated very quickly: https://jsfiddle.net/wdqjyvsu/1/ You also have still undiscovered problems: How to let people filter the options if you have lots of them (and don't say ctrl+f because it doesn't restrict the search within the element)? What about lazy-loading if you have lots and lots and lots of them? Usab…

No offense, but this feels like trying too hard to make the argument that a perfectly normal pattern is somehow too obtuse to be considered. I'm guessing you're trying to argue that something like a pill autocompleter is more appropriate for specific use cases (e.g. the `to:` field in email clients). And sure, sometimes some controls are better suited than others depending on the use case, but that doesn't necessaril…

Your implementation has a lot of accessibility problems AND requires javascript AND doesn't work on firefox mobile.

Also: Congratulations, we collectively proved the article wrong. It says, "The browser’s built-in controls are quite sufficient". Here we see that you usually can't "just use standard controls", and even when you do, you need a lot of JS on top to make them accessible, usable, nice to look at with an acceptable API.

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

#70

Post by throw_m239339 »

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.
Post reply on HN