Need disabled options in ember power select

Question

Using ember power select, need to display some of the options as disabled, how to do it. Dont know how to proceed,the options will be disabled dynamically based on server side value.

{{#power-select options=names onchange=(action "foo") as |name|}}
  {{name}}
{{/power-select}}

@remi's answer is certainly in the right direction, but I would encourage you to discuss it in the power-select repo on Github. I just checked through the issues and this seems like something that should be sorted out. — sheriffderek

Remi Smirra Remi Smirra · Accepted Answer · 2017-01-05T09:04:27

I haven't tried it yet, but what you could do is to write a helper (lets say should-be-disabled) that decides, whether a value should be disabled and add a css class to it if the helper returns true. Usage would be like this:

{{#power-select options=names onchange=(action "foo") as |name|}}     
    <span class={{if (should-be-disabled name) 'item-disabled'}}>{{name}}</span> 
{{/power-select}}

Your item-disabled class would look something like this:

.item-disabled {
    color: gray;
    pointer-events: none;
    cursor: not-allowed;
}

Need disabled options in ember power select

1 Answers