ember-power-select icon indicating copy to clipboard operation
ember-power-select copied to clipboard

{{else}} block for empty results

Open esbanarango opened this issue 5 years ago • 2 comments
trafficstars

We're upgrading from 3.0.6 to 4.0.2. We have this searchable power-select component, and we were using the {{else}} block for displaying custom html code when no results. After upgrading that block isn't showing anymore.

{{#power-select
  searchEnabled=true
  search=(queue
            (action (mut searchName))
            (action (perform searchEmployeesFromLocationTask))
          )
  placeholder=" Type to search employees at other locations"
  labelPath="name"
  selected=changeset.name
  disabled=disabled
  onChange=(action updateEmployee) 
  as |employee|
}}
  {{employee.name}}  
{{else}}
  CUSTOM HTML CODE
{{/power-select}}

Apparently that was removed here. What's the suggested approach now? Or how could we get this {{else}} block back?

Thank you.

esbanarango avatar Jun 03 '20 06:06 esbanarango

At the moment the argument "noMatchesMessage" allows you to place simple text in there. If you need html code, you could write a custom modifier (https://github.com/ember-modifier/ember-modifier). Unfortunately a modifier can only be placed on the power select if it's rendered in place (it passes attributes to a basic dropdown which will only apply them if rendered in place). A solution to this would be wrapping the power select inside a div and placing the modifier on the div.

ybaldus avatar Jun 22 '20 08:06 ybaldus

Yeah, we had to give up that feature when updating to glimmer components. You still can do it by overriding the optionsComponent, but it's very inconvenient. I hope that named blocks will allow us to reintroduce this feature.

cibernox avatar Aug 07 '20 17:08 cibernox