Custom JavaScript controls can't capture the nuance of form fields (2021)
1–10 of 227 posts
Re: Custom JavaScript controls can't capture the nuance of form fields (2021)
#2I wish more development went into form widgets. A big thing is also that they're accessible and responsive by default.
One that I would love would be some sort of drag and drop reorderable list, for example.
Re: Custom JavaScript controls can't capture the nuance of form fields (2021)
#3This is true, but the set of custom controls is quite small. Controls that were built-in to, say, Visual Basic 4.0 in 1995 are not present in today's web browsers.
Re-implementing built-in controls (the example of a box is given in the OP) is obviously a very bad idea in almost all circumstances. Implementing a missing control is a much more difficult decision, and there are times when it can be a defensible choice to do so.
Re: Custom JavaScript controls can't capture the nuance of form fields (2021)
#4Lots of people have been saying this for years, and accessibility voices are now being heard as well. It's extremely difficult to create a proper form control and remember all the usage patterns and all the edge cases.
However, people want more than just the 6 or so controls defined in the 1990s. Even w3c in their design system relies on a third-party autocomplete: https://design-system.w3.org/third-party-plugins/
The reason? Browser implementors rarely solve actual issues that are truly desired by most people. Because browser implementors are low-level C/C++ developers who rarely touch actual web development. So we get 41 distance units, and horrendously bad APIs like Service Workers and Custom Elements, and piles of things like Ambient light sensors [1]. But for all the hype and advertisement around web applications we don't really get things that actually make it easy to, you know, develop these applications. Google Docs is transitioning to canvas and Figma reimplemented half of the browser in WebGL not because web platform is so great.
There's now the https://open-ui.org project that collects common UI patterns that have been endlessly re-implemented across countless frameworks and libs. It will be another 40 years before any of them become a reality.
[1] Yes, it's a thing: https://chromestatus.com/feature/5298357018820608
Re: Custom JavaScript controls can't capture the nuance of form fields (2021)
#5I was wondering about this, too.
> 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.
For my self-hosted minimal CRM (not really ready for anybody except me yet) [Aktenkoffer](https://github.com/svkurowski/aktenkoffer), I created a custom select that allows for filtering/searching of contacts when choosing sender/recipient for a given document. I don't use browser's select because:
1. There's a lot of contacts one has, and the list will become very long, a usecase for which select seems not to be the best fit, i.e. I don't want to load all the options always. 2. I cannot always remember how I formatted a contact name - e.g did I include the "Dr." at the beginning or not. Select quick-selection only works when I know exactly the sequence of characters I'm looking for (like the US state selection the author mentioned).
Obviously it has tons of feature gaps, I.e. pressing Esc does not close it (yet), up-and-down arrows don't work (yet), one cannot just type to go to one option.
Any suggestions, what to do in such a case? And how I can learn more about such approaches?
I love sourcehut, and its design and I would like to follow a closer to the browser, minimal UI but in practice it seems quite hard for me - harder than getting a custom select "half-right".
Re: Custom JavaScript controls can't capture the nuance of form fields (2021)
#6The best unit of isolation for web functionality is behaviors, not controls. Think of them as traits enabled and configured via attributes. I've used such things on many different projects with very good results. The main advantage is that if you design them properly it is trivial to extend built-in functionality without reinventing the flat tire.
Re: Custom JavaScript controls can't capture the nuance of form fields (2021)
#7I'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.
Re: Custom JavaScript controls can't capture the nuance of form fields (2021)
#8The best unit of isolation for web functionality is behaviors, not controls. Think of them as traits enabled and configured via attributes. I've used such things on many different projects with very good results. The main advantage is that if you design them properly it is trivial to extend built-in functionality without reinventing the flat tire.
Interesting, care to expand on behaviors vs controls?
Re: Custom JavaScript controls can't capture the nuance of form fields (2021)
#9For text inputs and select dropdowns, yes, we take them for granted because the simple case is simple -- but there really is so much complexity in keyboard navigation and interaction. Reaching parity in a JS implementation would be a serious undertaking and would usually not be the right thing to do.
However, there are some controls, like date and color inputs, whose browser implementations are both inconsistent and severely UX-challenged such that no professional web site/app would really be able to use them in production. For these, in 2022, we still have no choice but to build custom implementations in order to meet usually expectations.
Re: Custom JavaScript controls can't capture the nuance of form fields (2021)
#10I 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 plain control for accessibility. At least for checkbox and radio inputs, am I the only one that uses a hidden input to control the style of some div to make it look fancy like the design required?