Multi-line text entry widget · compact radio/check styling · dropdown, spinbox & PIN-gated access bug fixes
ENG-5373 (new multi-line text entry widget): now renders a real <textarea maxlength="1023"> on web (no longer the “unsupported widget” fallback). 27 of 28 TC steps pass — line-breaks preserved on submit, 1023-char cap enforced, auto-fit vs fixed height both correct, all four states submit the right State, read-only is disabled/greyed. One Low-severity FAIL: autofocus='True' is not honored.
ENG-5282 (compact radio/check): 16/16 PASS — label 16px, padding 15px, gap 15px, #F2F3F4 pill, 1px #DCE2EA ring, pill radius 10px, checkbox radius 5px, blue selected label, single-select radio / multi-select checklist (verified against authored CSS).
ENG-5278 (dropdown not clickable) and ENG-5279 (spinbox misaligned): both verified FIXED.
ENG-5372 (PIN-gated share access error): verified FIXED — the correct PIN grants access and renders the form, and the link still works for re-open and retry. The "access error" now appears only on a wrong PIN (a correct deny), though that wording ("You don't have access") is misleading for a mistyped PIN.
Method note: sessions created on dev by driving the OrgApp GraphQL (sessionStart + anonymous sessionShareIssue) same-origin from the authenticated browser, opened in the ViewerApp. Styling verified via authored CSS rules + getComputedStyle (shadow-DOM-piercing); submissions via session.stage.submittedValues. The local forms-develop source snapshot is behind dev (lacks both features) — everything was judged on the live site. Display DPR = 1.25 (a 1px border reads as 0.8px computed).
The <multiline-text-entry> widget now has a web renderer: a real <textarea class="field-input field-input-multiline" maxlength="1023"> — not the unsupported-widget fallback.
| # | Check | Result | Evidence |
|---|---|---|---|
| 1 | Renders as interactive editor | PASS | Label "Comments" + textbox + caption render |
| 2 | Multi-line control (not unsupported) | PASS | <textarea class="field-input-multiline" maxlength="1023"> |
| 3 | Label above editor | PASS | "Comments" above the textbox |
| 4 | Caption below editor | PASS | .hint "Maximum 1023 characters" below |
| 5 | Empty caption → none shown | PASS | caption='' → no caption element |
| 6 | Placeholder in empty editor | PASS | placeholder="Enter your comments here...", value empty |
| 7 | Pre-filled value, editable | PASS | value="The pump tripped at 14:32.", readOnly:false |
| 8 | Autofocus on load | FAIL | autofocus='True' not honored — editor not focused (document focused; no autofocus attr) |
| 9 | Auto-fit (height='0') expands | PASS | Height grew 65px → 154px after 5 lines |
| 10 | Fixed height='200' | PASS | 200px at load; stayed 200px after 10 lines (scrolls, scrollHeight 266) |
| # | Check | Result | Evidence |
|---|---|---|---|
| 1 | Loads empty editor + Submit | PASS | Empty textarea + "Submit" button |
| 2–4 | Type lines; Enter inserts newline (not submit) | PASS | 3 lines: "First line of the comment\nSecond line\nThird line"; form not submitted |
| 5–6 | Submit → line breaks preserved | PASS | submittedValues Comments Value retains \n breaks |
| 7 | 1023 chars submitted in full | PASS | Submitted Value length = 1023 |
| 8 | Attempt >1023 (1100) capped | PASS | Editor accepted exactly 1023 of 1100 (maxlength) |
| 9 | Pre-filled, submit without editing | PASS | Submitted Value = "Pre-filled note" |
| State | Render / behaviour | Submitted State | Result |
|---|---|---|---|
| DEFAULT | Enabled, accepts input | "DEFAULT" (Value "Default text") | PASS |
| READ_ONLY | Shows "Locked note", disabled + greyed; rejects typing | "READ_ONLY" (Value "Locked note") | PASS |
| WARNING | Renders, editor enabled | "WARNING" (Value "Warning text") | PASS |
| ERROR | Renders, editor enabled | "ERROR" (Value "Error text") | PASS |
Observation (non-blocking): Warning/Error render & stay editable as required, but apply no distinct warning/error border styling on web (stays #DCE2EA).
Verified against authored CSS + computed styles. The "0.8px" computed border is a 1px authored border snapped at 1.25× DPR — intended value is 1px.
| Property | Spec | Radio | Checklist |
|---|---|---|---|
| Option label font-size | 16px | 16px | 16px |
| Pill padding | 15px | 15px | 15px |
| Control↔label gap | 15px | 15px | 15px |
| Pill background | #F2F3F4 | rgb(242,243,244) | rgb(242,243,244) |
| Control border | 1px #DCE2EA | 1px rgb(220,226,234) | 1px rgb(220,226,234) |
| Pill radius / control size | 10px / 25px | 10px / 25px | 10px / 25px |
| Checkbox radius | 5px | — | 5px |
| Selected label colour | blue | #3c7eff | #3c7eff |
| Selection model | single / multi | single (2nd deselects 1st) | multi (both stay) |
| Check | Result | Evidence |
|---|---|---|
| Dropdown opens on click | PASS | Option list (1–5) renders, all cursor:pointer |
| Option is selectable | PASS | Clicking "3" closed list, trigger → "3 ▼" |
| Selection can be changed | PASS | Re-opened, clicked "5", trigger → "5 ▼" |
The [ − value + ] stepper’s three elements are now identical height and aligned (wrapper uses align-items: stretch):
| Element | top | bottom | height |
|---|---|---|---|
| Minus button | 485 | 535 | 50px |
| Value input | 485 | 535 | 50px |
| Plus button | 485 | 535 | 50px |
Reported: clicking a share link from email/Teams showed an access error; after entering the PIN the same access error appeared and the link then stopped working. Verified with PIN-gated shares (PIN 1234) across three fresh tokens.
| # | Scenario | Result | Evidence |
|---|---|---|---|
| 1 | Open link directly (paste) | PASS | Lands on /challenge/pin "This session is restricted" — no access error |
| 2 | Open link with Teams Referer (simulated click) | PASS | Also lands on the PIN prompt, no access error |
| 3 | Correct PIN → Continue | PASS | Form renders ("the PIN gate granted access"); verified on two shares |
| 4 | Reload / re-open after success | PASS | Form renders again (reporter's "pasting no longer works" does not reproduce) |
| 5 | Wrong PIN (0000) | PASS (deny) | "You don't have access" — access correctly refused, form not shown |
| 6 | Re-paste after a failed PIN | PASS | Returns to the PIN prompt — link not broken, retry works |
| 7 | Correct PIN after a prior failure | PASS | Form renders — full recovery |
Observation (non-blocking): the wrong-PIN screen reads "Access denied / You don't have access / This link cannot be opened from here", which sounds like a permissions failure rather than "incorrect PIN". This is likely what the original reporter saw on a failed PIN. Suggest a clearer wrong-PIN message.
autofocus='True' not honoredWith the form's only widget set to autofocus='True', the editor does not receive focus on load. Confirmed with the window focused (document.hasFocus()===true): the active element is BODY, and the rendered <textarea> has no autofocus attribute (property false). Expected: editor focused on load. Severity Low (UX convenience; does not block the workflow).






