Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

select with disabled option in model: value not showing in closed state #12756

Closed
febeling opened this issue Sep 4, 2015 · 12 comments · Fixed by #14233
Closed

select with disabled option in model: value not showing in closed state #12756

febeling opened this issue Sep 4, 2015 · 12 comments · Fixed by #14233
Assignees
@Narretz
Labels
component: forms severity: confusing
Milestone
1.5.x

Comments

@febeling
Copy link

febeling commented Sep 4, 2015

Overview of the Issue

When using select with ngOptions' disable keyword, and the model value is one that is disabled through the ngOptions directive, the select element doesn't show the model value.

The UI should show the value, but upon opening the select dropdown, the value should appear disabled.

What actually happens is, that the select shows as if there was no value in the model.

Motivation for or Use Case

A model value can come from a record in a database, e.g. an option that was valid but no longer. In this case, the select doubles as display and input element. Due to this, it doesn't display a disabled value.

Angular Version(s)

1.4.5 (as disable is new to 1.4)

Browsers and Operating System

Tested on OS X 10.10 Chrome, FF, Safari

Reproduce the Error

http://plnkr.co/edit/unjDAvAUnBimn29URkSP?p=preview

Related Issues

Possibly #11762
@gkalpak
Copy link
Member

gkalpak commented Sep 4, 2015

