-
Notifications
You must be signed in to change notification settings - Fork 415
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Morphing is updates an a
tag, but not it's content, but only on the client who initiated the action
#1189
Comments
@trobrock Your model needs to broadcast the change and your view needs to subscribe to changes from that model. Watch the demo video in this sample repo: https://github.com/basecamp/turbo-8-morphing-demo/tree/page-refreshes and then you can reference the code in this branch. I've come back to this sample project many times as I've gotten morphing to work in my app. :) |
I don't think this issue you've opened is an issue with the project so it's probably worth closing. |
@krschacht I have broadcast in the model and am subscribed in the view, which is why the page on the left is updating with morphing just fine. The issue is on the right screen the morphing happens but only updates the a tag, not the contents within that same a tag. |
@krschacht for more context, here is my diff to enable morphing: diff --git a/app/models/housekeeping.rb b/app/models/housekeeping.rb
index 4786943e..bb86fe50 100644
--- a/app/models/housekeeping.rb
+++ b/app/models/housekeeping.rb
@@ -17,7 +17,9 @@ class Housekeeping < ApplicationRecord
scope :today, -> { where(date: Time.zone.today) }
- after_commit :broadcast_update
+ # after_commit :broadcast_update
+
+ broadcasts_refreshes
has_rich_text :notes
diff --git a/app/views/housekeepings/show.html.haml b/app/views/housekeepings/show.html.haml
index 06058684..dceb2b48 100644
--- a/app/views/housekeepings/show.html.haml
+++ b/app/views/housekeepings/show.html.haml
@@ -1,6 +1,8 @@
= title @housekeeping.unit.name
= subtitle @housekeeping.clean_type.humanize
+= turbo_stream_from @housekeeping
+
- if @housekeeping.inspection_failed? && @housekeeping.assigned_to?(Current.user)
.p-4.bg-contrast.rounded-lg.md:flex.items-center.justify-between.mb-8.mt-4.lg:mt-0
.flex.items-center.space-x-4.text-white.font-bold.mb-4.md:mb-0
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 9edc8e6b..612b7379 100644
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -37,6 +37,7 @@
%meta{ name: 'turbo-prefetch', content: true }
%meta{ name: 'view-transition', content: 'same-origin' }
+ = turbo_refreshes_with method: :morph, scroll: :preserve
= yield :head
:javascript Also, here is the HTML before and after I click the button. <a class="inline-block flex items-center justify-center transition-all transform-gpu duration-150 disabled:opacity-25 disabled:cursor-not-allowed disabled:shadow-none px-5 py-3 border border-secondary bg-secondary hoverable:hover:bg-secondary-dark hoverable:hover:border-secondary-dark hoverable:active:bg-secondary active:bg-secondary-dark text-white w-full rounded-none" data-turbo-method="post" href="/housekeeping/12/pause"><div class="flex flex-col lg:flex-row items-center">
<svg class="fill-current -ml-0.5 hidden spin fill-current w-4 h-4 lg:mr-3" data-button-loading-target="loadingIcon" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M477.7 384c21.8-37.7 34.3-81.4 34.3-128C512 114.6 397.4 0 256 0V32c123.7 0 224 100.3 224 224c0 40.8-10.9 79.1-30 112l27.7 16z"></path></svg>
<svg class="fill-current fill-current w-4 h-4 lg:mr-3" data-button-loading-target="icon" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M32 96V416h80V96H32zM0 64H32h80 32V96 416v32H112 32 0V416 96 64zM208 96V416h80V96H208zM176 64h32 80 32V96 416v32H288 208 176V416 96 64z"></path></svg>
<span>Pause</span>
</div>
</a> After: <a class="inline-block flex items-center justify-center transition-all transform-gpu duration-150 disabled:opacity-25 disabled:cursor-not-allowed disabled:shadow-none px-5 py-3 border border-secondary bg-secondary hoverable:hover:bg-secondary-dark hoverable:hover:border-secondary-dark hoverable:active:bg-secondary active:bg-secondary-dark text-white w-full rounded-none" data-turbo-method="post" href="/housekeeping/12/resume"><div class="flex flex-col lg:flex-row items-center">
<svg class="fill-current -ml-0.5 hidden spin fill-current w-4 h-4 lg:mr-3" data-button-loading-target="loadingIcon" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M477.7 384c21.8-37.7 34.3-81.4 34.3-128C512 114.6 397.4 0 256 0V32c123.7 0 224 100.3 224 224c0 40.8-10.9 79.1-30 112l27.7 16z"></path></svg>
<svg class="fill-current fill-current w-4 h-4 lg:mr-3" data-button-loading-target="icon" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M32 96V416h80V96H32zM0 64H32h80 32V96 416v32H112 32 0V416 96 64zM208 96V416h80V96H208zM176 64h32 80 32V96 416v32H288 208 176V416 96 64z"></path></svg>
<span>Pause</span>
</div>
</a> Then the HTML if I just refresh the browser window: <a class="inline-block flex items-center justify-center transition-all transform-gpu duration-150 disabled:opacity-25 disabled:cursor-not-allowed disabled:shadow-none px-5 py-3 border border-secondary bg-secondary hoverable:hover:bg-secondary-dark hoverable:hover:border-secondary-dark hoverable:active:bg-secondary active:bg-secondary-dark text-white w-full rounded-none" data-turbo-method="post" href="/housekeeping/12/resume"><div class="flex flex-col lg:flex-row items-center">
<svg class="fill-current fill-current w-4 h-4 lg:mr-3" data-button-loading-target="icon" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M32 461.3L0 480V443 69 32L32 50.7 352.2 237.5 384 256l-31.8 18.5L32 461.3zM320.5 256L32 87.7V424.3L320.5 256z"></path></svg>
<span>Resume</span>
</div>
</a> You'll notice in the before and after the URL of the button gets updated via morphing, but the content does not. Let me know if there is anything else I can provide. |
@krschacht I managed to reproduce this with this repo here: https://github.com/trobrock/rails-morphing-bug It's worth also mentioning that using a button_tag instead of a link_to works, but I'm not sure why the link tag causes it to break. |
Hi @trobrock, ah, I see! You're definitely right that it's a bug. I pulled your repo and added a couple other elements to the page too just to convince myself it was morphing. You can see in this animated gif that my |
@krschacht I currently suspect it's something to do with the fact that turbo handles the link click, but I don't know the internals well enough to really know. Morphing works great on this page, except on the link you click. Super weird. If I can help at all, please let me know. I was able to re-work my code to use button_to, so I'm not blocked on launching morphing anymore. |
Yes, that's what I thought too. I've tee'd up a couple PRs for Turbo but I don't know it well. I looked a few places that I suspect may be the root, like |
@krschacht happy to spend some time tracking it down, do you have any recommendations on the easiest way to run a development copy of turbo on this project that I can add those logs into? |
Here's my specific recommendation:
Good luck spelunking. :) Hopefully that's enough to get you started. And even if you aren't able to track down the bug, even just submitting a PR with a test that repros the bug will be valuable. |
I am trying to get morphing into my app, but am running into a weird bug.
I have an a tag with a single span inside it. When the user clicks the link it hits the controller, updates the object, and redirects back. This also kicks off a refresh.
Everything works fine with morphing on other clients, but the one who initiated the action doesn't have their button text updated, but the actual link updates.
Heres a video:
![morphing-bug](https://private-user-images.githubusercontent.com/94053/305548871-bb553aee-3f1a-4287-9b1d-ed37e29306c2.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEyNDkyNDYsIm5iZiI6MTcyMTI0ODk0NiwicGF0aCI6Ii85NDA1My8zMDU1NDg4NzEtYmI1NTNhZWUtM2YxYS00Mjg3LTliMWQtZWQzN2UyOTMwNmMyLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzE3VDIwNDIyNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTg1Y2NhZWYyY2E2M2Y1MWQ1NjM3ZTk1ZjAxMjA5MWY3YmQ1MDY3NjFiNWMyY2MxZTYxMDc1MjRmMzc3MTgwYzQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.x2cJ1CeMM-kZ5kbRYZQIZjeeZSPjXejJxxpyTRDzVnI)
Here is the relevant HTML
![Screenshot 2024-02-16 at 3 23 02 PM](https://private-user-images.githubusercontent.com/94053/305549059-e923d833-4212-4439-ba5b-2bf9612e6e20.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEyNDkyNDYsIm5iZiI6MTcyMTI0ODk0NiwicGF0aCI6Ii85NDA1My8zMDU1NDkwNTktZTkyM2Q4MzMtNDIxMi00NDM5LWJhNWItMmJmOTYxMmU2ZTIwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzE3VDIwNDIyNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWJmYWE1ZDY1NDMxZjY0NTEyZmNlMDIwZTg1MTIzNThiZWQxMjQwYzE4YjQ5YzFmNDk1ZmUxMGViNDM3N2VmZmEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.oyOW4oB6ODzpxPRvib49L3-4W2LAMV8oPlSjbywedD4)
And the controller action:
Am I doing something wrong?
The text was updated successfully, but these errors were encountered: