Setting data-content muddles up the title for the selected option

[yazinsai]

I've added some HTML in the data-content attribute of the <option>s so it displays a flag next to the list of countries.

Problem is, when I hover over the selected option, I see a tooltip with the HTML that I entered (and it looks gross). I noticed this happens because the title for the displayed element takes the value of the data-content attribute for some reason.

Here's the detailed HTML I'm using:

<option value='BH' data-content="<img src='
    data:image/png;base64,iVB....'> Bahrain"> Bahrain </option>

[apantsiop]

I also have the same problem. Looked at the code a little bit. The title is set here:

var title = !this.multiple ? selectedItems[0] : selectedItems.join(this.options.multipleSeparator);

and the selectedItems array is filled right above:

if ($this.data('content') && that.options.showContent) {
   return $this.data('content');
   } else if ($this.attr('title') !== undefined) {
   return $this.attr('title');
   } else {
   return icon + $this.html() + subtext;
}

but I don't know what the right solution might be. I thought about escaping the html into plain text but this might not be a good solution.

[yazinsai]

The solution could be to simply use the text between the <option> and </option>. To use my screenshot above as an example, the value returned would simply be Bahrain.

[mkopala]

I was having the same issue. I just hacked it locally for now. The change:

264c264
<             this.$button.attr('title', $.trim(title));
---
>             this.$button.attr('title', $.trim($('<span>' + title + '</span>').text()));

Feel free to make this change or turn it into a pull request.

[marionoak]

I also was having this problem. My solution is to use CSS to hide what you need to hide, while an option is selected and its "data-content" is displayed in the "button" element.
For your example :

button.selectpicker img { display: none; }

[yazinsai]

@marionoak wouldn't that just hide the image of the flag? The whole point of using this library was to display the flag. It's overdue, but I'll send in a PR anyway to fix this by stripping out the HTML in the data-content attribute.

[t0xicCode]

This should have been fixed in 4e61593. Are you sure the PR is needed @yazinsai?

[yazinsai]

@t0xicCode you're right! I hadn't checked it since opening the issue (a long time ago). Ran a quick test now and it works fine. Thanks 👍

[jgambarios]

With the latest 1.6.3 the issue is present again, this was broken in this latest release, 1.6.2 works as expected.
This issue should be re-open.

[yazinsai]

See @jgambarios's note above .. seems like the issue has resurfaced.

[jgambarios]

Any news on this one?, would be great to have it fix for the next release. Thanks!

[Khrysller]

+1

[emage]

+!

[jgambarios]

Just in my opinion this issue is critical because all we use the data-content wont be able to upgrade, this is an error that I can not allow the visitors of my site to see.

[snipe]

+1

[snipe]

@jgambarios - if you're hosting the file locally, you can apply the change in 4e61593 and it should work. (Sucks to update out of band like that, but in a pinch it might help.)

[caseyjhol]

I've been trying to replicate this on my end. It'd be nice to get this squashed finally. Can anybody link me to an example?

[snipe]

Sure thing: http://snipe.github.io/bootstrap-select-demo/

When you mouseover the dropdown (without clicking on it), you can see the title attribute pops up this:

Applying the fix from 4e61593 (which looks like a regression issue, since it's not in the current version) solves it.

[snipe]

For easy reference, the select code is here:

<select class="selectpicker" name="listing_type[]" title='want or have' data-size="2" data-header="Want/Have" multiple>
    <option value="want" data-content="<span class='label label-info'>have</span>" selected>have</option>
    <option value="have" data-content="<span class='label label-default'>want</span>" selected>want</option>
</select>

With this JS at the bottom:

<script>
    // To style only <select>s with the selectpicker class
    $('.selectpicker').selectpicker();
</script>

[caseyjhol]

Can you update that to 1.6.5 to see if it persists? It's working for me with 1.6.5 in my test environment.

[snipe]

It's using 1.6.3 - did you mean could I update to 1.6.5?

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css">

[snipe]

I can confirm this is fixed in 1.6.5: http://snipe.github.io/bootstrap-select-demo/

[caseyjhol]

Yes, I meant 1.6.5 - sorry. Happy to hear it's working. I'll wait for confirmation from others to ensure it's working as expected for them before closing this out.