livewire / flux

The official Livewire UI component library
https://fluxui.dev
488 stars 42 forks source link

Flux Navlist items lose focus when livewire update occurs #688

Closed colinmac17 closed 3 days ago

colinmac17 commented 1 week ago

Hi there! πŸ‘‹

Im attaching a screen recording of the behavior. Basically, when a sidebar navlist item is on a page with a livewire component, and that component updates, the current page item loses it's focus. Ideally, the css that shows the user the current page would not go away when a component udpates.

Code of sidebar on the page.

<div class="hidden lg:block">
        <flux:navlist {{$attributes->merge(['class' => 'w-48 col-span-1'])}}>
            <flux:navlist.item href="{{route('app.colleges.index')}}" icon="magnifying-glass-circle" wire:navigate.hover>Search</flux:navlist.item>
            <flux:navlist.item href="{{route('app.colleges.target-list')}}" icon="heart" wire:navigate.hover>Target List</flux:navlist.item>
            <flux:navlist.item href="{{route('app.colleges.preferences')}}" icon="adjustments-horizontal" wire:navigate.hover>Preferences</flux:navlist.item>
        </flux:navlist>
    </div>

Screen recording: https://share.cleanshot.com/9grbhl8c

calebporzio commented 3 days ago

Good report Colin, we just fixed this actually. Issue reference: https://github.com/livewire/flux/issues/685

Will be in the next release!