@fieldia/widgets 0.9.2 → 0.11.0

package/src/lib/ranking.js

@@ -0,0 +1,172 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rankingWidget = void 0;
+const kind_parts_1 = require("./kind-parts");
+const shuffle_1 = require("./shuffle");
+/** How far the pointer goes before a press becomes a drag. */
+const SLOP = 4;
+const rankingWidget = ({ form, name, field, node, id, document, labels, locale }) => {
+    const words = (0, kind_parts_1.wordsFor)(labels, locale);
+    const make = (0, kind_parts_1.maker)(document);
+    const options = (0, shuffle_1.shownOptions)(field.type === 'selection' ? field.options : [], form, name, node);
+    const list = make('ol', { class: 'fd-rank-list' });
+    const voice = (0, kind_parts_1.announcer)(make);
+    const most = node.options?.['top'];
+    const top = typeof most === 'number' && most >= 1 && most < options.length ? Math.floor(most) : 0;
+    const pool = make('div', { class: 'fd-rank-pool' });
+    const keepAsShown = make('button', { type: 'button', class: 'fd-button fd-rank-keep' }, words.keepOrder);
+    keepAsShown.addEventListener('click', () => form.setValue(name, shown.map((item) => item.option.value)));
+    const element = make('div', { id, class: 'fd-ranking', role: 'group' }, ...(top ? [make('div', { class: 'fd-choice-limit' }, (0, kind_parts_1.fillIn)(words.upTo, { n: top })), pool, list] : [list, keepAsShown]), voice.element);
+    const items = options.map((option) => {
+        const label = option.label;
+        const place = make('span', { class: 'fd-rank-place', 'aria-hidden': 'true' });
+        const up = make('button', { type: 'button', class: 'fd-rank-move fd-rank-up', 'aria-label': (0, kind_parts_1.fillIn)(words.moveUp, { label }) }, '↑');
+        const down = make('button', { type: 'button', class: 'fd-rank-move fd-rank-down', 'aria-label': (0, kind_parts_1.fillIn)(words.moveDown, { label }) }, '↓');
+        const grip = make('span', { class: 'fd-rank-grip', 'aria-hidden': 'true' });
+        const tools = make('span', { class: 'fd-rank-tools' }, up, down);
+        const li = make('li', { class: 'fd-rank-item', 'data-value': String(option.value) }, grip, place, make('span', { class: 'fd-rank-words' }, label), tools);
+        const item = { option, element: li, place, up, down };
+        if (top) {
+            // Picked from the rest to the end of those ranked; its × takes it out again.
+            const pick = make('button', { type: 'button', class: 'fd-rank-pick' }, label);
+            pick.addEventListener('click', () => !readonly && shown.length < top && keep([...shown, item], item));
+            const out = make('button', { type: 'button', class: 'fd-rank-move fd-rank-out', 'aria-label': (0, kind_parts_1.fillIn)(words.remove, { name: label }) }, '×');
+            out.addEventListener('click', () => {
+                voice.say((0, kind_parts_1.fillIn)(words.removed, { name: label }));
+                form.setValue(name, shown.filter((other) => other !== item).map((other) => other.option.value));
+            });
+            tools.append(out);
+            pool.append(pick);
+            item.pick = pick;
+        }
+        up.addEventListener('click', () => move(item, -1, 'up'));
+        down.addEventListener('click', () => move(item, 1, 'down'));
+        li.addEventListener('pointerdown', (event) => press(item, event));
+        return item;
+    });
+    let readonly = false;
+    /** The lines in the order shown now. */
+    let shown = [...items];
+    /** The button to give the cursor back to once a move has been drawn. */
+    let refocus = null;
+    function draw(next) {
+        shown = next;
+        next.forEach((item, i) => {
+            if (list.children[i] !== item.element)
+                list.insertBefore(item.element, list.children[i] ?? null);
+            item.place.textContent = String(i + 1);
+            item.up.disabled = i === 0;
+            item.down.disabled = i === next.length - 1;
+        });
+        // Ranking the top few, those not ranked wait among the rest.
+        while (list.children.length > next.length)
+            list.lastElementChild?.remove();
+    }
+    /** Keep the order as the answer, and say where the line went. */
+    function keep(next, moved) {
+        voice.say((0, kind_parts_1.fillIn)(words.movedTo, { label: moved.option.label, n: next.indexOf(moved) + 1, total: next.length }));
+        form.setValue(name, next.map((item) => item.option.value));
+    }
+    function move(item, step, which) {
+        const from = shown.indexOf(item);
+        const to = from + step;
+        if (readonly || to < 0 || to >= shown.length)
+            return;
+        const next = [...shown];
+        next.splice(from, 1);
+        next.splice(to, 0, item);
+        const holding = item.element.contains(document.activeElement);
+        // At an end, the button that moved it is no use: the cursor goes to the other.
+        refocus = holding ? { item, which: (which === 'up' && to === 0) || (which === 'down' && to === next.length - 1) ? (which === 'up' ? 'down' : 'up') : which } : null;
+        keep(next, item);
+        giveBackFocus();
+    }
+    function giveBackFocus() {
+        if (!refocus)
+            return;
+        const { item, which } = refocus;
+        refocus = null;
+        item[which].focus();
+    }
+    list.addEventListener('keydown', (event) => {
+        if (readonly || !event.altKey || (event.key !== 'ArrowUp' && event.key !== 'ArrowDown'))
+            return;
+        const item = items.find((i) => i.element.contains(event.target));
+        if (!item)
+            return;
+        event.preventDefault();
+        move(item, event.key === 'ArrowUp' ? -1 : 1, event.key === 'ArrowUp' ? 'up' : 'down');
+    });
+    // Dragging: the line follows the pointer from place to place; the order is kept when it is let go.
+    function press(item, event) {
+        if (readonly || event.button !== 0 || event.target.closest('button'))
+            return;
+        // On a touch screen only the grip drags: anywhere else the page scrolls.
+        if (event.pointerType === 'touch' && !event.target.closest('.fd-rank-grip'))
+            return;
+        const startY = event.clientY;
+        const before = [...shown];
+        let lifted = false;
+        item.element.setPointerCapture?.(event.pointerId);
+        const onMove = (e) => {
+            if (!lifted && Math.abs(e.clientY - startY) < SLOP)
+                return;
+            if (!lifted) {
+                lifted = true;
+                item.element.classList.add('fd-rank-lifted');
+            }
+            e.preventDefault();
+            // Its place: after every other line whose middle the pointer has passed.
+            const others = shown.filter((other) => other !== item);
+            const at = others.filter((other) => {
+                const box = other.element.getBoundingClientRect();
+                return box.top + box.height / 2 < e.clientY;
+            }).length;
+            if (shown.indexOf(item) !== at)
+                draw([...others.slice(0, at), item, ...others.slice(at)]);
+        };
+        const onEnd = () => {
+            item.element.removeEventListener('pointermove', onMove);
+            item.element.removeEventListener('pointerup', onEnd);
+            item.element.removeEventListener('pointercancel', onEnd);
+            item.element.classList.remove('fd-rank-lifted');
+            if (shown.some((other, i) => other !== before[i]))
+                keep(shown, item);
+        };
+        item.element.addEventListener('pointermove', onMove);
+        item.element.addEventListener('pointerup', onEnd);
+        item.element.addEventListener('pointercancel', onEnd);
+    }
+    /** The order a value says: its options first, in its order, then those it leaves out, as they were shown. */
+    function orderOf(value) {
+        const named = (Array.isArray(value) ? value : []).map((v) => items.find((item) => item.option.value === v)).filter((item) => !!item);
+        if (top)
+            return named.slice(0, top);
+        return Array.isArray(value) ? [...new Set([...named, ...shown])] : shown;
+    }
+    draw(top ? [] : shown);
+    return {
+        element,
+        focus: () => (items.find((item) => item.pick && !item.pick.hidden && !item.pick.disabled)?.pick ?? (shown[0]?.down.disabled ? shown[0]?.up : shown[0]?.down))?.focus(),
+        update(state) {
+            readonly = state.readonly;
+            element.classList.toggle('fd-ranking-locked', readonly);
+            const next = orderOf(state.value);
+            if (next.length !== shown.length || next.some((item, i) => item !== shown[i]) || (!top && !list.children.length))
+                draw(next);
+            for (const item of items) {
+                item.up.hidden = item.down.hidden = readonly;
+                if (item.pick) {
+                    item.pick.hidden = shown.includes(item);
+                    item.pick.disabled = readonly || shown.length >= top;
+                    item.element.querySelector('.fd-rank-out').hidden = readonly;
+                }
+            }
+            keepAsShown.hidden = readonly || (Array.isArray(state.value) && state.value.length > 0);
+            giveBackFocus();
+            (0, kind_parts_1.describeState)(element, state);
+        },
+    };
+};
+exports.rankingWidget = rankingWidget;
+//# sourceMappingURL=ranking.js.map

package/src/lib/ranking.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ranking.js","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/ranking.ts"],"names":[],"mappings":"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"}

package/src/lib/ranking.mjs

@@ -0,0 +1,168 @@
+import { announcer, describeState, fillIn, maker, wordsFor } from './kind-parts.mjs';
+import { shownOptions } from './shuffle.mjs';
+/** How far the pointer goes before a press becomes a drag. */
+const SLOP = 4;
+export const rankingWidget = ({ form, name, field, node, id, document, labels, locale }) => {
+    const words = wordsFor(labels, locale);
+    const make = maker(document);
+    const options = shownOptions(field.type === 'selection' ? field.options : [], form, name, node);
+    const list = make('ol', { class: 'fd-rank-list' });
+    const voice = announcer(make);
+    const most = node.options?.['top'];
+    const top = typeof most === 'number' && most >= 1 && most < options.length ? Math.floor(most) : 0;
+    const pool = make('div', { class: 'fd-rank-pool' });
+    const keepAsShown = make('button', { type: 'button', class: 'fd-button fd-rank-keep' }, words.keepOrder);
+    keepAsShown.addEventListener('click', () => form.setValue(name, shown.map((item) => item.option.value)));
+    const element = make('div', { id, class: 'fd-ranking', role: 'group' }, ...(top ? [make('div', { class: 'fd-choice-limit' }, fillIn(words.upTo, { n: top })), pool, list] : [list, keepAsShown]), voice.element);
+    const items = options.map((option) => {
+        const label = option.label;
+        const place = make('span', { class: 'fd-rank-place', 'aria-hidden': 'true' });
+        const up = make('button', { type: 'button', class: 'fd-rank-move fd-rank-up', 'aria-label': fillIn(words.moveUp, { label }) }, '↑');
+        const down = make('button', { type: 'button', class: 'fd-rank-move fd-rank-down', 'aria-label': fillIn(words.moveDown, { label }) }, '↓');
+        const grip = make('span', { class: 'fd-rank-grip', 'aria-hidden': 'true' });
+        const tools = make('span', { class: 'fd-rank-tools' }, up, down);
+        const li = make('li', { class: 'fd-rank-item', 'data-value': String(option.value) }, grip, place, make('span', { class: 'fd-rank-words' }, label), tools);
+        const item = { option, element: li, place, up, down };
+        if (top) {
+            // Picked from the rest to the end of those ranked; its × takes it out again.
+            const pick = make('button', { type: 'button', class: 'fd-rank-pick' }, label);
+            pick.addEventListener('click', () => !readonly && shown.length < top && keep([...shown, item], item));
+            const out = make('button', { type: 'button', class: 'fd-rank-move fd-rank-out', 'aria-label': fillIn(words.remove, { name: label }) }, '×');
+            out.addEventListener('click', () => {
+                voice.say(fillIn(words.removed, { name: label }));
+                form.setValue(name, shown.filter((other) => other !== item).map((other) => other.option.value));
+            });
+            tools.append(out);
+            pool.append(pick);
+            item.pick = pick;
+        }
+        up.addEventListener('click', () => move(item, -1, 'up'));
+        down.addEventListener('click', () => move(item, 1, 'down'));
+        li.addEventListener('pointerdown', (event) => press(item, event));
+        return item;
+    });
+    let readonly = false;
+    /** The lines in the order shown now. */
+    let shown = [...items];
+    /** The button to give the cursor back to once a move has been drawn. */
+    let refocus = null;
+    function draw(next) {
+        shown = next;
+        next.forEach((item, i) => {
+            if (list.children[i] !== item.element)
+                list.insertBefore(item.element, list.children[i] ?? null);
+            item.place.textContent = String(i + 1);
+            item.up.disabled = i === 0;
+            item.down.disabled = i === next.length - 1;
+        });
+        // Ranking the top few, those not ranked wait among the rest.
+        while (list.children.length > next.length)
+            list.lastElementChild?.remove();
+    }
+    /** Keep the order as the answer, and say where the line went. */
+    function keep(next, moved) {
+        voice.say(fillIn(words.movedTo, { label: moved.option.label, n: next.indexOf(moved) + 1, total: next.length }));
+        form.setValue(name, next.map((item) => item.option.value));
+    }
+    function move(item, step, which) {
+        const from = shown.indexOf(item);
+        const to = from + step;
+        if (readonly || to < 0 || to >= shown.length)
+            return;
+        const next = [...shown];
+        next.splice(from, 1);
+        next.splice(to, 0, item);
+        const holding = item.element.contains(document.activeElement);
+        // At an end, the button that moved it is no use: the cursor goes to the other.
+        refocus = holding ? { item, which: (which === 'up' && to === 0) || (which === 'down' && to === next.length - 1) ? (which === 'up' ? 'down' : 'up') : which } : null;
+        keep(next, item);
+        giveBackFocus();
+    }
+    function giveBackFocus() {
+        if (!refocus)
+            return;
+        const { item, which } = refocus;
+        refocus = null;
+        item[which].focus();
+    }
+    list.addEventListener('keydown', (event) => {
+        if (readonly || !event.altKey || (event.key !== 'ArrowUp' && event.key !== 'ArrowDown'))
+            return;
+        const item = items.find((i) => i.element.contains(event.target));
+        if (!item)
+            return;
+        event.preventDefault();
+        move(item, event.key === 'ArrowUp' ? -1 : 1, event.key === 'ArrowUp' ? 'up' : 'down');
+    });
+    // Dragging: the line follows the pointer from place to place; the order is kept when it is let go.
+    function press(item, event) {
+        if (readonly || event.button !== 0 || event.target.closest('button'))
+            return;
+        // On a touch screen only the grip drags: anywhere else the page scrolls.
+        if (event.pointerType === 'touch' && !event.target.closest('.fd-rank-grip'))
+            return;
+        const startY = event.clientY;
+        const before = [...shown];
+        let lifted = false;
+        item.element.setPointerCapture?.(event.pointerId);
+        const onMove = (e) => {
+            if (!lifted && Math.abs(e.clientY - startY) < SLOP)
+                return;
+            if (!lifted) {
+                lifted = true;
+                item.element.classList.add('fd-rank-lifted');
+            }
+            e.preventDefault();
+            // Its place: after every other line whose middle the pointer has passed.
+            const others = shown.filter((other) => other !== item);
+            const at = others.filter((other) => {
+                const box = other.element.getBoundingClientRect();
+                return box.top + box.height / 2 < e.clientY;
+            }).length;
+            if (shown.indexOf(item) !== at)
+                draw([...others.slice(0, at), item, ...others.slice(at)]);
+        };
+        const onEnd = () => {
+            item.element.removeEventListener('pointermove', onMove);
+            item.element.removeEventListener('pointerup', onEnd);
+            item.element.removeEventListener('pointercancel', onEnd);
+            item.element.classList.remove('fd-rank-lifted');
+            if (shown.some((other, i) => other !== before[i]))
+                keep(shown, item);
+        };
+        item.element.addEventListener('pointermove', onMove);
+        item.element.addEventListener('pointerup', onEnd);
+        item.element.addEventListener('pointercancel', onEnd);
+    }
+    /** The order a value says: its options first, in its order, then those it leaves out, as they were shown. */
+    function orderOf(value) {
+        const named = (Array.isArray(value) ? value : []).map((v) => items.find((item) => item.option.value === v)).filter((item) => !!item);
+        if (top)
+            return named.slice(0, top);
+        return Array.isArray(value) ? [...new Set([...named, ...shown])] : shown;
+    }
+    draw(top ? [] : shown);
+    return {
+        element,
+        focus: () => (items.find((item) => item.pick && !item.pick.hidden && !item.pick.disabled)?.pick ?? (shown[0]?.down.disabled ? shown[0]?.up : shown[0]?.down))?.focus(),
+        update(state) {
+            readonly = state.readonly;
+            element.classList.toggle('fd-ranking-locked', readonly);
+            const next = orderOf(state.value);
+            if (next.length !== shown.length || next.some((item, i) => item !== shown[i]) || (!top && !list.children.length))
+                draw(next);
+            for (const item of items) {
+                item.up.hidden = item.down.hidden = readonly;
+                if (item.pick) {
+                    item.pick.hidden = shown.includes(item);
+                    item.pick.disabled = readonly || shown.length >= top;
+                    item.element.querySelector('.fd-rank-out').hidden = readonly;
+                }
+            }
+            keepAsShown.hidden = readonly || (Array.isArray(state.value) && state.value.length > 0);
+            giveBackFocus();
+            describeState(element, state);
+        },
+    };
+};
+//# sourceMappingURL=ranking.mjs.map

