Feature Request: SmartSelect formatValueText in HTML

[Simone4e]

It would be nice to have a method for returning HTML instead of plain text into <div class="item-title">:

Example:

In my specific case having optgroup I'd like to group them by optgroup name with a popup / tooltip to show all the values.

Example of solution:

$f7.smartSelect.create({
   formatValueHTML: function (values) {
       return values.map(el => `<a style="display: inline-block" class="button button-round button-outline button-small tooltip-init">${el}</a>`).join(''); 
   }
});

Or a simple preview button with open popup.

[Simone4e]

@nolimits4web is it possible to improve the function to create a popup of those values? Because obviously with multiple values ​​they don't fit the layout well

---

For now I've created my own version which could be an interesting feature:

$f7.smartSelect.create({
  openIn: 'popup',
  formatValueText: function(values) {
    return (values.length === 0) ? '' :
      `<a href="#" class="button button-round button-outline button-small tooltip-init" data-popup>Preview values</a>
                            <div class="popup my-popup">
                                    <div class="view">
                                        <div class="page">
                                            <div class="navbar">
                                                <div class="navbar-bg"></div>
                                                <div class="navbar-inner">
                                                    <div class="title">Popup</div>
                                                    <div class="right">
                                                        <a class="link popup-close">Chiudi</a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="page-content">
                                                <div class="list simple-list">
                                                    <ul>
                                                        ${values.map(el => `<li>${el}</li>`).join('')}
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>`;
  },
  on: {
    closed: function(select) {
      //create popup instance
      const popup = $f7.popup.create({
        el: '.my-popup'
      });
      //Create event for prevent to open select instead of popup preview
      select.valueEl.querySelector('[data-popup]').addEventListener('click', (e) => {
        e.stopPropagation();
        popup.open();
      });
    }
  }
});

As you can see from the example above, a link + popup is created automatically whenever there is a minimum of 1 value, at this point an instance of the popup is created and an event is assigned to the button which will prevent it from opening del select if the link is clicked.
This feature allows not only to keep the layout clean, but to have all the selected options always visible especially for complex structures.

---

edit 2:

For prevent error with multiple smartSelect just use const uniqueId = 'popup-preview-${f7.utils.id()}'; as class + data-popup.