Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

md-select with ngModel freezes browser if other errors #2950

Closed
emin93 opened this issue Feb 6, 2017 · 4 comments · Fixed by #2955
Closed

md-select with ngModel freezes browser if other errors #2950

emin93 opened this issue Feb 6, 2017 · 4 comments · Fixed by #2955
Assignees
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@emin93
Copy link

emin93 commented Feb 6, 2017

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Normal Angular2 unhandled error in console output

What is the current behavior?

Browser/tab freezes

What are the steps to reproduce?

Simple md-select with an ngModel and another component after the md-select which throws an error.

WARNING: If you open the following plunker template, your browser/tab WILL FREEZE (tested in Chrome and Safari)
Plunker template: https://embed.plnkr.co/BARX13/

@emin93
Copy link
Author

emin93 commented Feb 6, 2017

Here is the Plunker link without preview, so code inspection is possible without tab freezing: https://plnkr.co/edit/BARX13?p=info

@crisbeto
Copy link
Member

crisbeto commented Feb 6, 2017

Great catch. This should be fixed in #2722, but I'll check if I can backport it to master as well.

crisbeto added a commit to crisbeto/material2 that referenced this issue Feb 6, 2017
Currently `md-select` calls `writeValue` recursively until the `QueryList` with all of the options is initialized. This usually means 1-2 iterations max, however in certain conditions (e.g. a sibling component throws an error on init) this may not happen and the browser would get thrown into an infinite loop.

This change switches to saving the attempted value assignments in a property and applying it after initialization.

Fixes angular#2950.
@crisbeto crisbeto added the has pr label Feb 6, 2017
@crisbeto crisbeto self-assigned this Feb 6, 2017
@kara kara changed the title md-select with ngModel freezes browser md-select with ngModel freezes browser if other errors Feb 7, 2017
@kara kara added the P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent label Feb 7, 2017
@mrlund
Copy link

mrlund commented Feb 7, 2017

Seems related to #2716 - I think the issue is the infinite loop caused when another error on the page prevents the MdSelect from rendering its options, and thus passing the if (!this.options) clause.

    /**
     * Sets the select's value. Part of the ControlValueAccessor interface
     * required to integrate with Angular's core forms API.
     *
     * @param value New value to be written to the model.
     */
    MdSelect.prototype.writeValue = function (value) {
        var _this = this;
        if (!this.options) {
            // In reactive forms, writeValue() will be called synchronously before
            // the select's child options have been created. It's necessary to call
            // writeValue() again after the options have been created to ensure any
            // initial view value is set.
            Promise.resolve(null).then(function () { return _this.writeValue(value); });
            return;
        }
        this._setSelectionByValue(value);
    };

crisbeto added a commit to crisbeto/material2 that referenced this issue Feb 7, 2017
Currently `md-select` calls `writeValue` recursively until the `QueryList` with all of the options is initialized. This usually means 1-2 iterations max, however in certain conditions (e.g. a sibling component throws an error on init) this may not happen and the browser would get thrown into an infinite loop.

This change switches to saving the attempted value assignments in a property and applying it after initialization.

Fixes angular#2950.
tinayuangao pushed a commit that referenced this issue Feb 9, 2017
…2955)

* fix(select): avoid going into infinite loop under certain conditions

Currently `md-select` calls `writeValue` recursively until the `QueryList` with all of the options is initialized. This usually means 1-2 iterations max, however in certain conditions (e.g. a sibling component throws an error on init) this may not happen and the browser would get thrown into an infinite loop.

This change switches to saving the attempted value assignments in a property and applying it after initialization.

Fixes #2950.

* fix: more elegant approach to initial value and add unit test

* fix: button not being removed after test

* chore: remove unnecessary expression
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 5, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants