Mkdocs-material: [Bug] [UI] CTRL + Click of Navigation Group causes overlap

Created on 18 Jul 2019 · 12Comments · Source: squidfunk/mkdocs-material

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

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

bug

Source

CPritch

Most helpful comment

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

squidfunk on 24 Jul 2019

👍2

All 12 comments

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.

squidfunk on 18 Jul 2019

😄1

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

CPritch on 18 Jul 2019

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

squidfunk on 18 Jul 2019

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?

CPritch on 22 Jul 2019

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

squidfunk on 22 Jul 2019

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

CPritch on 24 Jul 2019

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.

squidfunk on 24 Jul 2019

👍2

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