RRUI-002 · Select · Turbo Frames

Select duplicates / reinitialises after Turbo Frame replace

When a form using rui_select lived in a Turbo Frame and validation failed (422), the frame replaced and the select could appear duplicated — native RRUI chrome stacked with a second enhanced select UI.

Fixed · 0.51.2 reported against 0.51.1 resolved 2026-08-07

Resolution (gem owner). Diagnosis confirmed: the gem gave legacy enhancers nothing to key off. As of v0.51.2, every native form control carries a data-rui marker so global initialisers (e.g. Materialize) can be scoped with select:not([data-rui]). That one-line host change was applied in StockLive’s initialiser. Only apps with a global enhancer need it; the marker ships to everyone.

Summary

Component	`RapidRailsUI::Select::Component` (`f.rui_select`)
Status	Fixed in `0.51.2` (marker) + host scope where enhancers exist
Cause	No durable opt-out for legacy / global select enhancers on Turbo Frame replace
Now	`data-rui` on native controls; hosts use `select:not([data-rui])`

Repro (historical)

Put f.rui_select(…) inside a turbo_frame_tag form.
Load a page that also initialises Materialize (or any global select enhancer) on turbo:frame-load / turbo:load.
Submit so the server returns 422 and replaces the frame.
Was: Select looks duplicated / reinitialised (wrapper + native control / stacked chevrons).
Expected / now: One native RRUI select when enhancers respect :not([data-rui]).

What was going wrong

1. RRUI rendered a plain native select

<select … style="background-image: url('…chevron…')">
  <option>…</option>
</select>

CSS-only. No Stimulus. Documented as “no JavaScript required.”

2. Frame replace yielded a fresh select

The new markup had no “already enhanced” state. Host code that did document.querySelectorAll('select') + M.FormSelect.init wrapped it again.

3. No gem-level opt-out (pre-0.51.2)

No data-rui (or equivalent) marker
No Materialize browser-default class
USAGE did not state that Select must not be passed through FormSelect / Select2 / Choices

What landed in the gem

Stable data-rui marker on every native form control.
Documented host pattern: scope enhancers with select:not([data-rui]).
StockLive applied that one-line initialiser change; other apps only need it if they run a global enhancer.

Host initialiser pattern:

document.querySelectorAll('select:not([data-rui])')