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

171–180 of 227 posts

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

#171

Post by bob1029 »

extra88 wrote: post #162
nedt wrote: post #152

Earlier quoted context omitted.

Oh the combobox element in the WAI ARIA is interesting. On mobile the dropdown can‘t be scrolled without scrolling the page (and the user losing where they were in the form). Also the tap targets are smaller. And there even is a combobox in HTML5. It‘s an input with a list attribute.

Do you mean ? It doesn't meet all use cases (especially if what needs to be listed requires dynamic updating) but browser support slowly has gotten better. Unfortunately, I recently heard that all the major browsers fail to resize the datalist text on zoom (my guess is it's rendered outside the DOM, like the browser's UI). Bug report for Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1756203

Datalist has some unfortunate UX quirks in my experience. Trying to view the list of available items after you have already selected one is not possible on the browsers I used this week. A select will allow you to view the list regardless of the current value.

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

#172

Post by dillondoyle »

nine_k wrote: post #137
crooked-v wrote: post #132

Earlier quoted context omitted.

Now make that a set of 200 checkboxes and see how practical it is compared to one combobox-style multi-select input.

200 checkboxes make about as much sense as a 200-item dropdown. Neither is manageable. The multi-select dropdown is additionally hard to check for the selections made. An input box with pill-style auto-completion (see e.g. the tags control on Stackoverflow) would be a reasonable alternative. Another, larger alternative is the typical two-lists control, with selected items moved from the source list to the target list…

I like the pattern of drop downs where you can type to filter. But I've found there isn't great UI in that it's not super obvious you can type.

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

#173

Post by nkrisc »

crooked-v wrote: post #132
nine_k wrote: post #129

Earlier quoted context omitted.

A separate multi-select control is just a bad idea from 1990s; it should be disused and forgotten. The proper way is a list of checkboxes. Checkboxes are easy to recognize, easy to style, and easy to navigate and operate.

Now make that a set of 200 checkboxes and see how practical it is compared to one combobox-style multi-select input.

If your UI has 200 checkboxes displayed at once, in an ideal world you’re rethinking your requirements and redesigning the UI.

The only way to make a 200 item select box usable is to make it not a 200 item select box somehow.

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

#174

Post by bil7 »

dillondoyle wrote: post #172
nine_k wrote: post #137

Earlier quoted context omitted.

200 checkboxes make about as much sense as a 200-item dropdown. Neither is manageable. The multi-select dropdown is additionally hard to check for the selections made. An input box with pill-style auto-completion (see e.g. the tags control on Stackoverflow) would be a reasonable alternative. Another, larger alternative is the typical two-lists control, with selected items moved from the source list to the target list…

I like the pattern of drop downs where you can type to filter. But I've found there isn't great UI in that it's not super obvious you can type.

I was actually implementing exactly this today in Angular and went with a

https://v5.material.angular.io/components/autocomplete/overv...

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

#175

Post by Waterluvian »

Number inputs have given me the most pain. The trick is that you need to manage two states: the current string state of the input and the most recent valid number state or null or NaN or whatever you want.

The issue being that there’s many valid numbers that aren’t always parsable numbers as a human types them in (because of decimal or negative, etc.)

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

#176

Post by hn_throwaway_99 »

5350-uiop-1130 wrote: post #122
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 web is really a horrible platform to build any kind of high fidelity app. you can say it works despite of itself. and this is by design, web as a platform is pretty much owned by tech giants like google and apple who have a financial interest in keeping the web from becoming a rich platform which would cut into their app store hegemony. ironic when you consider iphone and the html 5 back story. in some respects m…

> and this is by design, web as a platform is pretty much owned by tech giants like google and apple who have a financial interest in keeping the web from becoming a rich platform which would cut into their app store hegemony.

Google is guilty of plenty of things, but holding back the web as a first rate development platform is not one of them, and I think the blame falls squarely on Apple's shoulders here.

Just look at what you can do with a PWA on Android. Most importantly, unlike on iOS, you can receive push notifications. But you can also do things like ship a PWA directly to the Play Store, access all sorts of native browser libraries like Bluetooth support and Add to Home Screen.

If you look at non-gaming apps, I'd estimate about 90% of them could be straightforwardly implemented as PWAs. The reason they're not is due to deliberate decisions by Apple not to support the tech that would make that possible, like push notifications.

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

#178

Post by s17n »

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'd put the blame on designers, since the "modern design" that you are referring to is terrible. We'd all be better off if the web still looked like 2004, and the users would be fine with it too - they only care about "modern design" as a proxy for "this is an actively maintained product".

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

#179

Post by Shared404 »

kreetx wrote: post #160
Shared404 wrote: post #154

Earlier quoted context omitted.

I actually really dislike this. I find that I often have half second hangups due to not remembering if in select mode or not. Much prefer the "Hold shift/ctrl" model used often in file managers.

Parent is talking about mobile. And on Android it's working rather well I'd say. The only downside I see is that selecting longer spans (shift click) is not possible.

In the context of the parents comment I thought they were comparing that model to others where multi selct exists.

I don't think there is a much better model on mobile, except possibly adding a button to each item to select a longer span.

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

#180

Post by wellthisishn »

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…

Try Tom Select: https://tom-select.js.org/examples/

Any initial impressions on that one?

Post reply on HN