FilterPane is not rendering the "past" condition correctly in IE

[blueleader07]

Good afternoon GridX team,

I've found an issue with the FilterBar module. The issue is caused by a bug in the FilterPane.html template.

To recreate:

1. Filter by a date field
2. Select "past" as the condition
3. In Chrome a dropdown will appear allowing you to select "Day", "Month", or "Year. In Internet Explorer the dropdown is empty (it doesn't seem to get populated at all).

I compared your code in FilterPane.html with the examples provided by Dojo for dijit.form.Select (http://dojotoolkit.org/reference-guide/1.10/dijit/form/Select.html). You have "option" elements inside of a "div" element which is different from the dojo examples. The fix is very simple. You need to replace the "option" elements with "span" elements as defined on the dijit.form.Select documentation: You could also replace the "div" with a "select". Either way would work it just needs to be consistent with the dojo examples. I suggest you go with "div" and "span" in case you want to do any styling later. I've provided the fixed code below.

The bug exists in two sections of gridx/templates/FilterPane.html

Look for the comments:

And

This:

    <!-- date past x days/months/years -->
    <li class="gridxFilterPaneFieldWrapper gridxFilterPaneDatePastWrapper">
        <div data-dojo-type="dijit.form.NumberTextBox" aria-label="${_valueAriaLabel}" intermediateChanges="true" style="width: 44%; float: left"></div>
        <div class='gridxSpace' style='width: 10%; float: left; height: 1px;'></div>
        <div data-dojo-type="dijit.form.Select" aria-label="${_valueAriaLabel}" style="width: 44%; float: left">
            <option value="day" selected="selected">Day</option>
            <option value="month">Month</option>
            <option value="year">Year</option>
            <!-- <option value="FL">Florida</option> -->
            <!-- <option value="CA">California</option> -
        </div>
    </li>

Should be:

    <!-- date past x days/months/years -->
    <li class="gridxFilterPaneFieldWrapper gridxFilterPaneDatePastWrapper">
        <div data-dojo-type="dijit.form.NumberTextBox" aria-label="${_valueAriaLabel}" intermediateChanges="true" style="width: 44%; float: left"></div>
        <div class='gridxSpace' style='width: 10%; float: left; height: 1px;'></div>
        <div data-dojo-type="dijit.form.Select" aria-label="${_valueAriaLabel}" style="width: 44%; float: left">
            <span value="day" selected="selected">Day</span>
            <span value="month">Month</span>
            <span value="year">Year</span>
        </div>
    </li>

And this:

    <!-- datetime past x days/months/years -->
    <li class="gridxFilterPaneFieldWrapper gridxFilterPaneDatetimePastWrapper">
        <div data-dojo-type="dijit.form.NumberTextBox" aria-label="${_valueAriaLabel}" intermediateChanges="true" style="width: 44%; float: left"></div>
        <div class='gridxSpace' style='width: 10%; float: left; height: 1px;'></div>
        <div data-dojo-type="dijit.form.Select" aria-label="${_valueAriaLabel}" style="width: 44%; float: left">
            <option value="day" selected="selected">Day</option>
            <option value="month">Month</option>
            <option value="year">Year</option>
            <!-- <option value="FL">Florida</option> -->
            <!-- <option value="CA">California</option> -->
        </div>

    </li>

Should be:

    <!-- datetime past x days/months/years -->
    <li class="gridxFilterPaneFieldWrapper gridxFilterPaneDatetimePastWrapper">
        <div data-dojo-type="dijit.form.NumberTextBox" aria-label="${_valueAriaLabel}" intermediateChanges="true" style="width: 44%; float: left"></div>
        <div class='gridxSpace' style='width: 10%; float: left; height: 1px;'></div>
        <div data-dojo-type="dijit.form.Select" aria-label="${_valueAriaLabel}" style="width: 44%; float: left">
            <span value="day" selected="selected">Day</span>
            <span value="month">Month</span>
            <span value="year">Year</span>
        </div>
    </li>

Notice how I've changed "option" elements to "span" elements? I also removed the old comments that are in there to avoid future confusion.

[blueleader07]

I've proposed the fix here:
#289

[yurychika]

@blueleader07 thanks for the investigation.