search

ibm-js / delite

HTML Custom Element / Widget infrastructure
http://ibm-js.github.io/delite/
Other
68 stars 28 forks source link

KeyNav: scrolling should not trigger navigation #379

Closed AdrianVasiliu closed 9 years ago

AdrianVasiliu commented 9 years ago

When a widget extending delite/KeyNav contains a descendant with native scrolling (overflow: scroll style), I would think it is unexpected (and wrong) that KeyNav triggers navigation (including emitting keynav-child-navigated events) while the user scrolls on touch devices. The navigation is triggered by the "pointerdown" handler (https://github.com/ibm-js/delite/blob/0.6.0/KeyNav.js#L158-163).

How to reproduce:

  1. Load https://github.com/AdrianVasiliu/delite/blob/keynav-scroll/tests/functional/KeyNavTests.html on a mobile device (tested on Safari/iOS 8 and Chrome/Android 4.4.x). The difference of this test file wrt. the one in the repo is that it adds a scrollable container as child of the KeyNav's host widget (https://github.com/AdrianVasiliu/delite/commit/a34625c0de988eeee53df54c6d1303dac1b476db ).
  2. Scroll the content of the first KeyNav (the one on top of the page). => The items become blue just because they happen to be touched to initiate the scrolling.
wkeese commented 9 years ago

Good point.

It seems native browser behavior is inconsistent on desktop and mobile. On desktop, elements get focus on mousedown, but on mobile, they get focus on touchend (assuming there was no touchmove). I designed KeyNav to match desktop, but maybe I need to rethink that.

AdrianVasiliu commented 9 years ago

I designed KeyNav to match desktop, but maybe I need to rethink that.

Okay, thanks for looking into it. Just to clarify (although you may have guessed), I raised the issue because it hurts Combobox (via List).

AdrianVasiliu commented 9 years ago

Great, thanks @wkeese. At a quick testing on various browsers, Combobox goes well after this fix.

AdrianVasiliu commented 9 years ago

BTW, the same issue exists for HasDropDown (where it seems a bit trickier because it listens also to pointerenter and pointerleave, in addition to pointerdown, for the sake of its hovering property (apparently undocumented) - but maybe this can go away entirely; you know better).

wkeese commented 9 years ago

@AdrianVasiliu - Are you saying that the problem is that the dropdown will open when the user touches the HasDropDown widget, but the user was just trying to scroll the page?

AdrianVasiliu commented 9 years ago

Yes, that's what I'm saying (after testing it).

wkeese commented 9 years ago

Hmm, OK. This behavior is also by design (see https://github.com/ibm-js/delite/blob/master/tests/functional/HasDropDown.js#L104), although I can see how it may be overall bad on mobile. I filed #380 for it.