Skip to content

Component polish: search-picker on-focus, nav_tabs pulse, multilang auto switch-handler - #643

Merged
ddon merged 3 commits into
BeamLabEU:mainfrom
mdon:main
Jul 17, 2026
Merged

Component polish: search-picker on-focus, nav_tabs pulse, multilang auto switch-handler#643
ddon merged 3 commits into
BeamLabEU:mainfrom
mdon:main

Conversation

@mdon

@mdon mdon commented Jul 17, 2026

Copy link
Copy Markdown
Contributor

Small component-polish / DX commits.

The first two came out of the projects calendar work (BeamLabEU/phoenix_kit_projects#30 uses both, but degrades gracefully without them); the third came out of the publishing group-name translation work.

search_on_focus attr on the search picker

The SearchPicker hook has always honored data-search-on-focus (open the dropdown in browse mode when the empty input is focused/clicked — offer options before any typing), but the component never exposed it: consumers had to know the raw data attribute and pass it through the global rest. It is now a documented boolean attr rendering that same attribute; the raw form keeps working for existing call sites.

nav_tabs in-flight pulse

Tab buttons that push an event now pulse (phx-click-loadinganimate-pulse) while the switch is round-tripping, so a click on a slower tab is visibly acknowledged instead of appearing dead. Navigation-style tabs are unaffected.

MultilangForm auto-handles the "switch_language" event

mount_multilang/2 now attaches a :handle_event hook (mirroring its existing debounced :handle_info hook) that calls handle_switch_language/2 and halts — so consumers no longer need their own def handle_event("switch_language", …) clause. Forgetting that clause previously crashed the LiveView on the first language-tab click, a silent footgun since mount_multilang already wired the other half of the switching protocol (the handle_info timer) automatically.

  • Existing consumers' manual clauses keep working (the hook halts first; the clause becomes harmless dead code).
  • Opt out with mount_multilang(socket, auto_switch_language: false) when a form switches language immediately, without the debounce (catalogue's import screen does this).
  • Also documents a storage footgun: merge_translatable_params/4 / put_language_data/3 take over the schema's data JSONB (restructuring it into a per-language shape), so schemas whose data already holds unrelated keys must not point the helper at data — use translatable_field's settings-translations mode instead.

Testing

  • mix test test/phoenix_kit_web/components/core/search_picker_test.exs — 6 tests, 0 failures (rebased onto current main, full compile clean with --warnings-as-errors).
  • Browser-verified through the projects module: browse-on-focus lists people via the documented attr, and the project List/Timeline/Calendar tab switches pulse while loading.
  • MultilangForm change: compiles clean (--warnings-as-errors); language-tab switching verified in-app via the publishing group-name edit form (tabs switch without any per-consumer switch_language handler). All existing multilang consumers across the workspace delegate to handle_switch_language/2, so the auto-hook is behaviour-preserving for them; the one immediate-switch consumer (catalogue import) opts out.

mdon and others added 3 commits July 17, 2026 06:42
The SearchPicker hook has always honored data-search-on-focus (open the
dropdown in browse mode on click/focus of the EMPTY input — the boss's
picker rule: offer options before any typing), but the component never
exposed it: consumers had to know the raw data attribute and pass it
through the global rest. It's now a documented boolean attr rendering
that same attribute, with the raw form still honored for existing call
sites. Off by default; without it a multi-mode picker also can't reopen
after a pick clears the input.
Tab content that needs server work (e.g. a calendar tab computing
schedules on first open) left the click without feedback. The event
variant of the tab button now rides LiveView's phx-click-loading tag
with an animate-pulse variant — pure class addition, no API change.
mount_multilang/2 now attaches a :handle_event hook (mirroring its existing
debounced :handle_info hook) that calls handle_switch_language/2 and halts, so
consumers no longer need their own def handle_event("switch_language", …)
clause. Forgetting that clause previously crashed the LiveView on the first
language-tab click — a silent footgun, since mount_multilang already wired the
other half of the switching protocol (the handle_info timer) automatically.

Existing consumers' manual clauses keep working (the hook halts first; the
clause becomes harmless dead code). Opt out with
mount_multilang(socket, auto_switch_language: false) when a form switches
language without the debounce (catalogue's import screen does this).

Also documents a storage footgun: merge_translatable_params/put_language_data
take over the schema's `data` JSONB (restructuring it into a per-language
shape), so schemas whose `data` holds unrelated keys must not point the helper
at `data` — use translatable_field's settings-translations mode instead.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@mdon mdon changed the title Search picker search_on_focus attr + nav_tabs in-flight pulse Component polish: search-picker on-focus, nav_tabs pulse, multilang auto switch-handler Jul 17, 2026
@ddon
ddon merged commit cf8a6c1 into BeamLabEU:main Jul 17, 2026
@ddon

ddon commented Jul 17, 2026

Copy link
Copy Markdown
Contributor

Merged and took into work and release

ddon pushed a commit that referenced this pull request Jul 17, 2026
Closes a test-coverage gap on mount_multilang/2's new switch_language
handle_event hook (and auto_switch_language: false opt-out) — the
pre-existing handle_info hook it's modeled on had the same gap.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
ddon pushed a commit that referenced this pull request Jul 17, 2026
Multilang auto switch-language hook, search-picker on-focus attr,
nav_tabs pulse feedback.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
ddon pushed a commit that referenced this pull request Jul 18, 2026
…7.201

Reviewed PR #645 (media picker circle, selector route shadowing, and a
media-surface bug sweep) — clean pass, no findings. Fixed an unrelated
pre-existing credo --strict failure (nested-module aliasing suggestion in
multilang_form_test.exs from PR #643) that was silently preventing
dialyzer from running as part of mix precommit.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
alexdont pushed a commit to alexdont/phoenix_kit that referenced this pull request Jul 18, 2026
Credo --strict flagged three fully-qualified Phoenix.LiveView.Lifecycle
calls (nested-module-alias suggestion) from PR BeamLabEU#643, which turned
mix precommit red. Alias it at the top and use the short form.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MsjUy1HnuJnCSrqdbnANYL
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants