[$60] - Menu stays forever when user move the mouse down over COMPETE/LEARN/COMMUNITY

[sdgun]

Steps to Reproduce

• Login as a valid user

• Go to http://community-app.topcoder.com/challenges/30058991/?type=develop

• Click Filter and apply any filter

• While filtering move the mouse down over COMPETE/LEARN/COMMUNITY and quickly scroll the page down

• Now scroll up you can see menu is activated and click on any empty location

Actual Result(s)

• Menu stays forever when user move the mouse down over COMPETE/LEARN/COMMUNITY

Expected Result(s)

• Must close the menu when user tap on a empty space

Environment

• Device(s): Laptop
• Operating System: Windows 7 64bit
• Browser(s): Chrome 60.0.3112.101 (Official Build) (64-bit)

Image/Video/JS Log/Console Log (If not attached here, Please check the comments section)

[sdgun]

[birdofpreyru]

@sdgun Not sure about this one. When I click on empty space, then move mouse out of the menu, it still collapses. Do you mean, that we should close the menu immediately if we click on its empty part (dark gray zone)? It does not look that obvious to me. @vic-topcoder ?

[vic-tian]

That's a mobile interaction you're describing: on mobile to invoke the menu one has to tap to simulate hover state. On desktop it should not happen. I cannot reproduce this on my side. If your mouse is outside the menu, it should collapse. Always-persistent menu is a bug

[sdgun]

@vic-topcoder @birdofpreyru Please give me sometime I will comment the exact steps. I can reproduce this 8/10 times

[sdgun]

@birdofpreyru Please check the attached video;

https://www.screencast.com/t/lzsEbOULW

[birdofpreyru]

@sdgun Ahhh... I see. It looks the actual reason is that you scroll at the same time when the menu is being opened, so this interfere with JS code taking care about the menu. Accepted, 5 points.

Expected Fix

The logic behind sub-menu expansion / collapsing should be revised to ensure that scrolling does not break it.