ReviewOS

stacks/stx

Form controls: Select/Textarea/NumberInput have no v-model, Select options cannot come from the client, and TextInput is always type="text"

#2059
Closed chris opened this 9 days ago ·
9 days ago

Re-measured the form controls in an app (hq.training, 287 controls) on 0.2.459, now that #1976 is fixed. Dark mode is right, and with the app's role and shape tokens set they draw in its palette with its corners. Three things still keep them out of an ordinary form.

1. Select, Textarea and NumberInput have no two-way binding

TextInput and Switch use useModel (#1965), so v-model:value="name" keeps a page's signal in step. Select, Textarea and NumberInput take value one way and emit change/input, so every call site has to write the handler back by hand:

<Select :value="group()" @change="group.set($event)" … />

against the native control's :model="group". Across a few hundred fields that is a few hundred chances to bind one way and not the other.

2. Select cannot take its options from the client

options is read in <script server> and rendered with @foreach. A list that arrives with the page's data, which is most of them (an athlete's groups, a coach's plans, a gym's rooms), is not known at render time, so the select renders with only its placeholder. There is no <option> slot to fall back on. Measured: <Select :options="labOptions"> with labOptions a client constant renders one option, "Select an option".

3. TextInput is always type="text"

type is hard-coded. EmailInput, PasswordInput, NumberInput and SearchInput exist, but there is nothing for date, time, datetime-local, url, tel or color, and no min/max/step/pattern/list. A form with a date in it has to mix library and native controls, which is the inconsistency the library is meant to remove.

Suggested

  • useModel('value', …) in Select, Textarea and NumberInput, the same as TextInput.
  • Select options reactive on the client (a useReactiveProp/useModel over options), plus a default slot for <option> children.
  • A type prop on TextInput for the remaining text-like types, and pass-through of min, max, step, pattern, list and maxlength.

Sign in to comment on this issue.