GrTreeSelect

<GrTreeSelect v-model="areas" :data="tree" multiple show-checkbox />

show-checkbox switches on the checkboxes of GrTree instead of a tick of its own: ticking a parent covers the subtree in a cascade, and a partly ticked parent is announced aria-checked="mixed". It works only together with multiple — in a single selection the current node is highlighted anyway.

The cascade is computed by the tree itself rather than by the select: a click on a row, a click on the square and Space go the same path, so there is no double toggling. check-strictly unties the parent from the children.

All of the ticked keys, the parent ones included, land in modelValue. If only the leaves are needed, switch check-strictly on and tick them yourself, or filter the value from the outside.

↓, ↑, Enter and Space on the trigger open the panel and move the focus into the tree — from there all of the keys of GrTree work. The panel is teleported into body, so Tab does not lead there and there is no other way inside.

With filterable the focus first goes into the search field (typing the filter is the first thing expected), and ↓/↑ from there lead into the tree. Tab out of the panel closes it, and Escape closes it and returns the focus to the trigger by the means of the shared layer stack.

The search is an auxiliary field of the panel rather than the control of a form field: the context of GrFormField (id, hint, error, required, invalid) goes to the trigger, while the search is named by its own filterPlaceholder and shows it while empty — under focus as well. The tree rows in the panel sit on the step of a control of the same size.

The trigger is a role="combobox" with aria-haspopup="tree" and an aria-controls on the tree while the panel is open. Referring to a tree that is not in the DOM (empty data, loading) is not allowed — in those states aria-controls is not output.

Inside GrFormField the control takes id, aria-describedby, aria-invalid and aria-required from the context; outside a field the accessible name is given by ariaLabel.

state="success" and "warning" show an icon and a hidden label that goes into the aria-describedby of the control: the colour of the border as the only carrier of meaning is WCAG 1.4.1, and these two states have no ARIA equivalent of aria-invalid. danger gets no icon — its meaning is already carried by aria-invalid and the error text from GrFormField — and the mark goes out as soon as the control is declared invalid.

disabled is coloured with a background and a text colour rather than with transparency: opacity dilutes tokens tuned to AA and drops the contrast. readonly leaves the value visible but removes both the clear button and the opening of the panel.

loading shows an indicator instead of “No data”: an empty answer and data that has not loaded must not look the same. The markup can be replaced with the #loading slot.

size is read through useGrComponentSize(), so both GrConfigProvider and a pointed componentDefaults.GrTreeSelect apply. The same size travels into the tree inside the panel — otherwise the control and its list would be set in different type sizes.

valueDisplay="path" in the single mode shows the path through / instead of a single label. With multiple the “first label +N” stays in the trigger by default; the full list is given to the #value slot — that is where any markup of your own is assembled.

tags (only together with multiple) shows the selection as chips instead of the “a, b, c” line. The cross on a chip removes its node without opening the panel. max-tag-count keeps the row to a single line: the remainder folds into “+N”. The look is configured with the same tagTone/tagDark/tagSize/tagRadius as in GrSelect — moving from one component to the other, the consumer does not relearn.

The height of the trigger does not follow the number of chips: without max-tag-count a long set goes past the edge. That is precisely its purpose, not an omission — a growing field would move the whole form under it on every selection.

The chips lie beside the trigger, not inside it: role="combobox" declares its descendants presentational, and a cross inside would be unreachable from the keyboard (axe: nested-interactive). The strip of chips is transparent to the pointer, while each chip is not: a click past a chip opens the panel, like any other place on the trigger.

In the show-checkbox mode removing a chip goes through the tree rather than by striking the key out: the cascade over parents and children is computed by GrTree, and removing a key past it could produce a ticked parent without a single ticked child.

The slots put an icon, a unit or a label into the shell; the width is bounded by six props (prefixMinWidth/prefixMaxWidth/prefixFixed and the same for the suffix). The shared contract of the controls — form-controls.md.

dropdownMaxHeight is the ceiling of the list, not of the panel. The panel itself is bounded by the room left to the edge of the viewport: the layer reports the measurement in --gr-floating-available-height, and on a short screen it is precisely the list that shrinks — the filter field and the state rows stay in view, and there is a single scrollbar. The mechanism is shared by the list panels of the package and is described in ../overlays.md.

The panel is controllable through v-model:open (the shared contract of panel overlays, as in GrPopover): without the open prop the behaviour is uncontrolled, with it the parent owns the state.

The name prop enables participation in a native form: for every selected key an input[type="hidden"] with that name is rendered (the standard serialisation with a repeated key), and an empty selection sends nothing.