fix: keep focus and caret when typing in ody-input text fields

Typing a character into <ody-input>, <ody-inline-input>, or
<ody-search-input> reflected the value back through the observed
`value` attribute, so the base class ran a destructive re-render on
every keystroke — recreating the native <input> and dropping focus
and caret position.

Override attributeChangedCallback in the three controlled inputs to
special-case `value`: push it into the live control in place via a
new reflectControlValue helper (a no-op when the control already
holds it, so the caret is never disturbed) and update the character
counter / clear button imperatively, skipping render(). Every other
observed attribute still re-renders chrome through the base.

ody-money-input / ody-percentage-input were already unaffected — they
write the private #value on input and only reflect on blur.

Adds regression tests (focus + caret retained across keystrokes,
clear button toggled in place, chrome still re-renders) and documents
the invariant in ARCHITECTURE.md.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: oskarbruening

docs/internal/ARCHITECTURE.md

@@ -245,6 +245,17 @@ Load-bearing rules:
   across re-renders through a `[data-ody-slot]` placeholder. The first render is
   deferred one microtask (so parser/`innerHTML` children are attached before the
   slot is captured); attribute-change re-renders are synchronous.
+- **Text fields update `value` in place, never re-render.** The native
+  `<input>`/`<textarea>` already reflects what the user typed, so a destructive
+  re-render on each keystroke would drop focus and caret. The controlled inputs
+  (`ody-input`, `ody-inline-input`, `ody-search-input`) therefore `override
+  attributeChangedCallback` to special-case `value`: they push it into the live
+  control via `reflectControlValue` (a no-op when the control already holds it)
+  and toggle the counter/clear-button imperatively, skipping `render()`. Every
+  other observed attribute changes chrome and still re-renders through the base.
+  (`ody-money-input`/`ody-percentage-input` sidestep the issue differently —
+  they write the private `#value` on input and only reflect the attribute on
+  blur, when focus has already left.)
 - **Localization (`i18n.ts`).** Components' built-in strings (aria-labels,
   default placeholders, check-in-status labels) go through `OdyElement.term(key)`
   / `localized(attr, key)`, never hardcoded. The active language is resolved from

src/ui/base.ts

@@ -168,6 +168,19 @@ export function classes(...parts: Array<string | false | null | undefined>): str
   return parts.filter(Boolean).join(' ');
 }
 
