Material-components-web: Select Menu - iOS tap away to close menu

[mellogarrett]

Bug

What MDC-Web Version are you using?

@material/select: 0.23.0

Please be specific, e.g. _major.minor.patch_

What browser(s) is this bug affecting?

Mobile Safari

What OS are you using?

iOS 11

What are the steps to reproduce the bug?

1. Tap on select menu to open
2. Tap out of select area
3. Notice that it does not close the menu as expected

What is the expected behavior?

Tapping out of the select area should close the select menu

What is the actual behavior?

You are locked in once opening the select menu and the only way to close it is to select an option

Any other information you believe would be useful?

[kfranqueiro]

Interesting that this only seems to happen in iOS Safari, but yup this looks like a bug, repro'd on a 10.3 simulator as well. Thanks for reporting.

[kfranqueiro]

Actually, this sounds like it might be a duplicate of #693?

[GenericUK]

No change in 0.26.0.
This is only happening on temporary drawer https://material-components-web.appspot.com/drawer/temporary-drawer.html

It works as expected here https://material.io/guidelines/patterns/navigation-drawer.html

Is material.io site using MDC?

[markmcdowell]

Interestingly with 0.26.0 on both chrome and safari in iOS the temporary drawer does shut for me but takes ages and is really jittery.

[rober42539]

Looks like Firefox on iOS may have same issues too.

[rober42539]

Video Showing Issue on iOS Safari, with dramatic audio

[mellogarrett]

Found out this is because iOS doesn't emit a click event if the element you are tapping on isn't considered "clickable".

Workaround is setting all elements as "clickable"

@supports (-webkit-overflow-scrolling: touch) {
  /* CSS specific to iOS devices */
  * {
    cursor: pointer;
  }
}

[kfranqueiro]

Closing this as duplicate of #693 RE menu behavior, and as obsolete since MDC Select uses a native input now.