mirror of
https://github.com/we-promise/sure.git
synced 2026-08-05 16:42:18 +00:00
07a3413250
* fix(ds): keep DS::Menu/Popover panels anchored across Turbo morphs The app refreshes pages via Turbo morph (`turbo_refreshes_with method: :morph`), and same-page account actions (disable, exclude, set-default, etc.) trigger one. Two bugs in the shared floating-ui controllers surface as a result: - The panel's `position: fixed` only ever existed as a JS-applied inline style. Idiomorph resets every menu/popover's `style` attribute to match the server-rendered markup (which has none), silently stripping `position: fixed` from every panel on the page. The next dropdown/ popover opened before floating-ui's async recompute lands briefly renders in normal flex flow, shoving its own trigger sideways and making computePosition anchor to that phantom position instead of the real button. Fix: make `position: fixed` part of the static markup so it can never be stripped. - `this.show` was a plain instance property. Because the morph preserves the Stimulus controller in place (stable-id turbo frame), `this.show` doesn't reset when idiomorph re-closes the content element, so it can desync from the DOM and swallow the next click. Fix: derive `show` from the content element's own class instead of tracking it separately. Reproduced and verified against the actual Turbo/Stimulus/floating-ui pipeline in an isolated harness before and after the fix. * test(ds): add regression coverage for menu/popover reopen-after-morph Simulates what idiomorph does to an open panel on a same-page Turbo morph — resets the content element's class back to the always-hidden server-rendered markup and strips the JS-applied inline style, without going through toggle()/close(). Verified against the pre-fix controllers that this fails without the DOM-derived `show` getter.
33 lines
1.6 KiB
Plaintext
33 lines
1.6 KiB
Plaintext
<%= tag.div data: { controller: "DS--popover", DS__popover_placement_value: placement, DS__popover_offset_value: offset, DS__popover_mobile_fullwidth_value: mobile_fullwidth, testid: testid } do %>
|
|
<% if variant == :icon %>
|
|
<%= render DS::Button.new(variant: "icon", icon: icon, aria_label: trigger_aria_label, aria: { haspopup: "dialog", expanded: "false", controls: panel_id }, data: { DS__popover_target: "button" }) %>
|
|
<% elsif variant == :button %>
|
|
<%= button %>
|
|
<% elsif variant == :avatar %>
|
|
<%# Avatar trigger needs an explicit accessible name — the inner
|
|
avatar image is decorative. Caller must pass `aria_label:` or
|
|
the fallback `ds.popover.avatar_default_label` is used. %>
|
|
<button type="button"
|
|
data-DS--popover-target="button"
|
|
class="inline-flex items-center justify-center w-9 h-9 pointer-coarse:w-11 pointer-coarse:h-11 cursor-pointer rounded-full focus-ring"
|
|
aria-label="<%= trigger_aria_label %>"
|
|
aria-haspopup="dialog"
|
|
aria-expanded="false"
|
|
aria-controls="<%= panel_id %>">
|
|
<div class="w-9 h-9">
|
|
<%= render "settings/user_avatar", avatar_url: avatar_url, initials: initials %>
|
|
</div>
|
|
</button>
|
|
<% end %>
|
|
|
|
<div id="<%= panel_id %>" data-DS--popover-target="content" class="fixed px-2 lg:px-0 max-w-full hidden z-50">
|
|
<%= tag.div class: "mx-auto min-w-[200px] shadow-border-lg bg-container rounded-lg", style: ("max-width: #{max_width}" if max_width) do %>
|
|
<%= header %>
|
|
|
|
<%= tag.div class: class_names("py-1" => !no_padding) do %>
|
|
<%= custom_content %>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|