leocaseiro / angular-chosen

AngularJS Chosen directive is an AngularJS Directive that brings the Chosen jQuery in a AngularJS way
http://leocaseiro.github.io/angular-chosen/
MIT License
682 stars 248 forks source link

Set Placeholder for empty <options> #236

Closed dfmedeiros closed 5 years ago

dfmedeiros commented 7 years ago

Hello @leocaseiro, thanks for the great work here.

I noticed a difference between how angular-chosen and the original library handles selects with no valid options inside:

Plain chosen library: https://plnkr.co/edit/QqUPZGgmiUkFEpVgYkZF?p=preview

angular-chosen version: https://plnkr.co/edit/o9w6SOCHtcE7sNih9ttS?p=preview

If you pay attention you'll notice that angular-chosen changes the placeholder to the no-results-text once it's empty.

To keep the original behavior I had to comment this part of the library.

updateMessage = function() {
  // if (empty) {
  //   element.attr('data-placeholder', chosen.results_none_found).attr('disabled', true);
  // } else {
  //   element.removeAttr('data-placeholder');
  // }
  return element.trigger('chosen:updated');
};

Is it something intentional? Do you have any suggestions on how to fix it without commenting this?

Thanks again

leocaseiro commented 7 years ago

Hi @dfmedeiros,

If you need to change the empty selects, you can use no-results-text="'Nenhum resultado'", like so:

<select
      chosen
      no-results-text="'Nenhum Resultado'"
      placeholder-text-single="'Another option'"
      ng-model="item.selected"
      ng-options="option.value as option.name for option in options">
          <option value=""></option>
      </select>
leocaseiro commented 7 years ago

In regards to the code, we have 2 different placeholders which are: placeholder-text-multiple and placeholder-text-single

You can read more in the docs: http://leocaseiro.github.io/angular-chosen/#chosen-options

dfmedeiros commented 7 years ago

@leocaseiro - Yeah, but changing the no-results-text is not really a fix for that, because if I search for something that doesn't exist, it will display Nenhum resultado "term that I searched for" and this is not what I want.

Also yeah, I'm using the correct placeholder attribute. No matter what I was doing, it always displays the no-results-text and I can't change that.

So once I was taking a look at the library source I found the issue, that place is the responsible for causing the inconsistencies between the library and the original chosen.

dfmedeiros commented 7 years ago

@leocaseiro - Just to give you some context, I have a combobox with a list of tags, but sometimes those tags can be empty. Once someone tags something, this combobox will be automatically filled with tags on real time, so I can't just change the no-results-text because it would also compromise the experience for users searching for something that doesn't exist.

I would just like to keep the original behavior as chosen. If the select contains options or not, it should just display the same placeholder.

leocaseiro commented 7 years ago

Hi @dfmedeiros, would you mind to setup a plunker with your scenery?

If you setup a jquery chosen or angular-chosen that shows the behaviour you're expecting I'm happy to give you a hand.

Here is an example with no-results-text and placeholder-text-single: https://plnkr.co/edit/nXFBXs02FmBJUYZNR4k6?p=preview

PS: The reason we have the updateMessage() is from the PR https://github.com/leocaseiro/angular-chosen/pull/128

dfmedeiros commented 7 years ago

@leocaseiro - There's already a plunker for that.

https://plnkr.co/edit/o9w6SOCHtcE7sNih9ttS?p=preview

See that it displays "No results match" when using angular-chosen.

But when using just chosen it displays the right thing:

https://plnkr.co/edit/QqUPZGgmiUkFEpVgYkZF?p=preview

leocaseiro commented 7 years ago

Have you tried that? no-results-text="'Message for no results'"

<select
no-results-text="'No results message here'"
      chosen
      placeholder-text-single="'Another option'"

      ng-model="item.selected"
      ng-options="option.value as option.name for option in options">
      <option value=""></option>
      </select>
leocaseiro commented 7 years ago

Hi @dfmedeiros, I think I understood what you mean.

You don't want to show "No results match" by default, only after a search. But before that, it should show the placeholder because the options are empty.

PS: I took this library with this feature that way already, I'm happy to add a new option for "no-options-text" if you'd like to add to it. I'm accepting PR's

dfmedeiros commented 7 years ago

@leocaseiro - Yeah, that's exactly the problem. I'll take a shot once I have some free time. Thanks again!