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.

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

Scroll lock styles not being cleaned up on Navigate #839

Open
3 tasks done
Awesomolocity opened this issue Dec 10, 2024 · 2 comments
Open
3 tasks done

Scroll lock styles not being cleaned up on Navigate #839

Awesomolocity opened this issue Dec 10, 2024 · 2 comments
Assignees

Comments

@Awesomolocity
Copy link

Awesomolocity commented Dec 10, 2024

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
Copy link

decantr commented Dec 10, 2024

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
Copy link
Member

joshhanley commented Dec 11, 2024

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

@joshhanley joshhanley changed the title Using Flux:menu within Flux:dropdown adds overflow:hidden to root html element - which persists if you wire:navigate to a new page Scroll lock styles not being cleaned up on Navigate Dec 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants