feat(select): add ability to specify md-no-backdrop to disable backdrop

[rantiev]

Bug:

CodePen and steps to reproduce the issue:

CodePen Demo which demonstrates the issue:

Detailed Reproduction Steps:

1) Tap to first md-select input, don't select any options 2) Tap to next md-select input

Try to select options in the second and go back to first if you can't reproduce the issue. It exists.

What is the expected behavior?

Options selection box is shown.

What is the current behavior?

Label is active but options dropdown is hidden it only shows after additional click to md-select input

What is the use-case or motivation for changing an existing behavior?

Do not confuse users.

Which versions of AngularJS, Material, OS, and browsers are affected?

• AngularJS: 1.6.8
• AngularJS Material: 1.1.9
• OS: iOs
• Browsers: Mobile safari

Is there anything else we should know? Stack Traces, Screenshots, etc.

You need to ask people to not use your library anywhere in readme.md i would say.

[Splaktar]

Can you please clarify the following?

Try to select options in the second and go back to first if you can't reproduce the issue. It exists.

It looks like you are trying to describe a situation where an additional click is required, but the reproduction steps are not clear.

[pavelsl]

Guys... just take a device and spent time with the product you are working with. I have spent enough of my time finding issues, trying to reproduce, and describe this.

I have tried many version that thing just presents.

Now i visited this repo to try to find another issue solution. And again it exist in several material lib versions and reproducible in many iPads safari browsers of different iOs versions.

That md-select dropdown rendered randomly in isolated example.... not always. (top position coordinate is WRONG) http://output.jsbin.com/nenuquy/

And it seems to fix this i have to put my hands deep into your component source, because you won't try or won't be able to reproduce the issue.

PS: if you try emulation mode, forget it. Use real devices ALWAYS. Real IE, Real tablet or real phone.

[Splaktar]

@pavelsl I can appreciate your frustration, but please try to stay constructive and avoid making accusations.

My response above was made so that I would be sure what the desired behavior was and what the described issue is. I was asking this so that I could try to ensure that any possible fix would fully address the concerns raised.

As I am still not fully clear on what issue is being reported here, can you please try this CodePen and let me know if it reproduces the issue for you?

Please note the following

When you click outside of the first options dropdown, that click is consumed by the invisible md-backdrop which dismisses the options dropdown. The event does not get propagated to any other component. Thus the second select never gets that click event and does not open it's options dropdown. This appears to be working as designed across iOS Safari, iOS Chrome, macOS Chrome, etc.

It would be feasible to do the following to resolve this

1. Override the related AngularJS Material Select directives to disable the backdrop
   • This can be implemented in your app with no changes to AngularJS Material
2. Add an enhancement to md-select to support a new attribute md-no-backdrop which would disable the backdrop for any md-select element with that attribute
   • We are willing to evaluate, review, and consider a PR with this functionality
3. Add an enhancement to md-select to support a new attribute md-backdrop-visible which would show the partially transparent grey backdrop and help avoid confusion by users
   • This seems to fall outside of the guidance in the Material Design Spec for select

Please let us know if these will resolve this issue for you and which you would like to pursue further.

[pavelsl]

Hi, @Splaktar Tx for the good answer. I would go with option 2) to disable that backdrop when it needs.

What is the reason for having the backdrop? Handling blur event on elements which have no blur event? As usual i check click target & target parents chain to understand whether we clicked the same element or outside of it.

The behavior it adds could confuse users indeed. Imaging that you want to fill long form on a device. It's already some kind of problem to do this on a device and as an addition we have to click several times on all selection inputs (might be on all other inputs as well?)

[pavelsl]

@Splaktar Talking about options it would be great to live only input styling for mobile devices (having option for that) and let user see device native dropdown styling. That could avoid many problems, as positioning dropdowns is tricky.

[Splaktar]

OK, I've updated the title and labels for adding a new md-no-backdrop option for select.

For now I'm going to leave this for external, community contributors to address as we have a significant backlog of higher priority issues to address.

As for using native inputs in a web app, I don't believe such a capability exists atm. If you know otherwise and can point me to APIs and documentation, I would be interested in learning more, especially around browser and device support.

[totomaze]

Same kind of problem with md-autocomplete, (md-scroll-mask)

https://material.angularjs.org/1.1.10/demo/autocomplete. reproduce by opening the autocomplete and try to click on a clickable icon like view source. ps: the sidenav links are working because the sidenav z-index is higher than the md-scroll-mask