Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

autocomplete: closes instantly when opened with touch #11778

Closed
jelbourn opened this issue Aug 22, 2019 · 9 comments · Fixed by #11782
Closed

autocomplete: closes instantly when opened with touch #11778

jelbourn opened this issue Aug 22, 2019 · 9 comments · Fixed by #11782
Assignees
@Splaktar
Labels
g3: reported The issue was reported by an internal or external product team. has: Pull Request A PR has been created to address this issue P1: urgent Urgent issues that should be addressed in the next minor or patch release. resolution: fixed severity: regression This issue is related to a regression type: bug type: gestures
Milestone
1.1.21

Comments

@jelbourn
Copy link
Member

The mdAutocomplete closes instantly when it's opened with a touch (tap) instead of a mouse. I can reproduce this on a Chromebox by either tapping (but not hard-clicking) the touchpad, or by tapping the touchscreen. It's also been reported that this occurs with a MacBook touchpad (again for the soft tap and not the hard click).

You can reproduce it directly on the demo:
https://material.angularjs.org/latest/demo/autocomplete
@jelbourn jelbourn added g3: reported The issue was reported by an internal or external product team. P1: urgent Urgent issues that should be addressed in the next minor or patch release. labels Aug 22, 2019
@Splaktar Splaktar changed the title mdAutocomplete closes instantly when opened with touch autocomplete: closes instantly when opened with touch Aug 22, 2019
@Splaktar Splaktar added this to the 1.1.21 milestone Aug 22, 2019
@Splaktar Splaktar added type: bug needs: investigation The cause of this issue is not well understood and needs to be investigated by the team or community labels Aug 22, 2019
@Splaktar
Copy link
Member

This sounds similar to #11701 which was fixed in PR #11719.

@Splaktar
Copy link
Member

Splaktar commented Aug 22, 2019 •
edited
Loading

On Chrome for Android there are some issues where you need to double click md-autocomplete before it opens, but that is an old pre-existing issue.

Cannot reproduce on iOS.

@Splaktar Splaktar added severity: regression This issue is related to a regression type: gestures labels Aug 22, 2019
@Splaktar
Copy link
Member

On Chrome OS, I can reproduce this with 1.1.20 and not with 1.1.19.

@Splaktar
Copy link
Member

Reproduced on macOS with Chrome as well in 1.1.20. This appears to be a regression introduced in f81349a.

@Splaktar
Copy link
Member

Splaktar commented Aug 24, 2019 •
edited
Loading

On macOS, many times when just tapping instead of doing a full click, Chrome doesn't fire a click event and thus md-autocomplete does not display the options pop-up. Instead, it fires mousedown (and maybe mouseout along with some mousemove events).

On Chrome OS using a touchscreen, tapping the screen often fires all of the same MouseEvents as on macOS, plus it fires touchstart and touchend events. Again, often there is no actual click event and md-autocomplete does not display the options pop-up.

I tried having touchend events focus the input (which displays the options pop-up), but that doesn't work well on a touchscreen when scrolling. This results in the page scrolling a bit, then the options pop-up opening in the wrong position (not taking into account the space scrolled and being detached from the input).

touchstart seems to work pretty well. I've got a number of other tweaks in progress (to $mdUtil and md-autocomplete) after testing across

  • macOS w/ mouse and touchpad with Chrome
  • Chrome OS with touchpad and touchscreen
  • iOS touchscreen with Chrome and Safari
  • Android touchscreen with Chrome

I still need to

  • finish testing macOS with Safari and Firefox
  • verify refinements on iOS
  • look at what can be done for unit tests

@Splaktar Splaktar removed the needs: investigation The cause of this issue is not well understood and needs to be investigated by the team or community label Aug 24, 2019
@Splaktar
Copy link
Member

Splaktar commented Aug 24, 2019 •
edited
Loading

I can't figure out how or why, but it appears that PR #11743 introduced a regression on iOS with md-autocomplete when md-floating-label is used. In that case, when the options pop-up panel is open and scrolled with touch, it detaches from the md-autocomplete and the page scrolls freely (which it should not). I attempted to fix that in the changes to fix this issue, but so far I haven't found a solution.