+/**
+ * Push a controlled `value` into a native input/textarea in place. Skips the
+ * write when the control already holds it (user typing has updated it) so the
+ * caret and selection are never disturbed. Used by the text-field components to
+ * reflect `value` changes without a destructive re-render.
+ */
+export function reflectControlValue(
+  control: HTMLInputElement | HTMLTextAreaElement | null,
+  value: string,
+): void {
+  if (control && control.value !== value) control.value = value;
+}
+
 /**
  * Register a custom element under `tag`, guarding against double registration
  * (and against running in a non-DOM environment such as a Node import).

src/ui/components/inline-input.ts

@@ -1,4 +1,4 @@
-import { OdyElement, classes, define } from '../base.js';
+import { OdyElement, classes, define, reflectControlValue } from '../base.js';
 import { iconSvg } from '../icons.js';
 
 export type OdyInlineInputSize = 'base' | 'small';
@@ -33,6 +33,29 @@ export class OdyInlineInput extends OdyElement {
     this.setAttribute('value', next);
   }
 
+  /**
+   * Reflect `value` into the live control in place — the native field already
+   * shows what the user typed, so rebuilding it (as a full re-render would)
+   * needlessly drops focus and caret. Every other observed attribute changes
+   * the chrome and still re-renders via the base implementation.
+   */
+  override attributeChangedCallback(name?: string, oldValue?: string | null, newValue?: string | null): void {
+    if (name === 'value') {
+      if (oldValue === newValue) return;
+      const value = newValue ?? '';
+      reflectControlValue(
+        this.querySelector<HTMLInputElement | HTMLTextAreaElement>(
+          '.ody-inline-input__field, .ody-inline-input__textarea',
+        ),
+        value,
+      );
+      this.#syncCounter(value);
+      this.#syncClearButton(value);
+      return;
+    }
+    super.attributeChangedCallback();
+  }
+
   protected render(): void {
     const size = this.attr('size', 'base');
     const isTextarea = this.flag('textarea');
@@ -80,12 +103,7 @@ export class OdyInlineInput extends OdyElement {
           ` placeholder="${this.esc(this.attr('placeholder'))}"${maxlengthAttr}` +
           `${isReadonly ? ' readonly' : ''}${isDisabled ? ' disabled' : ''} />`;
 
-    const clearEnabled =
-      !this.flag('no-clear') && !isDisabled && !isReadonly && value !== '';
-    const clearEl = clearEnabled
-      ? `<button type="button" class="btn ody-inline-input__clear-button" aria-label="${this.localized('clear-label', 'clear')}">` +
-          `${iconSvg('close', 'icon__svg clear-icon')}</button>`
-      : '';
+    const clearEl = this.#clearEnabled(value) ? this.#clearButtonHtml() : '';
 
     const showCounter = !isReadonly && !isDisabled && maxlength !== '';
     const footerNeeded = showCounter || caption !== '' || warning !== '' || info !== '';
@@ -124,7 +142,8 @@ export class OdyInlineInput extends OdyElement {
   #onInput = (event: Event): void => {
     event.stopPropagation();
     const value = (event.target as HTMLInputElement).value;
-    this.#syncCounter(value);
+    // Reflecting to the `value` attribute drives the counter and clear button
+    // in place (see attributeChangedCallback) without a focus-dropping rebuild.
     this.value = value;
     this.dispatchEvent(new CustomEvent('input', { detail: { value }, bubbles: true }));
   };
@@ -146,6 +165,30 @@ export class OdyInlineInput extends OdyElement {
     const max = this.attr('maxlength');
     if (counter && max) counter.textContent = `${value.length} / ${max}`;
   }
+
+  /** Whether the clear button should be shown for the given value. */
+  #clearEnabled(value: string): boolean {
+    return !this.flag('no-clear') && !this.flag('disabled') && !this.flag('readonly') && value !== '';
+  }
+
+  /** Markup for the clear button (shared by render and the in-place sync). */
+  #clearButtonHtml(): string {
+    return `<button type="button" class="btn ody-inline-input__clear-button" aria-label="${this.localized('clear-label', 'clear')}">` +
+      `${iconSvg('close', 'icon__svg clear-icon')}</button>`;
+  }
+
+  /** Add or remove the clear button in place as the value gains/loses content. */
+  #syncClearButton(value: string): void {
+    const existing = this.querySelector('.ody-inline-input__clear-button');
+    if (this.#clearEnabled(value)) {
+      if (existing) return;
+      const control = this.querySelector('.ody-inline-input__field, .ody-inline-input__textarea');
+      control?.insertAdjacentHTML('afterend', this.#clearButtonHtml());
+      this.querySelector('.ody-inline-input__clear-button')?.addEventListener('click', this.#onClear);
+    } else {
+      existing?.remove();
+    }
+  }
 }
 
 define('ody-inline-input', OdyInlineInput);

src/ui/components/input.ts

@@ -1,4 +1,4 @@
-import { OdyElement, classes, define } from '../base.js';
+import { OdyElement, classes, define, reflectControlValue } from '../base.js';
 import { iconSvg } from '../icons.js';
 
 export type OdyInputSize = 'base' | 'small';
@@ -44,6 +44,29 @@ export class OdyInput extends OdyElement {
     this.setAttribute('value', next);
   }
 
+  /**
+   * Reflect `value` into the live control in place — the native field already
+   * shows what the user typed, so rebuilding it (as a full re-render would)
+   * needlessly drops focus and caret. Every other observed attribute changes
+   * the chrome and still re-renders via the base implementation.
+   */
+  override attributeChangedCallback(name?: string, oldValue?: string | null, newValue?: string | null): void {
+    if (name === 'value') {
+      if (oldValue === newValue) return;
+      const value = newValue ?? '';
+      reflectControlValue(
+        this.querySelector<HTMLInputElement | HTMLTextAreaElement>(
+          '.ody-input__field, .ody-input__textarea',
+        ),
+        value,
+      );
+      this.#syncCounter(value);
+      this.#syncClearButton(value);
+      return;
+    }
+    super.attributeChangedCallback();
+  }
+
   protected render(): void {
     const size = this.attr('size', 'base');
     const isTextarea = this.flag('textarea');
@@ -90,12 +113,7 @@ export class OdyInput extends OdyElement {
           ` placeholder="${this.esc(this.attr('placeholder'))}"${maxlengthAttr}` +
           `${isReadonly ? ' readonly' : ''}${isDisabled ? ' disabled' : ''} />`;
 
-    const clearEnabled =
-      !this.flag('no-clear') && !isDisabled && !isReadonly && value !== '';
-    const clearEl = clearEnabled
-      ? `<button type="button" class="btn ody-input__clear-button" aria-label="${this.localized('clear-label', 'clear')}">` +
-          `${iconSvg('close', 'icon__svg clear-icon')}</button>`
-      : '';
+    const clearEl = this.#clearEnabled(value) ? this.#clearButtonHtml() : '';
 
     const showCounter = !isReadonly && !isDisabled && maxlength !== '';
     const messages = classes(
@@ -139,7 +157,8 @@ export class OdyInput extends OdyElement {
   #onInput = (event: Event): void => {
     event.stopPropagation();
     const value = (event.target as HTMLInputElement).value;
-    this.#syncCounter(value);
+    // Reflecting to the `value` attribute drives the counter and clear button
+    // in place (see attributeChangedCallback) without a focus-dropping rebuild.
     this.value = value;
     this.dispatchEvent(new CustomEvent('input', { detail: { value }, bubbles: true }));
   };
@@ -162,6 +181,30 @@ export class OdyInput extends OdyElement {
     const max = this.attr('maxlength');
     if (counter && max) counter.textContent = `${value.length} / ${max}`;
   }
+
+  /** Whether the clear button should be shown for the given value. */
+  #clearEnabled(value: string): boolean {
+    return !this.flag('no-clear') && !this.flag('disabled') && !this.flag('readonly') && value !== '';
+  }
+
+  /** Markup for the clear button (shared by render and the in-place sync). */
+  #clearButtonHtml(): string {
+    return `<button type="button" class="btn ody-input__clear-button" aria-label="${this.localized('clear-label', 'clear')}">` +
+      `${iconSvg('close', 'icon__svg clear-icon')}</button>`;
+  }
+
+  /** Add or remove the clear button in place as the value gains/loses content. */
+  #syncClearButton(value: string): void {
+    const existing = this.querySelector('.ody-input__clear-button');
+    if (this.#clearEnabled(value)) {
+      if (existing) return;
+      const control = this.querySelector('.ody-input__field, .ody-input__textarea');
+      control?.insertAdjacentHTML('afterend', this.#clearButtonHtml());
+      this.querySelector('.ody-input__clear-button')?.addEventListener('click', this.#onClear);
+    } else {
+      existing?.remove();
+    }
+  }
 }
 
 define('ody-input', OdyInput);

src/ui/components/search-input.ts

@@ -1,4 +1,4 @@
-import { OdyElement, classes, define } from '../base.js';
+import { OdyElement, classes, define, reflectControlValue } from '../base.js';
 import { iconSvg } from '../icons.js';
 
 export type OdySearchInputSize = 'base' | 'small';
@@ -37,6 +37,21 @@ export class OdySearchInput extends OdyElement {
     this.setAttribute('value', next);
   }
 
+  /**
+   * Reflect `value` into the live control in place — the native field already
+   * shows what the user typed, so rebuilding it (as a full re-render would)
+   * needlessly drops focus, caret and the `--focused` state. Every other
+   * observed attribute changes the chrome and still re-renders via the base.
+   */
+  override attributeChangedCallback(name?: string, oldValue?: string | null, newValue?: string | null): void {
+    if (name === 'value') {
+      if (oldValue === newValue) return;
+      reflectControlValue(this.querySelector<HTMLInputElement>('.ody-input__field'), newValue ?? '');
+      return;
+    }
+    super.attributeChangedCallback();
+  }
+
   protected render(): void {
     const size = this.attr('size', 'base');
     const isDisabled = this.flag('disabled');

test/ui/batch3a.test.ts

@@ -110,6 +110,55 @@ describe('ody-input', () => {
     fire(el.querySelector<HTMLInputElement>('.ody-input__field')!, 'input', 'abc');
     expect(el.querySelector('.ody-input__length-message')!.textContent).toContain('3 / 5');
   });
+
+  it('keeps focus and caret while typing (no destructive re-render on value)', async () => {
+    const el = await mount('<ody-input label="Name"></ody-input>');
+    const input = el.querySelector<HTMLInputElement>('.ody-input__field')!;
+    input.focus();
+    for (const text of ['a', 'ab', 'abc']) {
+      input.value = text;
+      input.setSelectionRange(text.length, text.length);
+      input.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+    const current = el.querySelector<HTMLInputElement>('.ody-input__field')!;
+    expect(current).toBe(input); // same node — never rebuilt
+    expect(document.activeElement).toBe(input); // focus retained
+    expect(input.selectionStart).toBe(3); // caret preserved
+    expect((el as HTMLElement & { value: string }).value).toBe('abc');
+  });
+
+  it('adds and removes the clear button in place as the value changes', async () => {
+    const el = await mount('<ody-input></ody-input>');
+    const input = el.querySelector<HTMLInputElement>('.ody-input__field')!;
+    expect(el.querySelector('.ody-input__clear-button')).toBeNull();
+    fire(input, 'input', 'x');
+    const clear = el.querySelector<HTMLButtonElement>('.ody-input__clear-button')!;
+    expect(clear).not.toBeNull();
+    expect(el.querySelector('.ody-input__field')).toBe(input); // still not rebuilt
+    clear.click(); // wired even though added after the initial render
+    expect((el as HTMLElement & { value: string }).value).toBe('');
+    expect(el.querySelector('.ody-input__clear-button')).toBeNull();
+  });
+
+  it('reflects a programmatic value into the live field without a rebuild', async () => {
+    const el = await mount<HTMLElement & { value: string }>('<ody-input></ody-input>');
+    const input = el.querySelector<HTMLInputElement>('.ody-input__field')!;
+    el.value = 'set externally';
+    expect(el.querySelector('.ody-input__field')).toBe(input);
+    expect(input.value).toBe('set externally');
+  });
+
+  it('still re-renders chrome for non-value attributes, and no-ops on an unchanged value', async () => {
+    const el = await mount('<ody-input value="hi"></ody-input>');
+    const input = el.querySelector<HTMLInputElement>('.ody-input__field')!;
+    // Re-setting the same value is a no-op — the field is not rebuilt.
+    el.setAttribute('value', 'hi');
+    expect(el.querySelector('.ody-input__field')).toBe(input);
+    // A chrome attribute (label) still re-renders via the base implementation.
+    el.setAttribute('label', 'Name');
+    expect(el.querySelector('.ody-input__label')!.textContent).toBe('Name');
+    expect(el.querySelector('.ody-input__field')).not.toBe(input); // rebuilt
+  });
 });
 
 describe('ody-inline-input', () => {