Fastfocus disrupts scrolling on touch devices

[nino]

Hi!

When scrolling a website with ember-gestures on a touch device, the _fastFocus function will focus input elements that were accidentally touched in the attempt. As a result, the user has to be careful only to touch non-input elements when scrolling.

The current behavior is illustrated here:

(I prepared https://github.com/nino/minimal-gesture-demo as a minimal working example of the issue.)

The default browser behavior looks like this:

Is there a supported way to use ember-gestures without the fastfocus behavior? (The site I'm working on uses ember-gestures to recognize left/right swipes on one specific component, and doesn't really need any sort of fast-clicking/-focusing/etc.)

[eriktrom]

try adding an inline style touch-action: auto to the input element(s), make sure the rendered dom shows that style last, if other inline styles exist on the node.

let me know, the term caveat is not strong enough to describe what all is at play, if that hack does not play out 😛

i'll help when i have more time, (semi soonish) -- let me know what u did and did not try in meantime, if u haven't fixed it. (and leave the fix if u have :))

(sorry for the delay, se la vie, atm)

[eriktrom]

Is there a supported way to use ember-gestures without the fastfocus behavior? (The site I'm working on uses ember-gestures to recognize left/right swipes on one specific component, and doesn't really need any sort of fast-clicking/-focusing/etc.)

yes, remove ember hammertime, or the touch-action: manipulation inline rule :) fyi

[nino]

Finally had a chance to get back to this. I tried removing Hammertime and all sorts of inline styles, but it didn’t help. Eventually I figured out I can just write an initializer that reopens the EventDispatcher class and removes the _fastFocus method:

import EventDispatcher from 'ember-gestures/event_dispatcher';

export function initialize(/* application */) {
  EventDispatcher.reopen({
    _fastFocus() {},
  });
}

export default {
  initialize,
};

It’s not particularly pretty, but it seems to fix the issue without breaking any of the gesture recognition stuff.

The only way I can see to avoid this hack would be to make fastFocusEvents and notFocusableTypes configurable. I can try submitting a PR if that sounds like a good idea.

[eriktrom]

fyi - spot on @nino - u may want to check git blame too as the dispatcher, IMHO has a bad if statement in the last refactor (slack peeps at the time, didn't agree, but the control flow has had issues that have been filed only after that refactor, to this day, AND u overrode what worried me and it worked so...)

YMMV in the dispatcher file itself - read slowly :)

and thanks for pasting ur findings @nino