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

fix(material/select): value set through property not being propagated to value accessor #10246

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions src/material-experimental/mdc-select/select.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2155,6 +2155,17 @@ describe('MDC-based MatSelect', () => {
.withContext(`Expected label to have an asterisk, as control was required.`)
.toBeTruthy();
}));

it('should propagate the value set through the `value` property to the form field', fakeAsync(() => {
const control = fixture.componentInstance.control;

expect(control.value).toBeFalsy();

fixture.componentInstance.select.value = 'pizza-1';
fixture.detectChanges();

expect(control.value).toBe('pizza-1');
}));
});

describe('disabled behavior', () => {
Expand Down
11 changes: 11 additions & 0 deletions src/material/select/select.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2170,6 +2170,17 @@ describe('MatSelect', () => {
.not.withContext(`Expected label to have an asterisk, as control was required.`)
.toBeNull();
}));

it('should propagate the value set through the `value` property to the form field', fakeAsync(() => {
const control = fixture.componentInstance.control;

expect(control.value).toBeFalsy();

fixture.componentInstance.select.value = 'pizza-1';
fixture.detectChanges();

expect(control.value).toBe('pizza-1');
}));
});

describe('disabled behavior', () => {
Expand Down
31 changes: 21 additions & 10 deletions src/material/select/select.ts
Original file line number Diff line number Diff line change
Expand Up @@ -423,13 +423,10 @@ export abstract class _MatSelectBase<C>
return this._value;
}
set value(newValue: any) {
// Always re-assign an array, because it might have been mutated.
if (newValue !== this._value || (this._multiple && Array.isArray(newValue))) {
if (this.options) {
this._setSelectionByValue(newValue);
}
const hasAssigned = this._assignValue(newValue);

this._value = newValue;
if (hasAssigned) {
this._onChange(newValue);
}
}
private _value: any;
Expand Down Expand Up @@ -661,7 +658,7 @@ export abstract class _MatSelectBase<C>
* @param value New value to be written to the model.
*/
writeValue(value: any): void {
this.value = value;
this._assignValue(value);
}

/**
Expand Down Expand Up @@ -886,10 +883,10 @@ export abstract class _MatSelectBase<C>
throw getMatSelectNonArrayValueError();
}

value.forEach((currentValue: any) => this._selectValue(currentValue));
value.forEach((currentValue: any) => this._selectOptionByValue(currentValue));
this._sortValues();
} else {
const correspondingOption = this._selectValue(value);
const correspondingOption = this._selectOptionByValue(value);

// Shift focus to the active item. Note that we shouldn't do this in multiple
// mode, because we don't know what option the user interacted with last.
Expand All @@ -909,7 +906,7 @@ export abstract class _MatSelectBase<C>
* Finds and selects and option based on its value.
* @returns Option that has the corresponding value.
*/
private _selectValue(value: any): MatOption | undefined {
private _selectOptionByValue(value: any): MatOption | undefined {
const correspondingOption = this.options.find((option: MatOption) => {
// Skip options that are already in the model. This allows us to handle cases
// where the same primitive value is selected multiple times.
Expand All @@ -936,6 +933,20 @@ export abstract class _MatSelectBase<C>
return correspondingOption;
}

/** Assigns a specific value to the select. Returns whether the value has changed. */
private _assignValue(newValue: any | any[]): boolean {
// Always re-assign an array, because it might have been mutated.
if (newValue !== this._value || (this._multiple && Array.isArray(newValue))) {
if (this.options) {
this._setSelectionByValue(newValue);
}

this._value = newValue;
return true;
}
return false;
}

/** Sets up a key manager to listen to keyboard events on the overlay panel. */
private _initKeyManager() {
this._keyManager = new ActiveDescendantKeyManager<MatOption>(this.options)
Expand Down