Collapsible sidebar logo/icon inconsistency bug with flux:sidebar.group

[dansan92]

Flux version

v2.14.1

Livewire version

v4.3.0

Tailwind version

v4.3.0

Browser and Operating System

Chrome on Windows

What is the problem?

The collapsible sidebar is bugged when it includes any flux:sidebar.group, in its collapsed state. Depending on where you hover it will display the logo or the icon inconsistently.

According to the explanation, it should work the following way:

it shows the collapse icon when the sidebar is hovered by the mouse. But when the dropdown is opened, the dropdown is in the top layer, so the sidebar is technically not being hovered anymore. Hence why the icon changes back to the brand icon.

What I'm experiencing is not quite the same. I have included a lengthy video demonstrating the different states. Here are the inconsistencies that I've noticed (timestamps according to the video below):

• 0:01-0:08 This shows a reversed state. The icon is visible when the dropdown is hovered, and the logo is visible when hovering elsewhere on the sidebar. This happens sometimes when entering the sidebar directly on the dropdown item. It's not always the case, as seen at 1:05-1:22.
• 0:09-0:18 The icon is visible when entering the sidebar from any other place. Logo doesn't show until the mouse first enters and leaves the sidebar group, while never leaving the sidebar.
• 0:21-0:23 Notice how I'm able to hover the settings, help and account items while the logo remains visible, it should be showing the icon in this case.
• 0:24-0:35 Leaving the sidebar entirely and reentering seems to show the intended state. The icon is visible while hovering the settings, help and account, as well as the dropdown itself at the end. At 0:36 when leaving the dropdown into the sidebar, the logo appears again, showing the broken state.
• 0:36-0:50 In the first half here I'm able to hover the sidebar items while the logo is visible, and then when reentering in the second half the icon is visible while hovering the same items.
• 1:05-1:22 After clicking around, closing/reopening, I discover a different case. At 1:08 I'm able to leave the dropdown without the logo appearing. Not sure exactly why it works sometimes this way, I haven't found a clear way to reproduce the case.

Perhaps part of the issue is that entering/leaving the sidebar dropdown changes some state, but since we are already inside the sidebar it doesn't know we have reentered it?

Code snippets to replicate the problem

I used the Flux UI website while recording:
sidebar-collapsible

The issue also exists on my own website.

Screenshots/ screen recordings of the problem

Flux.sidebar.issue.mp4

How do you expect it to work?

I expect the icon to be visible whenever I hover anywhere within the sidebar.

I don't think the logo should be visible at all, even while the dropdown is active, just to stay consistent. Even if the dropdown being active switches the focus, since the dropdown itself is visually inside the sidebar, the sidebar should be thought of as hovered. It might feel distracting otherwise. But, if the dropdown being active means the logo should show, it needs to work that way at all times.

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.

[joshhanley]

@dansan92 thanks for reporting! I've submitted a PR with a fix.

[calebporzio]

Verified Josh's fix (livewire/flux-pro#510) against your repro steps today — with it, the sidebar stays "active" (collapse icon showing) the entire time the mouse is inside it, including moving between the collapsed group dropdown and the other items.

Related: I also just pushed livewire/flux-pro#516, which stops hover-opened dropdowns from stealing focus — that focus churn was what made the active state go stale in the first place. Between the two this should feel solid. Thanks for the thorough video, it made the states easy to pin down.