Remove complete state from lazily-loaded frame

[wooly]

Is it possible to remove the complete state from a lazily-loaded frame, so that the next time it becomes visible, it will request its content again?

Whenever I try to removeAttribute('complete') on the frame, the complete changed observer here:

turbo/src/core/frames/frame_controller.js

Lines 101 to 105 in a247b35

	completeChanged() {
	if (this.#isIgnoringChangesTo("complete")) return
	this.#loadSourceURL()
	}

immediately re-requests the url, which is undesirable. I'd like to reset it to the same behaviour that it has when the page first loads (i.e. not-complete and empty).

I've tried setting the src to an empty string and then back again, but this still loads the content as part of the srcUrlChanged callback.

[brunoprietog]

Fixed in #1175

[wooly]

Hi @brunoprietog, I've just gotten round to upgrading to turbo 8.0.5 (I think this was closed as part of 8.0.4), but I'm still experiencing this issue. As soon as I removeAttribute("complete"), it just gets added in again straight away.

My use case is a dropdown menu that contains a turbo frame. Whenever the dropdown menu opens, the turbo frame should be requested. When the dropdown menu closes, the turbo frame is cleared and the complete attribute is removed, so that it is re-requested the next time the dropdown menu opens. When I upgrade to 8.0.5, the turbo frame is not requested and my dropdown stays empty.

[brunoprietog]

Could you show some code? Anyway, the complete attribute is not intended to be used that way. Instead, you could reload the Turbo frame maybe? Delete the contents of the Turbo frame with something like frame.replaceWith() and frame.src = null.

The complete attribute is read-only

[wooly]

I'll work up a little example if I can replicate the behaviour, definitely yep.

Hmm, the intention is not to reload the frame but to cause it to reset back to what it was before it was fetched, so when the element becomes visible again, it will trigger the fetch again.

[brunoprietog]

There's a better way to accomplish the same thing. Check this example:

<a href="/menu" popovertarget="menu" data-turbo-frame="menu" role="button">Menu</a>
<turbo-frame id="menu" popover></turbo-frame>

Each time you click on the link, the Turbo frame will reload from the URL/menu. If you click outside or press escape, the menu will close automatically thanks to the popover attribute.