[Bug] [UI] CTRL + Click of Navigation Group causes overlap

[CPritch]

Description

CTRL + Click of navigation sub menus causes text to be overlaid.

Expected behavior

CTRL + Click of navigation group should expand the group with no text overlapping.

Actual behavior

Navigation subitems overlap with sibling navigation items.

Steps to reproduce the bug

1. CTRL + Click a navigation group

Package versions

• Python: 3.7.2
• MkDocs: 1.0.4
• Material: 4.4.0

System information

• OS: Windows 10
• Browser: FireFox

[squidfunk]

Thanks for reporting. Why are you using CTRL in the first place to click on the navigation? I'm trying to understand whether this is an edge case or common.

[CPritch]

@squidfunk definitely an edge case, just thought you'd like to track it as housekeeping at some point.

[squidfunk]

@CPritch okay great. I managed to reproduce it in Firefox, macOS (using CMD). I'll see if it's fixable, but probably won't invest too much time in it.

[CPritch]

If it helps I can see that the checkbox fails to be checked when CTRL is held. Therefore the checkbox always returns the same state when the event is triggered in your Collapse class for the Nav.

More specifically this line always returns true/false if CTRL is held.

I'm not familiar enough with your component structure to see where the toggling event is fired but I'd put money on it being there. Also must say, very organised codebase for fairly vanilla js components, did you structure the componentised UI yourself?

[squidfunk]

@CPritch thanks for your research. Will look into it when I find some time!

I'm not familiar enough with your component structure to see where the toggling event is fired but I'd put money on it being there. Also must say, very organised codebase for fairly vanilla js components, did you structure the componentised UI yourself?

it's built from scratch, yeah. Probably feels a bit dated by now. I'm actually trying to find some time to migrate to RxJS as this would make configuration and hooking into Material much easier, but can't put a timeline on that.

[CPritch]

@squidfunk you should see some of the React projects I've had to work on, I'd argue good structure is timeless haha. If you ever want some help with that migration I'm happy to help. Looking for projects to contribute to. My day to day is React + TS and inhouse Component Framework/WebApp development. Happy to fork and demonstrate some example migrated code to RxJS.

[squidfunk]

@CPritch I'm a big advocate of React, but it's not a good fit for this project as templating is handled by Jinja. RxJS however seems to be a good fit. Feel free to check out the refactor/typescript branch, which I created to start migrating to TypeScript and RxJS. My main idea was to refactor the code base to be more "hookable" (i.e. when people want to alter certain JavaScript behaviors of Material). You might need to merge master back in, as the branch was created quite some time ago and migrate to RxJS 6.

I would really love going forward on this topic, introducing unit tests, i.e. modernizing the code base. If you like, we can discuss specific issues and possible architectures over at your fork.

[Stanzilla]

I ran into this problem myself and I noticed that it also happens when you select the text of the above menu https://i.imgur.com/X0B4jtP.gifv

[squidfunk]

Both cases will be fixed in v5.

[Stanzilla]

@squidfunk is the fix backportable?

[squidfunk]

Nope. The new JS architecture is incompatible with the current one.

[squidfunk]

Material for MkDocs 5.0.0rc1 is out which fixes this issue 😀 Let's test and improve it together!