# Turbo 8 Morph interfering with Turbo Frame

**URL:** <https://discuss.hotwired.dev/t/turbo-8-morph-interfering-with-turbo-frame/5491>\
**Category:** General\
**Created:** [December 10, 2023, 3:24pm UTC](https://discuss.hotwired.dev/t/turbo-8-morph-interfering-with-turbo-frame/5491 "2023-12-10T15:24:09Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![rctneil](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/rctneil/32/2082_2.png) [@rctneil](https://discuss.hotwired.dev/u/rctneil)\
**Post date:** [December 10, 2023, 3:24pm UTC](https://discuss.hotwired.dev/t/turbo-8-morph-interfering-with-turbo-frame/5491/1 "2023-12-10T15:24:09Z")

</div>

Hi,

In Turbo 8, I have a turbo-frame that gets updated when a form is submitted. That form updates the frame using `data: { turbo_frame: :object_grid` }`.

I’ve added `<% turbo_refreshes_with method: :morph %>` to my `application.html.erb`.

Now, the frame gets updated but then i get a full page refresh and the scroll reverts to the top.

I COULD preserve the scroll in the turbo\_refreshes\_with option above, but I don’t want that apart from when the action comes from the form submssion. In any case, the page refreshes and i don’t want that either.

I did try removing the turbo-frame and just letting morph deal with updating the grid of items below my filter form, but i can’t figure out how to allow the scroll position to be preserved BUT ONLY when a page refresh stems from the submission of my filter form and nowhere else.

Can anyone help me out here?

Thanks

---

<div class="post-metadata">

**Author:** ![orbitus](https://avatars.discourse-cdn.com/v4/letter/o/f6c823/32.png) [@orbitus](https://discuss.hotwired.dev/u/orbitus)\
**Post date:** [December 13, 2023, 8:48pm UTC](https://discuss.hotwired.dev/t/turbo-8-morph-interfering-with-turbo-frame/5491/2 "2023-12-13T20:48:32Z")

</div>

I am running into the same issue. I was using turbo stream action and turbo frame before and now with turbo\_refreshes\_with morph, I expect it to not refresh and do partial page update, but it refreshes the whole page.

---

<div class="post-metadata">

**Author:** ![rctneil](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/rctneil/32/2082_2.png) [@rctneil](https://discuss.hotwired.dev/u/rctneil)\
**Post date:** [December 16, 2023, 1:14pm UTC](https://discuss.hotwired.dev/t/turbo-8-morph-interfering-with-turbo-frame/5491/3 "2023-12-16T13:14:18Z")

</div>

Did you find a solution? Is anyone able to help?

---

<div class="post-metadata">

**Author:** ![orbitus](https://avatars.discourse-cdn.com/v4/letter/o/f6c823/32.png) [@orbitus](https://discuss.hotwired.dev/u/orbitus)\
**Post date:** [December 19, 2023, 12:29pm UTC](https://discuss.hotwired.dev/t/turbo-8-morph-interfering-with-turbo-frame/5491/4 "2023-12-19T12:29:43Z")

</div>

I could not. I did go back to Turbo 7 in the meantime.

---

<div class="post-metadata">

**Author:** ![rctneil](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/rctneil/32/2082_2.png) [@rctneil](https://discuss.hotwired.dev/u/rctneil)\
**Post date:** [December 21, 2023, 10:14pm UTC](https://discuss.hotwired.dev/t/turbo-8-morph-interfering-with-turbo-frame/5491/5 "2023-12-21T22:14:29Z")

</div>

Anyone have a solution here.

Let me try to explain the issue fresh:

I wish to morph changes. This works fine on normal page refreshes. On one page I have a set of filters. When a filter is set, the list of items in the grid below gets updated to reflect the filter selected.

Obviously turbo is seeing this as a page refresh. In this case I want to preserve the scroll. I can’t add preserve scroll to the application layout because that’s not the experience I want. I can’t add it solyely to that one page as I ONLY want the scroll to be preserved if the user sets a filter. Just that.

Does anyone have any fixes to this? Surely there’s a way?

I’ve also just noticed that Turbo 8 is breaking my existing turbo frame. The form has a data-turbo\_frame attribute with the id of a frame that wrap my object grid below. When a filter in the form was set, it used to just update the contents of the frame, but now the contents update but I also get moved back to the top of the page.

---

<div class="post-metadata">

**Author:** ![morsecode](https://yyz1.discourse-cdn.com/flex027/user_avatar/discuss.hotwired.dev/morsecode/32/3507_2.png) [@morsecode](https://discuss.hotwired.dev/u/morsecode)\
**Post date:** [December 24, 2023, 8:44pm UTC](https://discuss.hotwired.dev/t/turbo-8-morph-interfering-with-turbo-frame/5491/6 "2023-12-24T20:44:53Z")

</div>

I’m running into the same issue. Think of the app slack. I have a very similar chat app. On the left side I have a list of conversations. Then when you click the conversation it loads on the right. Right now I’m using a turbo frame for the conversation. When you click a conversation on the left it triggers the conversation turbo frame. Since upgrading to Turbo 8 with morph. Whenever I click into a conversation it causes full reload and the conversation list loses scroll position.