package/src/lib/ranking.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ranking.mjs","sourceRoot":"","sources":["../../../../../libs/widgets/src/lib/ranking.ts"],"names":[],"mappings":"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"}

package/src/lib/relations.d.mts

@@ -5,7 +5,7 @@ export declare const tagsWidget: WidgetFactory;
  * Free-text tags on a text field, kept as "oak, glass": Enter or a comma adds
  * what was typed, Backspace in an empty box takes the last one away, and the
  * node's `options.suggestions` are offered as you type. `options.separator`
- * is "," unless set.
+ * is "," unless set; with `options.max`, the box goes once there are as many.
  */
 export declare const charTagsWidget: WidgetFactory;
 /** Every record as a checkbox. For short lists: it loads up to 50. */

package/src/lib/relations.d.ts

@@ -5,7 +5,7 @@ export declare const tagsWidget: WidgetFactory;
  * Free-text tags on a text field, kept as "oak, glass": Enter or a comma adds
  * what was typed, Backspace in an empty box takes the last one away, and the
  * node's `options.suggestions` are offered as you type. `options.separator`
- * is "," unless set.
+ * is "," unless set; with `options.max`, the box goes once there are as many.
  */
 export declare const charTagsWidget: WidgetFactory;
 /** Every record as a checkbox. For short lists: it loads up to 50. */

