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(select): allow option with undefined or null value to clear selection #3141

Merged
merged 2 commits into from
May 23, 2017

Conversation

crisbeto
Copy link
Member

@crisbeto crisbeto commented Feb 16, 2017

Allows for options with a value of null or undefined to clear the select. This is similar to the way the native select works.

Fixes #3110.
Fixes #2634.

@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Feb 16, 2017
@jefersonestevo
Copy link
Contributor

Is this change coming on beta3?

@kara
Copy link
Contributor

kara commented Apr 20, 2017

@crisbeto Sorry for the late review on this. It looks good, but probably needs some reworking / rebasing since select has had some changes. Can you update?

@crisbeto
Copy link
Member Author

crisbeto commented May 9, 2017

Sorry about this one @kara, I must've missed the notification. I've rebased it and I had to redo it to match the new setup. Can you take another look?

@crisbeto crisbeto assigned kara and unassigned crisbeto May 9, 2017
Copy link
Contributor

@kara kara left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you add a blurb to the docs for this new feature? Also perhaps a TODO to implement the select multiple version of this feature.

@Component({
selector: 'reset-values-select',
template: `
<md-select placeholder="Food" [formControl]="control" [required]="isRequired">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like you're not using the required binding in the tests. Remove to keep it simple?

selector: 'reset-values-select',
template: `
<md-select placeholder="Food" [formControl]="control" [required]="isRequired">
<md-option *ngFor="let food of foods" [value]="food.value">
Copy link
Contributor

@kara kara May 22, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should also test this setup, since it will be common as well (where value binding is not added at all):

<md-option>None</md-option>

isRequired: boolean;

@ViewChild(MdSelect) select: MdSelect;
@ViewChildren(MdOption) options: QueryList<MdOption>;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It doesn't look like you're using this options ViewChildren query. Remove?

@@ -6,6 +6,8 @@

<md-select placeholder="Drink" [color]="drinksTheme" [(ngModel)]="currentDrink" [required]="drinksRequired" [disabled]="drinksDisabled"
[floatPlaceholder]="floatPlaceholder" #drinkControl="ngModel">
#drinkControl="ngModel">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like a rebase error here. #drinkControl="ngModel"> has been duplicated.

if (option.value == null) {
this._clearSelection();
this._onChange(option.value);
this.change.emit(new MdSelectChange(this, option.value));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rather than duplicating the change event logic from propagateChanges, seems like we could tweak propagateChanges to accept an optional value arg. I think it'd help make the conditional more readable.

private _onSelect(option) {
  if (this.multiple) {
      ...
  } else if (option.value == null) {
     this._clearSelection();
     this._propagateChanges(option.value);
  } else {
    this._clearSelection(option);
    this._selectionModel.select(option);
  }
...
}

private _propagateChanges(value?: any): void {
    let valueToEmit = Array.isArray(this.selected) ? this.selected.map(option => option.value)
        : (this.selected ? this.selected.value : value);
  ...
}

…tion

Allows for options, with a value of `null` or `undefined`, to clear the select. This is similar to the way the native select works.

Fixes angular#3110.
Fixes angular#2634.
@crisbeto
Copy link
Member Author

Addressed the feedback @kara.

Copy link
Contributor

@kara kara left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@kara kara removed their assignment May 22, 2017
@kara kara added the pr: lgtm label May 22, 2017
@kara kara added action: merge The PR is ready for merge by the caretaker and removed pr: needs review labels May 22, 2017
@tinayuangao tinayuangao merged commit 13524c1 into angular:master May 23, 2017
@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 6, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement
Projects
None yet
5 participants