Framework7: Smart select is always initialized

[ahmeddaif1]

There are no option to make allow a smart select to be uninitialized _(i.e. no item selected by default)._
even if the tag selected in not exist. _(the first item will be selected by default)_

[nolimits4web]

Smart select is a wrap around HTML's <select> element which has the same behavior, it can't be with _no item selected by default_

[kcaran]

In my app, I added a first option in the <select> without a value:

<select>
<option value="">Select...</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>

Then I modified smart-select.js to ignore the first option if it doesn't have a value:

diff --git a/src/js/smart-select.js b/src/js/smart-select.js
index 33db4e0..b18c403 100644
--- a/src/js/smart-select.js
+++ b/src/js/smart-select.js
@@ -105,6 +105,7 @@ app.smartSelectOpen = function (smartSelect, reLayout) {
     for (var i = 0; i < select.length; i++) {
         option = $(select[i]);
         if (option[0].disabled) continue;
+        if (!option[0].value) continue;
         optionData = option.dataset();
         optionImage = optionData.optionImage || $selectData.optionImage;
         optionIcon = optionData.optionIcon || $selectData.optionIcon;

[ahmeddaif1]

thanks to 'kcaran' and of course "nolimits4web"
I workaround it by adding a dummy select element with attr "selected" and "disabled" and adding a css class to add display:none to the smart-select-page li.disabled

full code

html

<li>
    <a href="#" class="item-link smart-select" data-searchbar="true" data-back-on-select="true" data-searchbar-placeholder="{{title}}">
        <select name="{{elementId}}">
            <option value="" selected disabled></option>
            {{#each items_arr}}<option value="{{@index}}">{{this}}</option>{{/each}}
        </select>
        <div class="item-content">
            <div class="item-inner">
                <div class="item-title">{{title}}</div>
                <div class="item-after"></div>
            </div>
        </div>
    </a>
</li>

css

smart-select-page li.disabled{
    display:none
}

I had posted this answer to [https://stackoverflow.com/questions/35157845] and I'll close this issue

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.