curveball / browser

A HAL browser middleware for node.js
MIT License
43 stars 5 forks source link

UX: Form field markup bug #144

Open ikbensiep opened 2 years ago

ikbensiep commented 2 years ago

Currently, selecting a form control can only be done by clicking or focusing the form control element itself; focusing the associated <label> element does nothing. This is particularly annoying for radio and checkbox inputs.

The <label> tags do have for='...' attributes, but the form controls all lack an id='...' attribute. (they are outfitted with name='...' attributes, but the input needs to have a matching id attribute for it to respond to a click on its <label> element. :cry: )

Suggested solution

add id attribute matching the name attribute on Form controls (<input>, <select>, <textarea> etc)

evert commented 2 years ago

Probably a good usecase for useId:

https://reactjs.org/docs/hooks-reference.html#useid