package/src/lib/relations.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.referenceWidget = exports.linkCheckboxesWidget = exports.charTagsWidget = exports.tagsWidget = exports.many2oneWidget = void 0;
 const labels_1 = require("./labels");
+const kind_parts_1 = require("./kind-parts");
 /**
  * Pickers for related records: a search-as-you-type combobox (the ARIA 1.2
  * combobox pattern), tags for a many2many, and a reference picker. Results
@@ -193,12 +194,13 @@ function combobox(options) {
         input,
         setText(text) {
             shown = text;
-            if (!editing)
+            if (!editing && input.value !== text)
                 input.value = text;
         },
         setReadonly(next) {
             readonly = next;
-            input.readOnly = next;
+            if (input.readOnly !== next)
+                input.readOnly = next;
             if (next)
                 close();
         },
@@ -270,21 +272,22 @@ const many2oneWidget = ({ form, name, field, node, id, document, labels = labels
             readonly = state.readonly;
             box.setText(record?.label ?? '');
             box.setReadonly(state.readonly);
-            clear.hidden = !record || state.readonly;
+            (0, kind_parts_1.setHidden)(clear, !record || state.readonly);
             if (open) {
-                open.hidden = !record;
+                (0, kind_parts_1.setHidden)(open, !record);
                 if (record)
-                    open.setAttribute('aria-label', fill(labels.openNamed, { name: record.label }));
+                    (0, kind_parts_1.setAttr)(open, 'aria-label', fill(labels.openNamed, { name: record.label }));
             }
-            box.input.setAttribute('aria-invalid', String(state.invalid));
-            box.input.setAttribute('aria-required', String(state.required));
+            (0, kind_parts_1.setAttr)(box.input, 'aria-invalid', String(state.invalid));
+            (0, kind_parts_1.setAttr)(box.input, 'aria-required', String(state.required));
             if (state.describedBy)
-                box.input.setAttribute('aria-describedby', state.describedBy);
+                (0, kind_parts_1.setAttr)(box.input, 'aria-describedby', state.describedBy);
         },
     };
 };
 exports.many2oneWidget = many2oneWidget;
-const tagsWidget = ({ form, name, node, id, document, labels = labels_1.WIDGET_LABELS.en }) => {
+const tagsWidget = ({ form, name, field, node, id, document, labels = labels_1.WIDGET_LABELS.en, dialogs }) => {
+    const relation = field.type === 'many2many' ? field.relation : '';
     const current = () => form.getState().values[name] ?? [];
     const element = document.createElement('div');
     element.className = 'fd-tags';
@@ -295,9 +298,12 @@ const tagsWidget = ({ form, name, node, id, document, labels = labels_1.WIDGET_L
         document,
         id,
         labels,
-        search: (query) => form.search(name, query),
+        // One past what the list shows, besides those chosen, to know whether Search more… has more to find.
+        search: (query) => form.search(name, query, SHOWN + 1 + current().length),
+        shown: SHOWN,
         pick: (record) => {
-            form.setValue(name, [...current(), record]);
+            if (!current().some((r) => r.id === record.id))
+                form.setValue(name, [...current(), record]);
             box.input.value = '';
         },
         exclude: () => new Set(current().map((record) => record.id)),
@@ -307,7 +313,17 @@ const tagsWidget = ({ form, name, node, id, document, labels = labels_1.WIDGET_L
                 form.setValue(name, records.slice(0, -1));
         },
         create: creator(form, name, node),
+        // With dialogs: pick from a full list when the short one has no room.
+        more: (_typed, overflow) => (dialogs && overflow ? [{ label: labels.searchMore, act: () => dialogs.searchMore({ title: field.label, search: (query, limit) => form.search(name, query, limit) }) }] : []),
     });
+    // A linked record, opened from its tag in a dialog where the app can show it; a new name it is saved with follows here.
+    const open = dialogs && dialogs.canOpen(relation)
+        ? async (record) => {
+            const saved = await dialogs.openRecord(relation, { recordId: record.id, title: record.label });
+            if (saved && saved.label !== record.label)
+                form.setValue(name, current().map((r) => (r.id === record.id ? saved : r)));
+        }
+        : undefined;
     element.append(chips, box.element);
     let readonly = false;
     let drawn = '';
@@ -327,21 +343,26 @@ const tagsWidget = ({ form, name, node, id, document, labels = labels_1.WIDGET_L
             if (key === drawn)
                 return;
             drawn = key;
-            drawChips(chips, records, readonly, labels, (record) => form.setValue(name, current().filter((r) => r.id !== record.id)));
+            drawChips(chips, records, readonly, labels, (record) => form.setValue(name, current().filter((r) => r.id !== record.id)), open);
             box.setText('');
         },
     };
 };
 exports.tagsWidget = tagsWidget;
-/** Chips for tags, each with a remove button unless read-only. */
-function drawChips(chips, records, readonly, labels, remove) {
+/** Chips for tags, each with a remove button unless read-only; with `open`, each one's words a button that opens it. */
+function drawChips(chips, records, readonly, labels, remove, open) {
     const doc = chips.ownerDocument;
     chips.replaceChildren(...records.map((record) => {
         const chip = doc.createElement('li');
         chip.className = 'fd-chip';
-        const text = doc.createElement('span');
+        const text = doc.createElement(open ? 'button' : 'span');
         text.className = 'fd-chip-label';
         text.textContent = record.label;
+        if (open) {
+            text.type = 'button';
+            text.setAttribute('aria-label', fill(labels.openNamed, { name: record.label }));
+            text.addEventListener('click', () => open(record));
+        }
         chip.append(text);
         if (!readonly) {
             const button = doc.createElement('button');
@@ -359,7 +380,7 @@ function drawChips(chips, records, readonly, labels, remove) {
  * Free-text tags on a text field, kept as "oak, glass": Enter or a comma adds
  * what was typed, Backspace in an empty box takes the last one away, and the
  * node's `options.suggestions` are offered as you type. `options.separator`
- * is "," unless set.
+ * is "," unless set; with `options.max`, the box goes once there are as many.
  */
 const charTagsWidget = ({ form, name, node, id, document, labels = labels_1.WIDGET_LABELS.en }) => {
     const options = node.options ?? {};
@@ -371,7 +392,7 @@ const charTagsWidget = ({ form, name, node, id, document, labels = labels_1.WIDG
     const add = (raw) => {
         const tag = raw.trim();
         const tags = current();
-        if (tag && !tags.some((t) => t.toLowerCase() === tag.toLowerCase()))
+        if (tag && !tags.some((t) => t.toLowerCase() === tag.toLowerCase()) && !(tags.length >= options['max']))
             write([...tags, tag]);
     };
     const element = document.createElement('div');
@@ -431,7 +452,7 @@ const charTagsWidget = ({ form, name, node, id, document, labels = labels_1.WIDG
         update(state) {
             const tags = split(state.value);
             box.setReadonly(state.readonly);
-            box.element.hidden = state.readonly;
+            box.element.hidden = state.readonly || tags.length >= options['max'];
             box.input.setAttribute('aria-invalid', String(state.invalid));
             if (state.describedBy)
                 box.input.setAttribute('aria-describedby', state.describedBy);
@@ -439,8 +460,12 @@ const charTagsWidget = ({ form, name, node, id, document, labels = labels_1.WIDG
             if (key === drawn)
                 return;
             drawn = key;
+            const typing = document.activeElement === box.input;
             drawChips(chips, tags.map((t) => ({ id: t, label: t })), state.readonly, labels, (record) => write(current().filter((t) => t !== record.label)));
             box.setText('');
+            // The box gone at the most, the cursor stays in the keywords: on the last one's ×.
+            if (typing && box.element.hidden)
+                chips.querySelector('li:last-child button')?.focus();
         },
     };
 };