Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Autocomplete closes when scrolling on a touch device #17039

Open
csidorenko opened this issue Sep 10, 2019 · 0 comments
Open

Autocomplete closes when scrolling on a touch device #17039

csidorenko opened this issue Sep 10, 2019 · 0 comments
Labels
area: material/autocomplete P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@csidorenko
Copy link

Steps to reproduce:

  1. Open https://material.angular.io/components/autocomplete/overview in any touch device
  2. Use the example on the page, tap to show autocomplete
  3. If it was a longer list or you're viewing on a small device you would want to scroll to see the rest of the list. Scroll with touch.
  4. On touchend the autocomplete closes

Expected Behavior

It is the intended behavior according to the code in autcomplete.es5.js L:601

return merge(fromEvent(this._document, 'click'), fromEvent(this._document, 'touchend'))`
    .pipe(filter(function (event) {
            /** @type {?} */
            var clickTarget = (/** @type {?} */ (event.target));
            /** @type {?} */
            var formField = _this._formField ?
                _this._formField._elementRef.nativeElement : null;
            return _this._overlayAttached &&
                clickTarget !== _this._element.nativeElement &&
                (!formField || !formField.contains(clickTarget)) &&
                (!!_this._overlayRef && !_this._overlayRef.overlayElement.contains(clickTarget));
        }));

The menu closes on touchend but I think it's a bug because it's normal to expect users to scroll on a mobile device to see the rest of the list. I think the fromEvent(this._document, 'touchend') should be removed or the code changed to allow scrolling

Environment

  • Angular: 7.2.13
  • CDK/Material: 7.3.7
  • Browser(s): All browsers on a touch device
  • Operating System (e.g. Windows, macOS, Ubuntu): All operating systems that support touch
@mmalerba mmalerba added the needs triage This issue needs to be triaged by the team label May 20, 2020
@crisbeto crisbeto added area: material/autocomplete P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed needs triage This issue needs to be triaged by the team labels May 28, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: material/autocomplete P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Development

No branches or pull requests

3 participants