Issue with Dojo/Dijit and blank option in form select

Question

I am very new to Dojo and I am running into the following issue.

I have the following form select generated by spring roo:

<div id="_f_trc_suivi_domain_Pli_conteneurNum_id">
            <label for="_conteneurNum_id">Conteneur Num : </label>
            <select id="_conteneurNum_id" name="conteneurNum">
            <option value="">Tous</option>
                <option value="1">951</option>
                <option value="2">753</option>
                <option value="3">753159</option></select><br />
            <script type="text/javascript">
                Spring.addDecoration(new Spring.ElementDecoration({
                    elementId : '_conteneurNum_id',
                    widgetType : 'dijit.form.FilteringSelect',
                    widgetAttrs : {
                        hasDownArrow : true
                    }
                }));
            </script>
        </div>

which results in the following in firebug:

    <div wairole="combobox" dojoattachpoint="comboNode"
        id="widget__conteneurNum_id"
        class="dijit dijitReset dijitInlineTable dijitLeft dijitTextBox dijitComboBox dijitTextBoxError dijitComboBoxError dijitError"
        role="combobox" widgetid="_conteneurNum_id"
        aria-labelledby="_conteneurNum_id_label" aria-expanded="false">
        <div dojoattachevent="onmousedown:_onArrowMouseDown"
            wairole="presentation" dojoattachpoint="downArrowNode"
            class="dijitReset dijitRight dijitButtonNode dijitArrowButton dijitDownArrowButton dijitArrowButtonContainer"
            role="presentation">
            <input type="text" wairole="presentation" readonly="" tabindex="-1"
                value="? " class="dijitReset dijitInputField dijitArrowButtonInner"
                role="presentation">
        </div>
        <div class="dijitReset dijitValidationContainer">
            <input type="text" wairole="presentation" readonly="" tabindex="-1"
                value="? "
                class="dijitReset dijitInputField dijitValidationIcon dijitValidationInner"
                role="presentation">
        </div>
        <div class="dijitReset dijitInputField dijitInputContainer">
            <input type="text" waistate="haspopup-true,autocomplete-list"
                wairole="textbox" dojoattachpoint="textbox,focusNode"
                dojoattachevent="onkeypress:_onKeyPress,compositionend"
                autocomplete="off" class="dijitReset dijitInputInner"
                role="textbox" aria-haspopup="true" aria-autocomplete="list"
                id="_conteneurNum_id" tabindex="0" aria-required="true"
                aria-invalid="true" value="" aria-owns="_conteneurNum_id_popup"><input
                type="hidden" name="conteneurNum" value="">
        </div>
    </div>

but unfortunately, it always displays a white option above the blank option whose value is "Tous".

See following gif:

What I am getting wrong? Any clue welcome.

EDIT: I know for certain the problem lies with this: <option value="">Tous</option> especially the value="" part. I can rephrase and refine my question as follows: how can I make sure Dojo/Dijit deals properly with this: value=""??

Answer 1

Just put the 0 value there as expected. I have no issues with the following code:

<div id="_f_trc_suivi_domain_Pli_conteneurNum_id">
        <label for="_conteneurNum_id">Conteneur Num : </label>
        <select id="_conteneurNum_id" name="conteneurNum">
            <option value="0">Tous</option>
            <option value="1">951</option>
            <option value="2">753</option>
            <option value="3">753159</option>
          </select><br />
        <script type="text/javascript">
            Spring.addDecoration(new Spring.ElementDecoration({
                elementId : '_conteneurNum_id',
                widgetType : 'dijit.form.FilteringSelect',
                widgetAttrs : {
                    hasDownArrow : true
                }
            }));
        </script>
    </div>

Answer 2

I just found a workaround after some hours wrestling with MyEclipse 2014, Spring 3.1 and old Dojo/Dijit versions, I know this is old but MyEclipse packs these old versions of everything and makes one crazy.

I tried FilteringSelect, Select with null value, html option with value, and replacing dojo libraries which messed the rest of the project. So I'll post this here if it could help anybody:

This case is common if you want a dummy prompt option in your select like '-- Select item --' with a null value. Dojo/dijit version packed with MyEclipse into spring-js-2.3.1.RELEASE, replaces option with null values with separators showed in the dropdown list. In a few last versions of Dojo/Dijit this behaviour seems to be corrected as you can see in the fiddle of Craig Swing.

If the property you bind is not a string, you can assign a single espace as value of dummy option instead of null, because later will be binded as null in the controller, so the dummy option will be showed. Ex:

<option selected="selected" value="">Tous</option>

But if the property is a String, this way you will find with an unwished blank space in the property in your controller.

So I finally opted to directly modify Select.js

Place it in your project in webapps/resources/dijit/form/Select.js Comment this lines:

/*
if(!_1.value){
return new dijit.MenuSeparator();
}else{
*/
var _2=dojo.hitch(this,"_setValueAttr",_1);
var _3=new dijit.MenuItem({option:_1,label:_1.label,onClick:_2,disabled:_1.disabled||false});
dijit.setWaiRole(_3.focusNode,"listitem");
return _3;
/*
}
*/

And don't forget to override this path for Resource Servlet in web.xml:

<servlet-mapping>
    <servlet-name>My Servlet</servlet-name>
    <url-pattern>/resources/dijit/form/Select.js</url-pattern>
</servlet-mapping>