Skip to content

fix/direct-selectra-init-timing - #13

Merged
gajendrajena merged 4 commits into
masterfrom
fix/direct-selectra-init-timing
Mar 14, 2026
Merged

fix/direct-selectra-init-timing#13
gajendrajena merged 4 commits into
masterfrom
fix/direct-selectra-init-timing

Conversation

@BrijeshSajeev

@BrijeshSajeev BrijeshSajeev commented Mar 10, 2026

Copy link
Copy Markdown
Collaborator
  • This release improves reliability for direct <select x-selectra> usage in real applications (including Rails/Turbo environments).
  • Selectra now performs <select> auto-wrapping synchronously during plugin registration, ensuring initialization happens before Alpine processes the DOM.
  • A fallback alpine:init listener is retained for late-parsed content.
  • Result: direct-on-select integration is now consistent and no longer depends on event timing.

 - fix(alpine): reliably auto-wrap <select x-selectra> before Alpine DOM
   walk.
@BrijeshSajeev BrijeshSajeev changed the title Fix/direct selectra init timing fix/direct-selectra-init-timing Mar 10, 2026
@BrijeshSajeev

Copy link
Copy Markdown
Collaborator Author

Auto-wrapping is important because it preserves both HTML validity and Selectra behavior while keeping authoring simple.

Why Auto-Wrapping Matters

  • <select> cannot contain the Selectra UI markup.
    The Selectra template includes <div>, <input>, <template>, <svg>, etc. Those are invalid children of <select>, so browsers strip/reparent them unpredictably.

  • You still need the native <select> for forms.
    Selectra reads options from the native select, hides it, syncs selected values, and lets normal form submission work. Auto-wrapping gives you a container for the custom UI while preserving the original select.

  • Better DX for Rails/server-rendered forms.
    Users can write x-selectra directly on generated <select> fields (from f.select / helpers) without manually adding wrapper markup around every field.

  • Prevents timing fragility.
    Running wrap logic during plugin registration ensures wrapping is done before Alpine walks the DOM. This avoids missed initialization in environments like Turbo/deferred scripts.

…o more <div x-data="selectra({...})" x-selectra> wrappers. When JS is disabled, native <select> elements display as normal form controls.

 - Bump version to 1.1.0.
 - update readme
@gajendrajena
gajendrajena merged commit 80c342d into master Mar 14, 2026
1 check passed
@gajendrajena
gajendrajena deleted the fix/direct-selectra-init-timing branch March 14, 2026 14:51
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