Inline edit

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

<tui-inline-edit label="Project name" required>
  <button class="tui-inline-edit__print" type="button">
    <span class="tui-inline-edit__text">Northwind billing</span>
  </button>
  <input class="tui-inline-edit__input" name="project" value="Northwind billing" hidden>
</tui-inline-edit>

<!-- A value that may be empty: say what shows in its place -->
<tui-inline-edit label="Owner" empty="Add an owner">
  <button class="tui-inline-edit__print" type="button"><span class="tui-inline-edit__text"></span></button>
  <input class="tui-inline-edit__input" name="owner" hidden>
</tui-inline-edit>

import { inlineEditResolve } from '/kit/kit.mjs';

const title = document.querySelector('tui-inline-edit');
title.addEventListener('tui-inline-edit', (e) => {
  api.rename(e.detail.value);                  // saved; e.detail.previous is what it was
});

title.value;                                    // 'Northwind billing'
inlineEditResolve({ action: 'save', previous: 'A', draft: ' B ', label: 'Name' });
// { outcome: 'saved', value: 'B', done: true, say: 'Name saved: B' }

Needs kit.css and kit.mjs. How to install the kit.

• The words are a native <button> named by what they say and what they are for, “Northwind billing, edit project name”, so the visible words are the start of the name.
• The field has the same label, “Project name”, and opens with its text selected and the focus in it. A screen reader says it as an edit field with that name.
• Every outcome is said aloud by a polite status line: “Project name saved: Northwind payouts”, “Edit cancelled. Project name is Northwind billing”, “Project name cannot be empty”.
• Enter and Escape return the focus to the words; moving away with Tab or a click does not take it back, so it goes where the person was heading.
• Escape is not passed on, so a dialog around the field is not closed by the key that was cancelling an edit. Enter does nothing while an input method is composing.
• The pencil is always shown on a phone, where there is no hover to find it by, and the field is 48px tall there with a 16px text size. The state never relies on colour.

The words and the field are the same height and the same type, with the same padding, so opening it moves nothing. At rest there is no cap at all: only the kit’s printing, with a hairline outline and a pencil on hover or focus. Open, the field is the field’s own well. The page keeps one real input for the whole life of the part, hidden when it is not being edited, so it posts, validates and resets like any other. The script is the small decision table in inlineEditResolve and the focus that follows it.