mirror of
https://github.com/tiennm99/coolify.git
synced 2026-10-15 20:15:45 +00:00
fix(ui): stabilize domain controls and unify resource navigation
Preserve optimistic listbox selections during Livewire saves, refresh service domains after updates, and align application, service, and server navigation layouts.
This commit is contained in:
1 parent
3f47d41880
commit
41b3ed95aa
21 files changed
+464
-954
No files matched your search
@@ -399,6 +399,34 @@ do not create an unnecessarily wide menu.
|
||||
Toolbar filter and sort buttons keep static labels (`Filter`, `Sort`). The
|
||||
selected option is indicated inside the menu, not repeated on the trigger.
|
||||
|
||||
#### Livewire dropdown state synchronization
|
||||
|
||||
Instant-save listboxes must not flash back to an older value while Livewire is
|
||||
saving or morphing the DOM. Treat the Alpine selection as the current visual
|
||||
state until its request finishes:
|
||||
|
||||
- await the Livewire change handler and prevent overlapping selections while
|
||||
it is running;
|
||||
- when a client-managed listbox can be rerendered by an unrelated or stale
|
||||
Livewire response, use the listbox's `preserveValue` option so the morph does
|
||||
not replace its newer Alpine value;
|
||||
- scope `preserveValue` to controls whose value is owned by that interaction;
|
||||
do not use it when external server events must replace the displayed value;
|
||||
- after saving through a related model, refresh the parent component's loaded
|
||||
relationship before rendering the response. A database write alone does not
|
||||
update an already-loaded Eloquent collection;
|
||||
- use stable `wire:key` values for rows containing listboxes. Do not include the
|
||||
selected value in the key, because recreating the Alpine component causes a
|
||||
visible reset;
|
||||
- remember that a portalled options panel is teleported outside its visual
|
||||
wrapper. Guard selection in the Alpine handler itself rather than relying
|
||||
only on `pointer-events` or a disabled wrapper.
|
||||
|
||||
The failure mode to avoid is: selection B is shown optimistically, selection A
|
||||
is chosen next, the response for B morphs the listbox back to B, then the later
|
||||
response finally shows A. The control should remain on the newest accepted
|
||||
selection throughout the save sequence.
|
||||
|
||||
#### Multi-select filter dropdowns
|
||||
|
||||
Toolbar filters that can combine criteria use one multi-select listbox rather
|
||||
|
||||
Reference in new issue
Block a user