fix flash and morph

app/javascript/application.js

@@ -67,6 +67,7 @@ import ScrollFade from './elements/scroll_fade'
 import OpenModalMobile from './elements/open_modal_mobile'
 import HistoryBack from './elements/history_back'
 import DatePlaceholder from './elements/date_placeholder'
+import FlashMessage from './elements/flash_message'
 
 
 
@@ -80,6 +81,10 @@ document.addEventListener('keyup', (e) => {
   }
 })
 
+document.addEventListener('turbo:morph', () => {
+  document.activeElement?.blur()
+})
+
 document.addEventListener('turbo:before-fetch-request', (event) => {
   event.detail.fetchOptions.headers['X-Turbo'] = 'true'
 })
@@ -182,6 +187,7 @@ safeRegisterElement('scroll-fade', ScrollFade)
 safeRegisterElement('open-modal-mobile', OpenModalMobile)
 safeRegisterElement('history-back', HistoryBack)
 safeRegisterElement('date-placeholder', DatePlaceholder)
+safeRegisterElement('flash-message', FlashMessage)
 
 safeRegisterElement('template-builder', class extends HTMLElement {
   connectedCallback () {

app/javascript/elements/flash_message.js

@@ -0,0 +1,47 @@
+import { actionable } from '@github/catalyst/lib/actionable'
+
+export default actionable(class extends HTMLElement {
+  connectedCallback () {
+    this.addEventListener('turbo:morph-element', this.onMorph)
+
+    this.show()
+  }
+
+  disconnectedCallback () {
+    this.removeEventListener('turbo:morph-element', this.onMorph)
+
+    clearTimeout(this.closeTimeout)
+  }
+
+  onMorph = (event) => {
+    if (event.target !== this) return
+
+    this.show()
+  }
+
+  show () {
+    clearTimeout(this.closeTimeout)
+
+    this.hideAnimation?.cancel()
+
+    this.animate([
+      { transform: 'translateY(-100%)', opacity: 0 },
+      { transform: 'translateY(0)', opacity: 1 }
+    ], { duration: 200, easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)' })
+
+    this.closeTimeout = setTimeout(this.close, 2000)
+  }
+
+  close = (event) => {
+    event?.preventDefault()
+
+    clearTimeout(this.closeTimeout)
+
+    this.hideAnimation = this.animate([
+      { transform: 'translateY(0)', opacity: 1 },
+      { transform: 'translateY(-100%)', opacity: 0 }
+    ], { duration: 150, easing: 'ease-in', fill: 'forwards' })
+
+    this.hideAnimation.onfinish = () => this.remove()
+  }
+})

app/javascript/elements/native_action.js

@@ -11,6 +11,7 @@ export default class extends HTMLElement {
     if (!target && !this.dataset.native) return
 
     this.nativeId ||= `native-action-${++counter}`
+    this.id = this.nativeId
 
     if (target) target.dataset.nativeId = this.nativeId
 

app/javascript/elements/native_modal.js

@@ -9,7 +9,8 @@ export default class extends HTMLElement {
   }
 
   onSubmit = (e) => {
-    if (!e.detail.success || e.detail.fetchResponse?.redirected) return
+    if (!e.detail.success) return
+    if (e.detail.fetchResponse?.redirected && e.detail.fetchResponse.location.href !== window.location.href) return
     if (e.detail.formSubmission?.formElement?.method === 'get') return
     if (this.dataset.closeAfterSubmit === 'false') return
     if (e.detail.formSubmission?.formElement?.dataset?.closeOnSubmit === 'false') return

app/views/shared/_flash.html.erb

@@ -1,9 +1,9 @@
 <% if turbo_native_app? %>
   <div id="native_flash" hidden data-notice="<%= flash[:notice] %>" data-alert="<%= flash[:alert] %>"></div>
 <% else %>
-  <div id="flash" class="absolute top-0 w-full h-0 z-20">
-    <div class="max-w-xl mx-auto mt-1.5">
-      <div class="px-4 py-3 rounded-2xl bg-base-200 flex items-center justify-between mx-4 md:mx-0">
+  <flash-message id="flash" class="fixed top-0 inset-x-0 z-50 block pointer-events-none">
+    <div class="max-w-xl mx-auto mt-1.5 pointer-events-auto">
+      <div class="px-4 py-3 rounded-2xl bg-base-200 shadow flex items-center justify-between mx-4 md:mx-0">
         <div class="flex items-center space-x-3">
           <% if flash[:notice] %>
             <%= svg_icon('info_circle', class: 'stroke-info flex-none w-6 h-6') %>
@@ -14,8 +14,8 @@
             <span><%= flash[:notice] || flash[:alert] %></span>
           </div>
         </div>
-        <remove-on-event data-event-type="click" data-selector-id="flash" class="mr-1 cursor-pointer">&times;</remove-on-event>
+        <button type="button" data-action="click:flash-message#close" class="mr-1 cursor-pointer">&times;</button>
       </div>
     </div>
-  </div>
+  </flash-message>
 <% end %>