Skip to content

Allow applying classes to the trigger items when in multi select #1460

@cah-brian-gantzler

Description

@cah-brian-gantzler

When power select is in multi select mode, the item that is generated contains the clear in an <li> element. While there is a selectedItemComponent, it does not include the <li> or the clear element. I would like to be able to conditionally change the background of the items.

While I can not find this documented, the code does allow the option to contain a property disabled, see https://github.com/cibernox/ember-power-select/blob/master/addon/components/power-select-multiple/trigger.hbs#L9

Could we extend this to a property named className perhaps to allow for

<li class="ember-power-select-multiple-option {{opt.className}} {{if opt.disabled "ember-power-select-multiple-option--disabled"}}">

Should there be other things added in the future (aria-labels maybe) should we change this to a single property to allow more customizable options to be added while only reserving one property name. For example

<li class="ember-power-select-multiple-option {{opt.powerSelectItem.className}} {{if opt.powerSelectItem.disabled "ember-power-select-multiple-option--disabled"}}">

This would be a breaking change, but an or in the if would allow for backward compatibility. We could temporarily add a did-insert to the <li> element that could do a check and deprecate the disabled property until the next release and then remove.

Would be happy to do a PR an approval was given for which direction to take, respect a className property or create a powerSelectItem property and put className there and move disabled.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions