The trigger is the only part of the select that is always visible and the area that will get more interaction from the user so it's not a surprise that it can be customized in many ways.
Disable the component
You can completely disable the trigger (and therefore the entire component) by passing
The selected option
As we saw in the How to use it section, Ember Power Select will reuse the same block used for each element of the list for the content of the trigger, both in normal and multiple mode, but this is something you can also customize if you need to.
Since we have run out of block to pass the the component we need to use other components if we want to
go any further. Pass
selectedItemComponent="component-name" to the component.
Within that component you have access to an
option property that contains the selected option. In multiple
selectedItemComponent component is rendered as once per each selected option.
Set a placeholder
If you pass
placeholder="Some text" to the component that message will be displayed
in the trigger when no value has been selected.
searchPlaceholderoption instead. Check The search section for more info.
Set a complex placeholder
Sometimes a simple string as placeholder is not enough and you want bold text, icons and such. In
that case you can pass a
placeholderComponent, on which you can do pretty much anything.
<strong>Fill</strong> <em>this</em> <small>select</small> and <span class="text-pink">praise</span> <img src="/grumpy-cat-5b86cf02061cc6f8018292193bcf0880.png" alt="grumpy-cat" width="24" height="24">
You can pass both
your component the placeholder text will be available.
Sometimes you want to allow the users to clear the selection they just made. Regular selects
don't allow that, but here is very simple, just pass
Please note that this option has no effect in
When the user clicks in the trigger the dropdown with the options appears. It's the most complex part of the component and the subject of the next chapter.