Allow option to render dropdown trigger as an input that is searchable and opens the list when focused

[JoannaFalkowska]

This is so simple and intuitive behaviour I'm really surprised it isn't implemented yet. Am I missing some reason for this or some simple workaround?

[cibernox]

Perhaps ember-power-select-typeahead is what you want? There is a few addons built on top of this addons with different flavours of select.

[miguelcobain]

This is the default UI for selectize. I also tend to like it more than the "input in content", but that's just my personal taste. It also seems closer to the multiple select.

[cibernox]

I understand.

There is room for a new addon then. One that just implements this new trigger. Tentative name ember-power-select-search-in-trigger, which exposes a power-select/trigger-with-search components. It will be pretty similar to the beforeOptions component. It can either be passed on a per-case bases or it can be configured as the default trigger using the instructions here.

There is a problem with this approach. When you have a selected value, what do you show in the input. You must have way of stringify the option if they are not strings already, of perhaps just show the input when the trigger is focused.

[miguelcobain]

What selectize does is to create a "fake" input and render the option there. Then it places a real input next to it. It works pretty much like the multiple select here works, I think.

[JoannaFalkowska]

I found a workaround just using following styles in SASS to "disguise" the trigger while using renderInPlace=true option:

// disguise trigger as input
.ember-power-select-trigger
  height: 44px
  line-height: 44px
  overflow: hidden
  padding: 0 12px
  cursor: text
.ember-power-select-trigger[aria-expanded="true"]
  visibility: hidden
.ember-power-select-selected-item, .ember-power-select-placeholder
  margin: 0
.ember-power-select-status-icon
  display: none

.ember-power-select-dropdown
  position: absolute
  top: 0
  z-index: 5
  border: none
.ember-power-select-search
  padding: 0
  input
    border-bottom-left-radius: 0
    border-bottom-right-radius: 0
    padding: 0 12px

.ember-basic-dropdown-content
  background-color: transparent
.ember-power-select-options[role="listbox"]
  border-left: 1px solid $alto
  border-right: 1px solid $alto
  max-height: 220px
.ember-power-select-option
  height: 36px
  line-height: 34px
  background-color: $white

Of course that's not perfect and has some issues with for example focus/Tab button flow, but it's good enough for me.

I think you are right that ember-power-select-typeahead would work for me, I completely overlooked that repo.