Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Add navigate support for replacing html attributes #9149

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Add navigate support for replacing html attributes #9149

wants to merge 3 commits into from

Conversation

joshhanley
Copy link
Member

The scenario

Currently if you use wire:navigate and change to a different page, the new pages <html> element attributes are not added and the old ones aren't cleaned up.

This is noticeable with Flux, when you have a wire:navigate link inside a modal. When you open a modal, styles are applied to the <html> element to stop the page in the background from scrolling. But when you navigate to the new page, the anti-scroll styles are still applied, stopping the page from being scrollable.

Recording 2025-01-21 at 19 40 53

<?php

use Livewire\Volt\Component;

new class extends Component
{
    //
};
?>

<div>
    <div class="h-screen">Some long content to demonstrate the scroll not working</div>

    <flux:modal.trigger name="example">
        <flux:button>Launch modal</flux:button>
    </flux:modal.trigger>

    <flux:modal name="example">
        <flux:button :href="request()->url()" wire:navigate>
            Go to me
        </flux:button>
    </flux:modal>
    <div class="h-screen">Some morelong content to demonstrate the scroll not working</div>
</div>

The problem

The issue is that wire:navigate doesn't have any facility for replacing attributes on the <html> element.

The solution

This PR adds support for replacing the page's <html> element attributes with the new pages <html> attributes.

I've structured this so it does a comparison between the old and new attributes, and updates the existing ones if there has been a change and removes any that are no longer needed. By doing it this way, we don't trigger any changes for attributes that are the same on both pages.

Fixes livewire/flux#839

@joshhanley joshhanley mentioned this pull request Jan 21, 2025
Open
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Scroll lock styles not being cleaned up on Navigate
1 participant
@joshhanley