Disable individual list items

[DsosaV]

Using this component in my own application I realized there are use cases where an item should not be selectable. "Disabled" items must be shown in the list but not be selectable, only to let the user know of their existence.

An appropriate example would be a set of parameters configured for an entity. If any of those parameters are later disabled in some other part of the application, when editing the configured entity, the disabled items must still be shown but not selectable.

The user can always select an item in the list as long as it is not disabled. As of right now, the user can only disable the entire component and not individual items.

Proposed solution:

1. Add a "disabled" property to the ListItem model.
2. Add the "disabled" property of the ListItem model to the disabled boolean expression in the input tag for each individual list item.

[akshay-nimbal]

@DsosaV Thank you for the PR as I had the similar requirement. May I know when will this change be merged to the master and released to NPM?

Thanks.

[itsmevineeth]

@DsosaV when this change will release.

[DsosaV]

@DsosaV when this change will release.

It depends on @NileshPatel17. I'm hoping it will be soon.

[akshay-nimbal]

@DsosaV @itsmevineeth The last release for this was 10 months ago. And it has 85 pull requests. Not sure if he will do it in coming few days.

[DsosaV]

@NileshPatel17 I removed all isDisabled properties from the test cases and only left one set to true, as requested.

[NileshPatel17]

@DsosaV published new version. Please let me know if you find any issue. I was planning to upgrade angular to 8 before merging any PR. but will do that now.

[itsmevineeth]

@NileshPatel17 : Thanks for the update. Can you update the documentation also.

[charliegriefer]

Can we programmatically re-enable disabled items?

In onItemSelect() I've done the following: this.dropdownList[1].isDisabled = false;

... but the item does not become enabled.

Thanks!

[DsosaV]

Can we programmatically re-enable disabled items?

In onItemSelect() I've done the following: this.dropdownList[1].isDisabled = false;

I haven't tried but I believe that you must assign a new object instead of mutating the current one so Angular is notified of a change and updates the view.

Try this:

this.dropdownList[1] = {...this.dropdownList[1], isDisabled: false};

[charliegriefer]

Can we programmatically re-enable disabled items? In onItemSelect() I've done the following: this.dropdownList[1].isDisabled = false;

I haven't tried but I believe that you must assign a new object instead of mutating the current one so Angular is notified of a change and updates the view.

Try this:

this.dropdownList[1] = {...this.dropdownList[1], isDisabled: false};

Hey DsosaV... thanks for the reply.

Your code updated the array (console.log()'d it after I implemented your code)... but did not update the dropdown.

So far the only way I've seen to manipulate the dropdown is to change the reference of the control's data (see https://github.com/NileshPatel17/ng-multiselect-dropdown/issues/68)... but that closes the control. Not really friendly UI if a user clicks on a particular item, which is meant to enable one of the disabled items, and the control closes :\

[sharmautkarsh31]

Any updates on this problem?

[Aslam1027]

Can anyone provide the update