From f18cda45bdcdb28b28235ac6da24684c05f11a85 Mon Sep 17 00:00:00 2001
From: Jorge Manrubia <jorge@hey.com>
Date: Thu, 16 Oct 2025 16:31:32 +0200
Subject: [PATCH] Fix: show updated values in the column form after saving

This removes the data turbo permanent attribute and instead, prevent the dialog closing
automatically (so that a page refresh does not make you lose context)

https://fizzy.37signals.com/5986089/cards/2300/
---
 app/javascript/controllers/dialog_controller.js       | 7 +++++++
 app/views/collections/columns/update.turbo_stream.erb | 2 +-
 app/views/collections/show/menu/_column.html.erb      | 4 ++--
 app/views/collections/show/menu/_column_form.html.erb | 1 +
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/app/javascript/controllers/dialog_controller.js b/app/javascript/controllers/dialog_controller.js
index 44876b231..e9f8f990c 100644
--- a/app/javascript/controllers/dialog_controller.js
+++ b/app/javascript/controllers/dialog_controller.js
@@ -43,4 +43,11 @@ export default class extends Controller {
   closeOnClickOutside({ target }) {
     if (!this.element.contains(target)) this.close()
   }
+
+  preventCloseOnMorphing(event) {
+    if (event.detail?.attributeName === "open") {
+      event.preventDefault()
+      event.stopPropagation()
+    }
+  }
 }
diff --git a/app/views/collections/columns/update.turbo_stream.erb b/app/views/collections/columns/update.turbo_stream.erb
index f6ccbe55b..5ab9915a0 100644
--- a/app/views/collections/columns/update.turbo_stream.erb
+++ b/app/views/collections/columns/update.turbo_stream.erb
@@ -1 +1 @@
-<%= turbo_stream.replace(dom_id(@column), partial: "collections/show/column", method: :morph, locals: { column: @column }) %>
\ No newline at end of file
+<%= turbo_stream.replace(dom_id(@column), partial: "collections/show/column", method: :morph, locals: { column: @column }) %>
diff --git a/app/views/collections/show/menu/_column.html.erb b/app/views/collections/show/menu/_column.html.erb
index 5ba6bde6a..0be3c12c4 100644
--- a/app/views/collections/show/menu/_column.html.erb
+++ b/app/views/collections/show/menu/_column.html.erb
@@ -1,4 +1,4 @@
-<div class="cards__expander-menu" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" data-turbo-permanent>
+<div id="<%= dom_id(column, :menu) %>" class="cards__expander-menu" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
   <button class="btn btn--circle txt-x-small borderless" data-action="click->dialog#open">
     <%= icon_tag "menu-dots-horizontal", class: "translucent" %>
     <span class="for-screen-reader">Column options</span>
@@ -26,7 +26,7 @@
 
   <div data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
     <button id="<%= dom_id(column, :manage_menu) %>" class="popup__btn btn" data-action="click->dialog#open:stop" data-clicker-target="clickable" hidden aria-hidden>Save changes</button>
-    <dialog class="popup panel flex-column gap-half fill-white shadow txt-small margin-block-double" data-dialog-target="dialog">
+    <dialog class="popup panel flex-column gap-half fill-white shadow txt-small margin-block-double" data-dialog-target="dialog" data-action="turbo:before-morph-attribute->dialog#preventCloseOnMorphing">
       <%= render "collections/show/menu/column_form", collection: column.collection, column: column, label: "Save changes" %>
     </dialog>
   </div>
diff --git a/app/views/collections/show/menu/_column_form.html.erb b/app/views/collections/show/menu/_column_form.html.erb
index 1382d4745..7b7ee4c44 100644
--- a/app/views/collections/show/menu/_column_form.html.erb
+++ b/app/views/collections/show/menu/_column_form.html.erb
@@ -1,6 +1,7 @@
 <%= form_with model: [collection, column], data: { controller: "form", action: "turbo:submit-end->dialog#close turbo:submit-end->form#reset" } do |form| %>
   <%= form.text_field :name, class: "input", placeholder: "Name this column", value: column.name,
         required: true, autocomplete: "off", pattern: ".*\\S.*", title: "Column name cannot be blank", data: { action: "focus->form#select" } %>
+
   <div class="color-picker__colors">
     <% ([Card::DEFAULT_COLOR] + Card::COLORS).each do |color| %>
       <label class="btn txt-small borderless" style="--btn-background: <%= color %>" title="<%= color %>">