Scroll lock styles not being cleaned up on Navigate

[Awesomolocity]

Flux version

v1.0.29

Livewire version

3.5.17

What is the problem?

If you use flux:menu within flux:dropdown, it'll add overflow:hidden to the root HTML element.
This style attribute persists if you then wire:navigate away from the page, which is probably not desirable behavior.

You may say "Well obviously! It says to utilize flux:navmenu on the dropdown documentation page for this exactly reason". Which is true, however, is pretty easy to miss if you are copying your navbar directly from the header documentation page, which uses this exact type of menu (it doesn't include wire:navigate - but also doesn't include any warning about the overflow:hidden behavior)

Code snippets

<flux:dropdown position="top" align="start">
    <flux:profile name="Sheldon" avatar="https://ui-avatars.com/api/?name=Sheldon&background=random" />
    <flux:menu>
        <flux:menu.item icon="user" :href="route('profile')" wire:navigate>{{ __('Profile') }}</flux:menu.item>
        <flux:menu.item icon="arrow-right-start-on-rectangle" wire:click="logout">{{ __('Log Out') }}</flux:menu.item>
    </flux:menu>
</flux:dropdown>

Results in overflow:hidden persisting on root html element when navigating to Profile

How do you expect it to work?

I'd either expect overflow:hidden to be removed from the element when navigating to a different page, OR for this possibly unexpected behavior to be more prominent within the documentation so that I could appropriately choose flux:navmenu as the sub-item and not experience this behavior.

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[decantr]

I think the same issue is affecting links inside of a modal as overflow:hidden remains on the root element as observed here.

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

<flux:modal name="example">
	<flux:button href="example/route" wire:navigate>
		Example
	</flux:button>
</flux:modal>

[joshhanley]

@Awesomolocity and @decantr thanks for reporting!

I can confirm this is happening. At the moment the lockStroll styles are not being cleaned up on page navigate.

Below is a Volt component that demonstrates the issue. Make sure to have npm run dev running so the content has height.

• Scroll down to the "Launch modal" button and launch the modal
• Then click on the "Go to me" button in the modal, which should navigate you to the same page you are on
• Then try and scroll again and it will be locked

@calebporzio I'm guessing we should set up a way to clean up flux stuff, so then a navigate listener can be set up to call that.

<?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>

[twoarmtom]

This sounds like it might be directly related to the issue that is also happening to me. Building my application I'm encountering problems where I can not scroll to content when it is past the visible window. After reading this issue, I can confirm that the behaviour I'm experiencing starts after I either use a flux:modal that uses a redirect in the component with navigate: true after modal confirmation, or if I use a flux:menu.item in a flux:dropdown to wire:navigate to another page.

Any page I navigate to after using the dropdown or modal, that has content that extends beyond the visible browser window, I cannot scroll to it. Changing to flux:navmenu and flux:navmenut.item fixes the dropdown to navigate issue, but not the modal issue.

Update: I just discovered that using a flux:modal as a delete button (with warning), in a table, renders the table un-scrollable after using (without any navigation redirect used). When visiting other pages, scroll behaviour remains broken.