Request: prefix also for optiongroup

[badulesia]

Hello.
You can set a prefix for an <option>, so you can display an icon (as example in the demo).
Is it possible to implement the same feature for an <optgroup>, using the same data-prefix way ?
In my case, I would like to display a country flag icon
Thank you

[thdoan]

Hi, thanks for the suggestion -- great idea! I'll add it to the next release.

[thdoan]

This feature is now available in v4.12.0.

[badulesia]

Thank you. I'll test in a few days. I'm currently travelling.

[badulesia]

about <optgroup> with prefix.

• a simple text is well displayed
• if I use an <img>, it is correctly displayed when the dropdown is opened, but the first image stays when the dropdown is closed ! I have also try to embed the <img> into a <span>, same result.
  

Can you have a look at this please ?
I'll investigate the code on my own too.

[thdoan]

Thanks for reporting this. I'll roll out a fix ASAP...

UPDATE: I'm not able to reproduce this issue. Can you please send me a link or upload a page that demonstrates this issue?

if I use an ,

I think whatever code you entered was stripped. You should wrap code around `` like this: <div>.

[badulesia]

Oups ... right, some code were stripped.
Try this for example
<optgroup data-prefix="<img src='someimage.png'>" label="sometext">
<option value="0" selected="selected">option0text</option>
</optgroup>

The <optgroup> image and text are well displayed when the menu is opened, but the image stays when the menu is closed. If I insert several <optgroup>, it's the image from the first one that stays.

BTW, in your code, you can use a faster method to recover data attribute
instead of elOpt.getAttribute('data-prefix')
use elOpt.dataset.prefix
documentation
This is now accepted by every web browsers (but not IE<11)

Thank you

[thdoan]

@badulesia thanks for the updated code and protip 👍

UPDATE: I just found this: https://jsperf.com/dataset-vs-getattribute-and-setattribute/3

What's interesting is in Chrome getAttribute is a wee bit faster than dataset; however, the fastest by far is neither of the above -- it's simply assigning data to a custom property off the element lol. I think I'll go with the fastest option.

[badulesia]

Hello.
I have done some extra tests: if I added the same prefix (with image) to both the options and optgroup, the menu is well displayed when opened and closed. If no prefix in options, the menu displays the first optgroup prefix when closed. Can this be an issue while rendering the menu closed at launch ?
I'm trying to investigate the code ...

[badulesia]

Hello
I have investigate the case and find the why. When the menu is closed, the first <li> is given color:transparent by the css rule
.prettydropdown > ul:not(.active) > li:not(.selected):first-child { color: transparent; }
Than means that the first <optgroup> text can't be seen, despite being written. But if it includes something else (ie an image) it is still displayed.

After a selection, all <li> receive display:none by the CSS rule .prettydropdown > ul > li
but not the first one. so it is still displayed.

You should consider another method to hide the content of the first-child other than color:transparent.

B.

[badulesia]

Hello.
I have found a solution : no change in js code , just a css rule ! 😁

.prettydropdown > ul:not(.active) > li:not(.selected):first-child {
  visibility: hidden; /* Prevent FOUC */
}

The previous rule color:transparent only disables text to be seen. This new rule disables everything yet preserving the shape and size. Simple, obvious and effective !
I have tested it with all the dropdown types (simple, multiple, with optgroups) and it seems to work ok.

B.

[thdoan]

@badulesia sorry I haven't had time to look at the issue, but I found your latest comment and I'm glad there was a good resolution. I will add your change to the CSS :-).

P.S. I'm aware of visibility:hidden so I'm sure there must be some outer use cases where I had to revert to color:transparent; unfortunately, I cannot recall that use case at the moment.

[thdoan]

Patch released.