angular / material

Material design for AngularJS
https://material.angularjs.org/
MIT License
16.55k stars 3.39k forks source link

select: fails to close popover on option click #12126

Open mockenoff opened 3 years ago

mockenoff commented 3 years ago

AngularJS Material is in LTS mode

We are no longer accepting changes that are not critical bug fixes into this project. See Long Term Support for more detail.

Bug Report

If the first option in a <md-select> is disabled, clicking any non-disabled option will successfully select the option but fail to close the options popover.

Demo and steps to reproduce the issue

**Demo URL (required)***: https://codepen.io/mockenoff/pen/BaZXVjj

Detailed Reproduction Steps

  1. Click open the select.
  2. Click any option besides the disabled one.

Explain the expected behavior

The option clicked should be selected and the options popover should close.

Explain the current behavior

The option clicked does become selected but the options popover remains open.

Discuss the use-case or motivation for changing the existing behavior

In any other instance, the options popover closes after clicking an option. It should be expected that it would do the same in this case, too.

List the affected versions of AngularJS, Material, OS, and browsers

Add anything else we should know

It seems to have to do with line 1911 in select.js.

opts.focusedNode is set to the first option if the component is instantiated with nothing selected, which naturally fails the if since the first option is disabled and thus never makes it to the $mdSelect.hide() call, even though a non-disabled option is being clicked.

Previously, I'd been using v1.1.4, which instead used $mdUtil.getClosest() to find the focused option. This change appears to have come along in the v1.1.22-rc.0 release.

Stack Trace

Screenshots

Splaktar commented 3 years ago

This looks like it may be a regression in 1.1.22: https://github.com/angular/material/commit/928c71d6ee87bc03ce383bfa555f67e1d373fe13