I am not yet decided on whether this is a bug or a feature. (It's quite an "edge-y" case anyway.)
But here is a possible work-around:

<select
    ng-model="value"
    ng-options="val disable when ((val !== value) && (_some_condition_)) for val in values">
</select>

@fhernandezn
Copy link

I think this could be a feature. You are not indicating a value to use when a disabled value is set. Probably an optional value/argument/filter or something could be added.

@febeling
Copy link
Author

febeling commented Oct 6, 2015

In real life, there are a lot of scenarios were it happens that a current value can't be picked anew. Think of a pricing plan picker, were you still might have the champions plan from the early beta as your current value, but the user editing their pricing plan can't pick that one any longer.

In my mind, the current value of the input element and the option picking are quite distinct responsibilities of this HTML element, and I believe there are good reasons to not conflate them when writing directive to support them in Angular.

@fhernandezn
Copy link

I get your point and I also think this is a real use case. The problem that I see is that angular does not know what to do when you set the value to a disabled option. What do you propose to do?

Probably (I'm not sure) the ng-model value could change when a disabled option is selected. If that happens you could have to indicate what value to use. This is just an idea.

@Narretz Narretz added this to the Purgatory milestone Oct 6, 2015
@Narretz
Copy link
Contributor

Narretz commented Oct 6, 2015

I remember that Firefox had a bit of a problem with disabled values being selected, but I can definitely see how it makes sense to show the selected value if it comes from the model.

@fhernandezn
Copy link

It makes sense, but I think that when an option is disabled shouldn't be available to be selected. Maybe in this case the problem is to set the model with an "invalid" value. Anyway, I guess that the select should not select the disabled option or add a blank option.

If I'm wrong please let me know.

@frfancha
Copy link

frfancha commented Oct 7, 2015

@gkalpak Your proposal is excellent and makes sense in 99% of data entry cases.
A inactive value can't be selected as new value for the field, but if the field already contains this value then your are allowed to keep it. More advanced or complex scenarios must be handled at record level anyway.
So I think that what you propose is much more than a work around, it is really the way we should use it and there is nothing to change.

@bogdanalexe90
Copy link

Hi guys, having the same issue here. The use case is we want to deprecate some values that a user may selected them in the past. If he doesn't touch the select box we want to display the value that he selected it and now is disabled. If he change the value he can not select anymore.

The workaround proposed by @gkalpak is working well but still this feels a bit hacky.

So i will suggest to follow the browser implementation where you can have a selected value that is disabled.

@Narretz
Copy link
Contributor

Narretz commented Mar 14, 2016

I think since a normal select, as well as a select with ngModel but without ngOptions selects disabled options, we should do the same for ngOptions.

Narretz added a commit to Narretz/angular.js that referenced this issue Mar 14, 2016
@Narretz
fix(ngOptions): select disabled option when set from model
e8ec11e 
When a disabled option is set as the ngModel, ngOptions will now select the option
in the select element, which will set select.val() to the option hash value and visually
show the option value / label as selected in the select box. Previously, disabled
options forced the unknown value.
The previous behavior is inconsistent with both default HTML behavior and select with
ngModel but without ngOptions. Both allow disabled values to be selected programmatically.

Common use cases for this behavior include options that where previously valid, but have
been disabled, and cannot be selected again.

Fixes angular#12756
@Narretz Narretz modified the milestones: 1.5.x, Purgatory Mar 14, 2016
@Narretz Narretz self-assigned this Mar 14, 2016
@Narretz Narretz mentioned this issue Mar 14, 2016
Merged
2 tasks
Narretz added a commit to Narretz/angular.js that referenced this issue Mar 14, 2016
@Narretz
fix(ngOptions): select disabled option when set from model
c83b4ba 
When a disabled option is set as the ngModel, ngOptions will now select the option
in the select element, which will set select.val() to the option hash value and visually
show the option value / label as selected in the select box. Previously, disabled
options forced the unknown value.
The previous behavior is inconsistent with both default HTML behavior and select with
ngModel but without ngOptions. Both allow disabled values to be selected programmatically.

Common use cases for this behavior include options that where previously valid, but have
been disabled, and cannot be selected again.

This commit removes a duplicate tests, all other tests that previously checked that disabled
options are not set have been adjusted to the ensure the opposite.

Fixes angular#12756
Narretz added a commit to Narretz/angular.js that referenced this issue Mar 14, 2016
@Narretz
fix(ngOptions): select disabled option when set from model
d04cc68 
When a disabled option is set as the ngModel, ngOptions will now select the option
in the select element, which will set select.val() to the option hash value and visually
show the option value / label as selected in the select box. Previously, disabled
options forced the unknown value.
The previous behavior is inconsistent with both default HTML behavior and select with
ngModel but without ngOptions. Both allow disabled values to be selected programmatically.

Common use cases for this behavior include options that where previously valid, but have
been disabled, and cannot be selected again.

This commit removes a duplicate tests, all other tests that previously checked that disabled
options are not set have been adjusted to the ensure the opposite.

Fixes angular#12756
@Narretz
Copy link
Contributor

Narretz commented Mar 23, 2016

We are inclined to change ngOptions so that when a model is set to a value that matches a disabled option, the option will be selected and set as the select.value. This is in principle more of a visual change, as the only difference is that the select will now show that the disabled option is selected. Even before this change, the scope model value is set even if the associated option is disabled, so selecting the disabled option is consistent with the actual data model.
I was also checking in to see if @sjbarker as the creator of this feature has some opinion on this. :)

Narretz added a commit to Narretz/angular.js that referenced this issue Mar 29, 2016
@Narretz
fix(ngOptions): set select value when model matches disabled option
3b05c48 
When ngModel is set to a value that matches a disabled option, ngOptions will now select the option
in the select element, which will set select.val() to the option hash value and visually
show the option value / label as selected in the select box. Previously, disabled
options forced the unknown value.
The previous behavior is inconsistent with both default HTML behavior and select with
ngModel but without ngOptions. Both allow disabled values to be selected programmatically.

A common use case for this behavior is an option that was previously valid, but has
been disabled, and cannot be selected again.

This commit removes a duplicate test, and all other tests that previously checked that disabled
options are not set have been adjusted to the ensure the opposite.

Fixes angular#12756
Narretz added a commit that referenced this issue Mar 30, 2016
@Narretz
fix(ngOptions): set select value when model matches disabled option
832eba5 
When ngModel is set to a value that matches a disabled option, ngOptions will now select the option
in the select element, which will set select.val() to the option hash value and visually
show the option value / label as selected in the select box. Previously, disabled
options forced the unknown value.
The previous behavior is inconsistent with both default HTML behavior and select with
ngModel but without ngOptions. Both allow disabled values to be selected programmatically.

A common use case for this behavior is an option that was previously valid, but has
been disabled, and cannot be selected again.

This commit removes a duplicate test, and all other tests that previously checked that disabled
options are not set have been adjusted to the ensure the opposite.

Fixes #12756
@sjbarker
Copy link
Contributor

Sorry I'm late on this @Narretz. LGTM, though. I see no reason a disabled option shouldn't be rendered when selected programmatically, and no reason appears in the spec. Glad to see it made it in.

@febeling
Copy link
Author

Yes, nice to see this change go in. Thanks to everyone involved.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@Narretz Narretz

Labels
component: forms severity: confusing
Projects
None yet
Milestone
1.5.x
Development

Successfully merging a pull request may close this issue.

fix(ngOptions): select disabled option when set from model Narretz/angular.js
7 participants
@febeling @Narretz @sjbarker @gkalpak @bogdanalexe90 @frfancha @fhernandezn