search

aforemny / elm-mdc

Elm port of the Material Components for the Web CSS/JS library
https://aforemny.github.io/elm-mdc
Apache License 2.0
354 stars 43 forks source link

Tab background highlighting does not reset on tab switch #219

Closed mkreisel closed 5 years ago

mkreisel commented 5 years ago

When switching between tabs in the tab component, the background of previously selected tabs will stay highlighted rather than returning to the background color. The gif below illustrates the issue and was recorded from the elm-mdc demo running on Chrome Version 75.0.3770.80 (Official Build) (64-bit) on Ubuntu 18.04.

mdc_tabs

aforemny commented 5 years ago

Hi @mkreisel, I just tested the elm-mdc demo using Google Chrome 75.0.3770.80 (64-Bit) on Linux, and I cannot reproduce the issue that you are describing.

I can only reproduce the issue if instead of activating a tab by clicking, I activate the tab by pressing the mouse down and dragging down until the cursor leaves the tab, and then release the mouse button. I am curious if you are doing something similar in the demo, especially how are you removing the highlighted background in the second part of the video?

SidneyNemzer commented 5 years ago

I can reproduce this behavior on my laptop (MacBook) by tapping the trackpad, instead of clicking. (This can be enabled in settings with "Tap to click". I use it on Windows laptops too).

'Tapping' fires the mousedown and click events back-to-back. When 'clicking' the trackpad (or using a regular mouse), click doesn't fire until you release the trackpad/mouse button. I'm not sure exactly how this difference causes bug, but it's possible something is looking for mousedown instead of click?

Funny enough, I recently ran into a bug related to tapping vs clicking in a React application, so I've been on the lookout for similar bugs!

mkreisel commented 5 years ago

Thanks for looking into it @aforemny. I think @SidneyNemzer may have identified the issue - I filmed this on my Thinkpad T530 laptop. I wasn't using the tap to click, rather the physical buttons on the machine, but maybe on such an old machine it registers button clicks similar to a tap click on a more recent laptop. When I try with a stand alone mouse on my desktop, I do not observe the problem.

aforemny commented 5 years ago

@SidneyNemzer Thank you for looking into this! How would I enable "Tap to click" on Linux? Do you happen to know the relevant Xorg or Synaptics configuration to enable that or to test if it is already enabled?

Despite not being able to reproduce the issue, I've given it a shot and implemented a fix to a possibly related problem that I came across: 44207dfe83717684140b85914a8b2fe62732577a

@mkreisel Could you please test if that commit fixes the issue in our current demo?

SidneyNemzer commented 5 years ago

How would I enable "Tap to click" on Linux?

Good question, unfortunately I'm not sure, I've never used LInux on a laptop. From a quick google search, it seems to vary based on the distro, but it should be possible.

I'm not on my laptop this weekend, but using the demo on my desktop shows that the "click tab, drag mouse off, release" still repros

mkreisel commented 5 years ago

@aforemny The problem remains on the updated demo. I can reproduce using both the physical buttons on my T530 and using tap to click.

aforemny commented 5 years ago

Hi @SidneyNemzer, I have fixed the "click tab, drag mouse off, release" issue in 61725931b46136b665642fd69fd2a82e2ab45ef9 and updated the demo. I am not hopeful that that issue is related to this one, but in case it is please let me know!

Meanwhile I am trying to look into "Tap to click" on Windows then. I tried several options on Linux, but since I can already tap my trackpad and it works as if I clicked, I am confused about what to activate.

aforemny commented 5 years ago

@mkreisel @SidneyNemzer I have uploaded the demo with debug output. Could you please reproduce this issue and post the output of the developer console here? You should see Msgs and updatedModels being logged. Please keep the interactions in the log to a minimum, so that it easier to read. Thanks!

mkreisel commented 5 years ago

@aforemny I quickly checked the demo, and now I can no longer reproduce the bug. Perhaps your fixing the previous bug also handled this one? @SidneyNemzer can you still reproduce?

SidneyNemzer commented 5 years ago

I can't reproduce this issue on the latest demo. Thanks for the prompt fix, @aforemny!

As far as I can tell, the tab bar has the same behavior as the MDC demo. The arrow keys do not move the focus between tabs in elm-mdc, but that's probably a separate issue.

mkreisel commented 5 years ago

Thanks @aforemny! If it would still help to have a log of the events on the fixed version (to understand why your other fix helped here) I would be happy to provide it.

aforemny commented 5 years ago

I am closing this because I am assuming this has been fixed. Thank you both for the report and assistance in solving this!