Splaktar added a commit that referenced this issue Aug 24, 2019
@Splaktar
fix(autocomplete): improve handling of touch pads and touchscreens
3564385 
Fixes #11778
Splaktar added a commit that referenced this issue Aug 24, 2019
@Splaktar
fix(autocomplete): improve handling of touch pads and touchscreens
82858b3 
- open options pop-up on `touchstart`
  - since a `click` is often not sent on touch devices
  - this usually happens when the start/end point are not the same
- use `touchend` on the document to close the options panel on iOS
  - iOS mostly does not send `click` events for taps on the backdrop
  - call `doBlur()`` since iOS doesn't blur in this case
- combine some jQuery event handler calls
- combine duplicate `onMouseup()` and `focusInputElement()` functions
- don't let touchstart or touchend events bubble out of the component
- focus the input for `mousedown` events
  - this covers an edge case on touch pads where a `click` isn't sent
- move `isIos` and `isAndroid` logic out of gestures into `$mdUtil`
- add and correct JSDoc

Fixes #11778. Relates to #11625. Relates to #11757. Relates to #11758.
@Splaktar Splaktar mentioned this issue Aug 24, 2019
Merged
3 tasks
@Splaktar Splaktar added g3: sync has: Pull Request A PR has been created to address this issue labels Aug 24, 2019
@marosoft
Copy link
Contributor

Hi @Splaktar

What about the change to the default value of index from null (which is treated as 0) to -1 ?
Impact to the code like in this example.

Marek

@Splaktar
Copy link
Member

Splaktar commented Aug 25, 2019 •
edited
Loading

@marosoft thank you for taking a look. That's one change in that PR that I hadn't really debugged yet. Unfortunately, I just checked it out and going back to null or 0 on initialization and clearing didn't seem to help 😞

Splaktar added a commit that referenced this issue Aug 26, 2019
@Splaktar
fix(autocomplete): improve handling of touch pads and touchscreens
e731953 
- open options pop-up on `touchstart`
  - since a `click` is often not sent on touch devices
  - this usually happens when the start/end point are not the same
- use `touchend` on the document to close the options panel on iOS
  - iOS mostly does not send `click` events for taps on the backdrop
  - call `doBlur()`` since iOS doesn't blur in this case
- combine some jQuery event handler calls
- combine duplicate `onMouseup()` and `focusInputElement()` functions
- don't let touchstart or touchend events bubble out of the component
- focus the input for `mousedown` events
  - this covers an edge case on touch pads where a `click` isn't sent
- move `isIos` and `isAndroid` logic out of gestures into `$mdUtil`
- add and correct JSDoc

Fixes #11778. Relates to #11625. Relates to #11757. Relates to #11758.
jelbourn pushed a commit that referenced this issue Aug 26, 2019
@Splaktar @jelbourn
fix(autocomplete): improve handling of touch pads and touchscreens (#…
20c4d3f 
…11782)

- open options pop-up on `touchstart`
  - since a `click` is often not sent on touch devices
  - this usually happens when the start/end point are not the same
- use `touchend` on the document to close the options panel on iOS
  - iOS mostly does not send `click` events for taps on the backdrop
  - call `doBlur()`` since iOS doesn't blur in this case
- combine some jQuery event handler calls
- combine duplicate `onMouseup()` and `focusInputElement()` functions
- don't let touchstart or touchend events bubble out of the component
- focus the input for `mousedown` events
  - this covers an edge case on touch pads where a `click` isn't sent
- move `isIos` and `isAndroid` logic out of gestures into `$mdUtil`
- add and correct JSDoc

Fixes #11778. Relates to #11625. Relates to #11757. Relates to #11758.
@Splaktar Splaktar mentioned this issue Aug 26, 2019
Open
@Splaktar
Copy link
Member

@marosoft I've opened #11786 to track that strange behavior with the floating-label options pop-up on iOS.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@Splaktar Splaktar

Labels
g3: reported The issue was reported by an internal or external product team. has: Pull Request A PR has been created to address this issue P1: urgent Urgent issues that should be addressed in the next minor or patch release. resolution: fixed severity: regression This issue is related to a regression type: bug type: gestures
Projects
None yet
Milestone
1.1.21
Development

Successfully merging a pull request may close this issue.

fix(autocomplete): improve handling of touch pads and touchscreens angular/material
3 participants
@jelbourn @Splaktar @marosoft