cibernox
allowClear button gone with selectedItemComponent
In looking through this site, it seems like the selectedItemComponent just replaces the text in the trigger, and shouldn't hide the allowClear "x", but I can't see it.
My component is simple, just something like this:
<div>
{{option.firstname}} {{option.lastname}}
</div>
If I put nothing in the component hbs, the allowClear "x" does show. It seems like my text is covering it up.
Am I doing something wrong?
No, you're not. The key thing is that this button is actually outside that component, it is part of the trigger. That is the component you must customize to remove it.
It's less dauting that it seems tho. Import and export the original trigger without changing a comma:
import EmberPowerSelectMultipleTrigger from 'ember-power-select/components/power-select-multiple/trigger';
export default EmberPowerSelectMultipleTrigger.extend();
And make that component's template be a copy-paste of the original template with the the changes you want (no buttons)
Actually, I want the allowClear button and it's not showing. This is on a single select, not a multiple select.
All, I misread it. Are you passing allowClear=true? The logic to show that button is pretty simple: https://github.com/cibernox/ember-power-select/blob/master/addon/templates/components/power-select/trigger.hbs#L7
Yes, here's my code:
{{#power-select
placeholder="Select User..."
selected=selectedUser
selectedItemComponent="order-user-trigger"
disabled=(not orderSelected)
dropdownClass="custom-eps-dropdown"
triggerClass="custom-eps-trigger"
loadingMessage="Searching users..."
search=(perform userSearch)
allowClear=true
onchange=(action "userChanged")
as |u|}}
<div class="ps-ml">
<div class="ps-ml-bold">
{{u.firstname}} {{u.lastname}}
</div>
<div class="ps-ml-reg">
{{u.username}}
</div>
</div>
{{/power-select}}
If I take out the selectedItemComponent, it shows the selected object just like it showed in the list, and it has the "x" at the bottom of all the lines on the right.
Have you inspected the DOM verify that it's not actually there and this is a CSS/z-index issue? I don't see any reason why it wouldn't be there.
Yes, it's in the dom, it's on the line below the trigger. I've included a couple of screen shots to show. I'm guessing I have some css that's messing it up, but I don't see anything.
If I add the code:
top: 0; to ember-power-select-clear-btn class, it works.
I think that if your remove the <div> in the template of the selectedItemComponent it should work. It is probably failing because the div is display block and is pushing the x down.
I tried making the <div> inline-block and removing it altogether. I still have the same issue. The ember-power-select-status-icon is in the right place, the main difference I can see is the top: 0 and bottom: 0 absolute positioning.
I need to check if I can make the default styles smarter so this works by default.
When I added top:0 and bottom:0 to that class it worked fine. But I'm not a whiz at css by any means so it may end up affecting something else.
By the way, I LOVE power select, use it all over and more and more of the options all the time. It's fantastic!