Stabilize frontmatter property autocomplete and input focus behavior #64

New issue

Closed

opened 2026-05-21 13:29:33 +00:00 by steve · 0 comments

steve commented

2026-05-21 13:29:33 +00:00

Owner

Context

Audit findings from the current implementation:

frontmatter.svelte creates a new imperative Menu().popover() for every
property key input and wires keyup/click listeners from a Svelte action
without a destroy hook. Re-renders can leave stale listeners and popovers
alive.
The autocomplete only copies the selected suggestion into the input value; it
does not commit or validate until blur, which makes suggestion selection and
rename behavior depend on fragile focus timing.
Suggestions are unbounded and shown at the mouse event instead of being
anchored to the input, so keyboard navigation and focus containment are weak.
Property rows are keyed by md5("${key}:${value}"); value edits can recreate
the key input while the user is interacting with autocomplete.
The same component is mounted in live-preview frontmatter, the file
properties side view, and reading/preview frontmatter blocks, so the instability
is visible across the app.

Acceptance Criteria

Property-name suggestions are rendered through a lifecycle-owned Svelte/UI
surface or a cleanup-safe helper with deterministic teardown.
Suggestion popovers are anchored to the input, support keyboard selection, and
do not close or commit unexpectedly while selecting an item.
Selecting a suggestion either explicitly commits the rename/add operation or
keeps the input in a clearly pending state with validation feedback.
Property row identity is stable across value edits so active inputs and
autocomplete state are not destroyed by unrelated value changes.
Duplicate-name and invalid-name feedback works for top-level and nested
properties without focus loops.
The implementation works consistently in live-preview frontmatter, the file
properties side view, and rendered preview frontmatter.

Notes

Relevant files:

packages/plugins/plugin-markdown/src/lib/components/frontmatter/frontmatter.svelte
packages/plugins/plugin-markdown/src/lib/components/frontmatter/widgets.ts
packages/plugins/plugin-markdown/src/lib/views/file-properties/file-properties.svelte

Implementation Summary

Closed the frontmatter autocomplete/input stabilization work that now uses the dedicated property-name input flow with stable popover ownership, preserved focus behavior, and workspace regression coverage.

Replace the current frontmatter property-name autocomplete with a stable, accessible interaction model that does not steal focus, leak menu/listener state, or leave users with partially applied names. ## Context Audit findings from the current implementation: - `frontmatter.svelte` creates a new imperative `Menu().popover()` for every property key input and wires `keyup`/`click` listeners from a Svelte action without a destroy hook. Re-renders can leave stale listeners and popovers alive. - The autocomplete only copies the selected suggestion into the input value; it does not commit or validate until blur, which makes suggestion selection and rename behavior depend on fragile focus timing. - Suggestions are unbounded and shown at the mouse event instead of being anchored to the input, so keyboard navigation and focus containment are weak. - Property rows are keyed by `md5("${key}:${value}")`; value edits can recreate the key input while the user is interacting with autocomplete. - The same component is mounted in live-preview frontmatter, the file properties side view, and reading/preview frontmatter blocks, so the instability is visible across the app. ## Acceptance Criteria - Property-name suggestions are rendered through a lifecycle-owned Svelte/UI surface or a cleanup-safe helper with deterministic teardown. - Suggestion popovers are anchored to the input, support keyboard selection, and do not close or commit unexpectedly while selecting an item. - Selecting a suggestion either explicitly commits the rename/add operation or keeps the input in a clearly pending state with validation feedback. - Property row identity is stable across value edits so active inputs and autocomplete state are not destroyed by unrelated value changes. - Duplicate-name and invalid-name feedback works for top-level and nested properties without focus loops. - The implementation works consistently in live-preview frontmatter, the file properties side view, and rendered preview frontmatter. ## Notes Relevant files: - `packages/plugins/plugin-markdown/src/lib/components/frontmatter/frontmatter.svelte` - `packages/plugins/plugin-markdown/src/lib/components/frontmatter/widgets.ts` - `packages/plugins/plugin-markdown/src/lib/views/file-properties/file-properties.svelte` ## Implementation Summary Closed the frontmatter autocomplete/input stabilization work that now uses the dedicated property-name input flow with stable popover ownership, preserved focus behavior, and workspace regression coverage.

steve

2026-05-21 13:29:33 +00:00