fix(autocomplete): tap outside options panel on iOS does not close panel #11625
Conversation
googlebot
added
the
cla: yes
Splaktar
added
type: gestures
ui: mobile
P2: required
|
Is there any way you can land this in the next patch release, this completely breaks forms on iOS :/ |
|
I tested it and this fix doesn't seem to do it. |
|
It has to go through the presubmit process and so far that hasn't gone through without an issues. There hasn't been time yet to review what needs to change (if anything) to get it through presubmit, but we're not holding |
|
@AdriVanHoudt I took that approach initially with this fix, but it had some unintended, negative side effects. Can you please provide reproduction steps and a CodePen demo for the case where this fix isn't working for you? Also please provide the device and OS version. |
|
I'll see if I can get a minimal case to work/break, I tested it directly in our application. What is the easiest way to test this branch in a CodePen? |
Splaktar
force-pushed
the
wip/scrollMaskNoBlur
branch
from
9500539
to
04aa1d1
Compare
|
Here's the issue that I hit when trying to click the Uploading your Here's a CodePen from the issue using a build from this PR. |
|
That's a nice way to host code :D To clarify: I tested this with md-chips with the md-autocomplete as a custom input. I didn't think about mentioning this earlier sorry. |
Splaktar
added
pr: merge ready
|
Thanks for this 🔥 |
|
It looks like there is an issue with this change. I'm going to be investigating it to see if we can solve it rather than reverting this PR. |
|
I can reproduce the issue in https://material.angularjs.org/HEAD/demo/autocomplete on macOS and Chrome 75. Here's the behavior, after opening an autocomplete options panel by clicking the input with the mouse, when the mouse first moves over the edge of the panel, the panel flickers (hides and then reappears). |
stop propagation of input's click events up to the document - similar to what we already do with the clear button (X) Closure/JSDoc typing improvements Relates to #11625
|
PR #11757 posted to address the regression. |
- 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.
- 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.
…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.
PR Checklist
Please check that your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Clicking outside of the options dropdown panel for
md-autocompletedoes not dismiss the panel on iOS.Issue Number:
Fixes #9581.
What is the new behavior?
Clicking outside of the options dropdown panel for
md-autocompletedismisses the panel on iOS. It is a similar approach to what themd-datepickeruses.Does this PR introduce a breaking change?
Other information