@qoretechnologies/reqraft 0.10.55-pr.124.g43fa138 → 0.10.55

package/src/components/form/fields/select/SelectCollection.tsx

@@ -4,15 +4,115 @@ import {
   ReqoreControlGroup,
   ReqoreMessage,
   ReqoreModal,
+  ReqoreTag,
 } from '@qoretechnologies/reqore';
 import { IReqoreCollectionItemProps } from '@qoretechnologies/reqore/dist/components/Collection/item';
 import { TReqoreBadge } from '@qoretechnologies/reqore/dist/components/Button';
+import { IReqorePanelAction } from '@qoretechnologies/reqore/dist/components/Panel';
 import { TReqoreIntent } from '@qoretechnologies/reqore/dist/constants/theme';
+import { IReqoreTooltip } from '@qoretechnologies/reqore/dist/types/global';
 import { IReqoreIconName } from '@qoretechnologies/reqore/dist/types/icons';
 import { capitalize, isEqual, size } from 'lodash';
 import { useMemo, useState } from 'react';
+import styled from 'styled-components';
+import {
+  UNAVAILABLE_VALUE_FALLBACK_REASON,
+  getRefusalMessage,
+} from '../../../../helpers/options';
 import { Description } from '../../../Description';
 
+/**
+ * The size the picker cannot be dragged below, measured on its own content.
+ *
+ * reqore floors a modal at what the DRAWER's chrome needs — its title and its
+ * close control — which is all reqore can answer for. The picker needs more
+ * than that, and said so the hard way: dragged to roughly 45px wide it still
+ * held a search box, a list and a close button, stacked in a column nobody
+ * could read.
+ *
+ * Measured on `components-form-select--item-actions-in-the-title-bar` at
+ * 1400x1000, sweeping the width and the height of the dialog box:
+ *
+ * - **320px wide.** The collection is laid out in 300px columns
+ *   (`minColumnWidth`), so a row is 300px wide whatever the dialog does. At
+ *   300px the row overhangs the dialog by 13px and at 310px by 3px; 320px is
+ *   the first round width that contains it (-7px), and from 340px the row
+ *   grows with the box instead of overhanging it.
+ * - **180px tall.** The panel header is 55px and the search field 26px, and
+ *   both are whole from 100px — but the list below them has to show one entry
+ *   in full, or there is nothing choosable in the dialog. A plain row is 56px
+ *   and is whole from 160px; a row carrying a description is 70px and needs
+ *   174px. The floor takes the taller of the two, because the same dialog
+ *   serves both and a floor that clips the rows it is actually used with is
+ *   the defect this constant exists to prevent — the assertion-kind picker in
+ *   qorus-ide is the described-row case. 180px is the first round height that
+ *   contains it.
+ */
+export const SELECT_DIALOG_MIN_WIDTH = 320;
+/** See {@link SELECT_DIALOG_MIN_WIDTH}. */
+export const SELECT_DIALOG_MIN_HEIGHT = 180;
+
+/**
+ * The hook a row wears while its value cannot be picked — for the stylesheet
+ * below, and for a host's own tests and styling.
+ */
+export const UNAVAILABLE_ITEM_CLASS = 'reqraft-select-item-unavailable';
+
+/**
+ * The picker's floor, expressed where it survives the reqore we pin.
+ *
+ * `className` reaches the element `re-resizable` sizes and drags, and a CSS
+ * `min-width` clamps THAT element's rendered box however far the drag goes —
+ * so this holds against reqore 0.74.1, where a modal's floor is a hardcoded
+ * 40px and `minSize` never reaches it, as well as against the `minWidth` /
+ * `minHeight` props reqore grew later.
+ *
+ * `!important` is load-bearing, not decoration: `re-resizable` writes its own
+ * `min-width` / `min-height` INLINE on this same element, and an inline
+ * declaration beats a normal one from a stylesheet.
+ *
+ * Clamping the box from outside `re-resizable` rather than through it costs
+ * one thing, and it is not the thing it looks like. The drag stays exact: each
+ * move sizes the box from where the drag STARTED plus the pointer's delta, not
+ * from the last size, so coming back out tracks the pointer with no dead zone
+ * (measured — past the floor the box holds 320px while the inline width reads
+ * 40px, and 300px back out it is 400px again). What is left behind is that
+ * divergence: an inline width smaller than the box anyone can see. Read this
+ * dialog's size from its rect, never from `style.width`. Once reqraft can pin
+ * a reqore that has them this becomes `minWidth` / `minHeight` on the modal,
+ * and the two agree again.
+ *
+ * Capped at the viewport so a phone gets a dialog it can see all of rather
+ * than a floor wider than its screen — reqore's own maximum is 90vw / 90vh.
+ */
+const StyledSelectDialog = styled(ReqoreModal)`
+  min-width: min(${SELECT_DIALOG_MIN_WIDTH}px, 90vw) !important;
+  min-height: min(${SELECT_DIALOG_MIN_HEIGHT}px, 90vh) !important;
+
+  /*
+   * A value that cannot be picked, said in the row's own stylesheet.
+   *
+   * Reqore's "disabled" is NOT what marks it. That applies DisabledElement,
+   * which is "pointer-events: none" — and the two places the reason can be
+   * read, the row's tooltip and whatever control its title bar carries, both
+   * need the pointer. Dropping onClick is what actually makes the row inert:
+   * reqore derives "interactive" from the handlers a panel was given, so a row
+   * with none gets no pointer cursor and no hover lift while keeping every
+   * pointer event it had.
+   *
+   * The dimming lands on the TITLE rather than on the row, because "opacity"
+   * creates a stacking context: dimming the row would dim the reason inside it,
+   * and the reason is the one thing on an unavailable row that has to read.
+   */
+  .${UNAVAILABLE_ITEM_CLASS} {
+    cursor: not-allowed;
+  }
+
+  .${UNAVAILABLE_ITEM_CLASS} > .reqore-panel-title {
+    opacity: 0.55;
+  }
+`;
+
 const PositiveColorEffect = {
   gradient: {
     colors: {
@@ -22,6 +122,48 @@ const PositiveColorEffect = {
   },
 };
 
+/**
+ * One affordance on an offered item, as a DESCRIPTOR rather than a node.
+ *
+ * A caller's items routinely travel through a `JSON.stringify(items)` memo key
+ * (`FieldAllowedValues`, `MultiSelectFormField`), and a rendered React element
+ * is circular through its fibre — putting one on an item throws and takes the
+ * whole form down with it. So an item names the component and hands it props;
+ * `as` is a function or a memo object, which `JSON.stringify` simply omits.
+ */
+export interface ISelectFieldCollectionItemAction {
+  /** The component to render. Defaults to {@link ReqoreButton}. */
+  as?: React.ElementType;
+  /** Props handed to it. Keep them JSON-serialisable. */
+  props?: Record<string, unknown>;
+}
+
+/**
+ * Content for a tooltip an item puts on its own row, under the same
+ * no-React-elements rule as {@link ISelectFieldCollectionItemAction}: a plain
+ * string, or a component named by `as` and given plain props.
+ */
+export type TSelectFieldCollectionItemTooltipContent =
+  | string
+  | { as: React.ElementType; props?: Record<string, unknown> };
+
+/**
+ * A per-item tooltip: a bare string, or reqore's tooltip options with the
+ * content given as a descriptor.
+ */
+export type TSelectFieldCollectionItemTooltip =
+  | string
+  | (Omit<IReqoreTooltip, 'content'> & {
+      content?: TSelectFieldCollectionItemTooltipContent;
+    });
+
+/** A note rendered in an item's body, in the same shape a schema sends one. */
+export interface ISelectFieldCollectionItemMessage {
+  intent?: TReqoreIntent;
+  title?: string;
+  content: string;
+}
+
 export interface ISelectFieldCollectionItem {
   value?: unknown;
   name?: unknown;
@@ -34,8 +176,54 @@ export interface ISelectFieldCollectionItem {
   intent?: TReqoreIntent;
   disabled?: boolean;
   groups?: string[];
-  actions?: { as?: React.ElementType; props?: Record<string, unknown> }[];
-  messages?: { intent?: TReqoreIntent; title?: string; content: string }[];
+  /**
+   * Affordances rendered in the row's BODY, stacked under the description.
+   * Each one costs the row a line of its own, which is right for something
+   * with a label and wrong for a single icon on a long list — see
+   * `title_actions`.
+   */
+  actions?: ISelectFieldCollectionItemAction[];
+  /**
+   * Affordances rendered in the row's TITLE BAR, inline with the name and to
+   * the right of it, where a row already reserves the height.
+   *
+   * Separate from `actions` rather than a relocation of it: an item's body
+   * actions have been rendered under the description since this collection
+   * existed, and callers size and lay them out on that basis. This is the
+   * opt-in for the other placement.
+   */
+  title_actions?: ISelectFieldCollectionItemAction[];
+  /**
+   * A tooltip on the ROW — the whole item is the hover target, not one control
+   * inside it. Content that is more than a sentence belongs here rather than
+   * in `content`, which every row pays for in height whether it is read or not.
+   */
+  tooltip?: TSelectFieldCollectionItemTooltip;
+  messages?: ISelectFieldCollectionItemMessage[];
+  /**
+   * Why the value cannot be picked, when it cannot.
+   *
+   * Rendered FIRST in the row — above the description, not under it, where a
+   * `messages` entry would land. A reader who has just been refused a choice is
+   * looking for the reason, and a row that answers with its description and
+   * makes them read on has answered a different question.
+   *
+   * Set it together with `disabled`, which is what drops the click handler.
+   * Carried as data rather than as a node for the reason in
+   * {@link ISelectFieldCollectionItemAction}.
+   */
+  unavailable?: ISelectFieldCollectionItemMessage;
+  /** Added to the row's own classes — see {@link UNAVAILABLE_ITEM_CLASS}. */
+  className?: string;
+  /**
+   * Extra words the list's search matches this row on.
+   *
+   * Reqore searches a row's label and the STRING of its content, and this
+   * collection's content is a React element — which stringifies to
+   * `[object Object]` and matches every query equally. Anything that has to be
+   * findable belongs here.
+   */
+  searchString?: string;
   [key: string]: unknown;
 }
 
@@ -109,6 +297,121 @@ export const getSelectItemDescriptionProps = (
   return { shortDescription };
 };
 
+/**
+ * Why an item cannot be picked, in the words the row will print.
+ *
+ * Two shapes reach here and they mean the same thing. A caller that resolved
+ * the availability itself sends `unavailable`; a caller — or a server — that
+ * only marked the value `disabled` and explained it in `messages` gets the same
+ * treatment, because a refusal nobody worded is still a refusal, and a row that
+ * silently ignores a click is the defect this answers.
+ *
+ * Which message explains a refusal is decided in one place
+ * ({@link getRefusalMessage}), so the picker and the form's own resolver cannot
+ * word the same refusal differently.
+ */
+export const getSelectItemUnavailability = (
+  item: Pick<ISelectFieldCollectionItem, 'unavailable' | 'disabled' | 'messages'>
+): ISelectFieldCollectionItemMessage | undefined => {
+  if (item.unavailable) {
+    return item.unavailable;
+  }
+
+  if (!item.disabled) {
+    return undefined;
+  }
+
+  const explanation = getRefusalMessage(item.messages);
+
+  return {
+    intent: explanation?.intent || 'warning',
+    title: explanation?.title,
+    content: explanation?.content || UNAVAILABLE_VALUE_FALLBACK_REASON,
+  };
+};
+
+/**
+ * An item's title-bar affordances as reqore panel actions.
+ *
+ * `as` is defaulted here rather than left to reqore: reqore renders an action
+ * with no `as` as a `ReqoreButton` built from the action's OWN keys and drops
+ * `props` on the floor, so a descriptor that named only props would render an
+ * empty button. Defaulting `as` keeps one descriptor shape for both
+ * placements.
+ *
+ * `size` is a default, not an override — the row is `tiny`, so a control in
+ * its title bar is too unless the caller says otherwise. The body renderer
+ * below forces `size` after the caller's props and cannot be given a
+ * different one; that is the older behaviour and it is left alone.
+ *
+ * An unavailable row leads with a padlock, before whatever the caller declared.
+ * It is a TAG, not a control: the words are already on the row and in its
+ * tooltip, and a second popover saying the same thing over the first is worse
+ * than one. It is also not the compact form's "Depends on" chip, whose whole
+ * value is clicking through to the blocking field — from inside a modal that
+ * covers that field, there is nowhere for such a click to go.
+ */
+export const getSelectItemTitleActions = (
+  item: Pick<ISelectFieldCollectionItem, 'title_actions'>,
+  unavailable?: ISelectFieldCollectionItemMessage
+): IReqorePanelAction[] | undefined => {
+  const declared = (item.title_actions || []).map(
+    ({ as = ReqoreButton, props, ...rest }): IReqorePanelAction => ({
+      ...rest,
+      as,
+      props: { size: 'tiny', ...props },
+    })
+  );
+
+  const actions = unavailable ? [UNAVAILABLE_TITLE_ACTION, ...declared] : declared;
+
+  return actions.length ? actions : undefined;
+};
+
+/** The padlock an unavailable row wears — see {@link getSelectItemTitleActions}. */
+const UNAVAILABLE_TITLE_ACTION: IReqorePanelAction = {
+  as: ReqoreTag,
+  props: {
+    size: 'tiny',
+    icon: 'LockLine',
+    minimal: true,
+    className: 'reqraft-select-item-lock',
+  },
+};
+
+/**
+ * An item's row tooltip as reqore's own tooltip prop.
+ *
+ * The descriptor is turned into an element HERE — after the caller's items
+ * have been through whatever memo key they travel under — which is the whole
+ * reason the item carries `{ as, props }` and not a node.
+ */
+export const buildSelectItemTooltip = (
+  tooltip: ISelectFieldCollectionItem['tooltip']
+): string | IReqoreTooltip | undefined => {
+  if (!tooltip) {
+    return undefined;
+  }
+
+  if (typeof tooltip === 'string') {
+    return tooltip;
+  }
+
+  const { content, ...rest } = tooltip;
+
+  if (content === undefined) {
+    return rest;
+  }
+
+  if (typeof content === 'string') {
+    return { ...rest, content };
+  }
+
+  const { as: Component, props } = content;
+
+  return { ...rest, content: <Component {...props} /> };
+};
+
 export const SelectFieldCollection = ({
   onClose,
   items,
@@ -131,7 +434,7 @@ export const SelectFieldCollection = ({
   }, [items, appliedFilters]);
 
   return (
-    <ReqoreModal
+    <StyledSelectDialog
       isOpen
       // A library-owned hook for hosts and their tests to target the picker
       // (qorus-ide's helpers looked for its own `.q-select-dialog`, which
@@ -166,15 +469,53 @@ export const SelectFieldCollection = ({
         showLayoutSwitch={false}
         items={filteredItems.map((item): IReqoreCollectionItemProps => {
           const { longDescription, shortDescription } = getSelectItemDescriptionProps(item);
+          const unavailable = getSelectItemUnavailability(item);
+          /* One `messages` entry can be the refusal itself — a server that sent
+             `disabled` with its reason, resolved into `unavailable` upstream.
+             It is already printed above the description, so it is not printed
+             again underneath it. */
+          const messages = (item.messages || []).filter(
+            (message) => !unavailable || message.content !== unavailable.content
+          );
 
           return {
             label: item.display_name || item.value?.toString(),
             size: 'tiny',
             groups: item.groups,
+            className: [item.className, unavailable ? UNAVAILABLE_ITEM_CLASS : undefined]
+              .filter(Boolean)
+              .join(' '),
+            /* Inline with the name, in height the title bar already spends.
+               `actions` on the item stays where it has always been, in the
+               body under the description. */
+            actions: getSelectItemTitleActions(item, unavailable),
+            /* The row is the hover target, so an explanation costs the list
+               nothing until it is asked for. */
+            tooltip: buildSelectItemTooltip(item.tooltip ?? unavailable?.content),
+            /* Reqore searches a row's label and its stringified content, and
+               the content below is an element — so every row matches
+               `[object Object]` and nothing matches a word inside it. A reason
+               nobody can search for in a list of hundreds is a reason nobody
+               finds. */
+            searchString: [item.searchString, unavailable?.title, unavailable?.content]
+              .filter(Boolean)
+              .join(' '),
             customTheme: { main: '#08182d' },
             responsiveTitle: false,
             content: (
               <ReqoreControlGroup vertical fluid>
+                {unavailable ? (
+                  <ReqoreMessage
+                    flat
+                    icon='LockLine'
+                    intent={unavailable.intent || 'warning'}
+                    title={unavailable.title}
+                    size='small'
+                    opaque={false}
+                  >
+                    {unavailable.content}
+                  </ReqoreMessage>
+                ) : null}
                 {longDescription || shortDescription ? (
                   <Description
                     longDescription={longDescription || ''}
@@ -192,7 +533,7 @@ export const SelectFieldCollection = ({
                     size='tiny'
                   />
                 ))}
-                {(item.messages || []).map(({ intent, title, content }, index) => (
+                {messages.map(({ intent, title, content }, index) => (
                   <ReqoreMessage
                     flat
                     intent={intent}
@@ -220,7 +561,10 @@ export const SelectFieldCollection = ({
               size: '20px',
               rounded: true,
             },
-            onClick: !item.disabled
+            /* No handler is what makes an unavailable row inert, and it is
+               deliberately NOT reqore's `disabled`: see the stylesheet on
+               `StyledSelectDialog`. */
+            onClick: !item.disabled && !unavailable
               ? (e) => {
                   if (e.currentTarget.contains(e.target as Node)) {
                     onItemSelect(item);
@@ -245,6 +589,6 @@ export const SelectFieldCollection = ({
           },
         }))}
       />
-    </ReqoreModal>
+    </StyledSelectDialog>
   );
 };

package/src/components/form/fields/template/ReadOnlyTemplateTag.tsx

@@ -5,6 +5,7 @@ import { memo } from 'react';
 import {
   getTemplateTagStyle,
   describeTemplateReference,
+  templateTooltip,
   TTemplateMeta,
 } from '../../../../helpers/templates';
 
@@ -18,7 +19,8 @@ export interface IReadOnlyTemplateTagProps {
 
 /**
  * The read-only representation of a selected template — a picker-shaped chip:
- * the `$`-dollar icon, the resolved display name (raw value in the tooltip), the
+ * the `$`-dollar icon, the resolved display name (and what the value IS in the
+ * tooltip, not the reference that names it), the
  * app image when present, coloured by qorus-ide's scheme (info / qorus purple /
  * success — see `getTemplateTagStyle`). Shared by `TemplateField`'s disabled
  * branch and the compact read-first row so a template reads identically wherever
@@ -34,7 +36,7 @@ export const ReadOnlyTemplateTag = memo(
           icon='ExchangeDollarLine'
           leftIconProps={{ image: metadata?.image }}
           label={label}
-          tooltip={value}
+          tooltip={templateTooltip(templates, value)}
           {...getTemplateTagStyle(metadata)}
         />
       </ReqoreTagGroup>

package/src/components/form/fields/template/TemplateField.stories.tsx

@@ -264,10 +264,20 @@ export const AutoComponent: StoryObj<typeof meta> = {
     docs: {
       description: {
         story:
-          'Renders TemplateField over an untyped (`auto`) field that accepts templates. While the field is empty it opens on the template selector rather than the data-type picker, so the author can say which value they mean before answering how it is stored.',
+          'Renders TemplateField over an untyped (`auto`) field that accepts templates. While the field is empty it opens on an editor to type into, which offers the templates — never on a data-type picker, so the author can write the value they mean without answering how it is stored.',
       },
     },
   },
+  play: async ({ canvasElement }) => {
+    /* The editor itself, not a class: TemplateField puts `.template-selector`
+       on every control it draws, the data-type picker included, so asserting
+       the class passed while the story showed "Please select data type". */
+    await waitFor(() => expect(canvasElement.querySelector('[contenteditable="true"]')).toBeTruthy(), {
+      timeout: 5000,
+    });
+    expect(canvasElement.textContent).not.toContain('Please select data type');
+    expect(canvasElement.textContent).not.toContain('Select Template');
+  },
 };
 
 export const AllowedValuesWithTemplate: StoryObj<typeof meta> = {
@@ -674,7 +684,7 @@ export const TemplateCanBeSelected: StoryObj<typeof meta> = {
     docs: {
       description: {
         story:
-          'Renders TemplateField for a string, opens the templates popover and clicks the Interface ID template — the field switches to the $local:id template value inside the template-offering input (plain word tokens stay typeable; only braced context refs chip).',
+          'Renders TemplateField for a string, opens the templates popover and clicks the Interface ID template — the field switches to template mode, where the $local:id reference is a chip named Interface ID inside an editor that can still be typed into.',
       },
     },
   },
@@ -684,9 +694,16 @@ export const TemplateCanBeSelected: StoryObj<typeof meta> = {
     await ShowsTemplatesListForString.play({ canvasElement, ...rest });
     await _testsClickButton({ label: 'Interface ID' });
 
-    await sleep(100);
-
-    await expect(canvas.getByDisplayValue('$local:id')).toBeInTheDocument();
+    // The chosen reference reads as the name it was chosen by, in an editor
+    // that can still be typed into — not as its spelling.
+    await waitFor(
+      () => {
+        const chip = canvasElement.querySelector('.template-selector [contenteditable="true"] .reqore-tag');
+        expect(chip?.textContent).toContain('Interface ID');
+      },
+      { timeout: 5000 }
+    );
+    await expect(canvas.queryByDisplayValue('$local:id')).toBeNull();
   },
 };
 
@@ -991,14 +1008,73 @@ export const EmptyAnyOpensOnTemplates: StoryObj<typeof meta> = {
     docs: {
       description: {
         story:
-          'An untyped, empty field that accepts templates opens showing the template selector rather than a data-type picker.',
+          'An untyped, empty field that accepts templates opens on an editor to type into, which offers the templates — never on a data-type picker.',
       },
     },
   },
   play: async ({ canvasElement }) => {
+    /* The editor itself, not a class: TemplateField puts `.template-selector`
+       on every control it draws, the data-type picker included, so asserting
+       the class passed while the story showed "Please select data type". */
+    await waitFor(() => expect(canvasElement.querySelector('[contenteditable="true"]')).toBeTruthy(), {
+      timeout: 5000,
+    });
+    expect(canvasElement.textContent).not.toContain('Please select data type');
+    expect(canvasElement.textContent).not.toContain('Select Template');
+  },
+};
+
+/** A string mixing text with template references, as template mode edits it. */
+const templateReferencesInText: StoryObj<typeof meta> = {
+  args: {
+    type: 'string',
+    defaultType: 'string',
+    defaultInternalType: 'string',
+    value: 'Interface $local:id failed at $timestamp:now',
+  },
+  play: async ({ canvasElement }) => {
+    const editor = await waitFor(
+      () => {
+        const element = canvasElement.querySelector<HTMLElement>('.template-selector [contenteditable="true"]');
+        expect(element).toBeTruthy();
+        return element!;
+      },
+      { timeout: 5000 }
+    );
+    // Each reference is its catalogue name; the text between them is untouched.
     await waitFor(() =>
-      expect(canvasElement.querySelector('.template-selector')).toBeTruthy()
+      expect(Array.from(editor.querySelectorAll('.reqore-tag')).map((chip) => chip.textContent?.trim())).toEqual([
+        'Interface ID',
+        'Current Timestamp',
+      ])
     );
+    expect(editor.textContent).toContain('failed at');
+    expect(editor.textContent).not.toContain('$local:id');
+  },
+};
+
+export const TemplateReferencesInText: StoryObj<typeof meta> = {
+  ...templateReferencesInText,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders TemplateField holding the string "Interface $local:id failed at $timestamp:now". Template mode draws each reference as a chip named from the catalogue (Interface ID, Current Timestamp) inside an editor that can still be typed into; the text between them reads as typed.',
+      },
+    },
+  },
+};
+
+export const TemplateReferencesInTextOnPhone: StoryObj<typeof meta> = {
+  ...templateReferencesInText,
+  parameters: {
+    qlip: { viewport: { width: 390, height: 844 } },
+    docs: {
+      description: {
+        story:
+          'Renders the same string with two template references at phone width (390px): the named chips and the text around them wrap inside the editor rather than overflowing it.',
+      },
+    },
   },
 };
 
@@ -1021,7 +1097,7 @@ export const AnyWithLiteralOpensOnTheValue: StoryObj<typeof meta> = {
     docs: {
       description: {
         story:
-          'An untyped field holding a literal keeps showing that literal — only an empty one defaults to the template selector.',
+          'An untyped field holding a literal keeps showing that literal — only an empty one defaults to the template selector. Where the field offers templates that editor is the chip editor (a contenteditable box), not a textarea, so the literal appears there.',
       },
     },
   },
@@ -1031,12 +1107,15 @@ export const AnyWithLiteralOpensOnTheValue: StoryObj<typeof meta> = {
     // a control that renders either way, so it says nothing about which view is
     // active.
     await waitFor(() => {
-      const held = [
-        ...canvasElement.querySelectorAll<HTMLInputElement | HTMLTextAreaElement>(
-          'input, textarea'
-        ),
-      ].some((el) => el.value === 'already-typed');
-      expect(held).toBe(true);
+      // Its editor may be a field or, where templates are offered, the chip editor.
+      const shown = [
+        ...canvasElement.querySelectorAll<HTMLElement>('input, textarea, [contenteditable="true"]'),
+      ].map((el) =>
+        el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement ?
+          el.value
+        : (el.textContent ?? '').replace(/\uFEFF/g, '').trim()
+      );
+      expect(shown).toContain('already-typed');
     });
   },
 };