when I click on a long list custom select a new window with possible options is displayed, at this point I have two possible actions: close the window in which case it works fine returning to the previous window without losing focus but when I select a option this returns to the previous window losing focus.
In previous versions 1.0.1 works fine.
but in 1.4.5 it does not.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div class="ui-field-contain">
<label for="select-custom-20">Long list:</label>
<select name="select-custom-20" id="select-custom-20" data-native-menu="false">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>On the official website of jquery mobile are the examples:
1.4.5 do not Working https://demos.jquerymobile.com/1.4.5/selectmenu-custom/
1.0.1 Working fine!! https://demos.jquerymobile.com/1.0.1/docs/forms/selects/custom.html
Any suggestions on how to correct this in version 1.4.5?
When you put inside a custom-select a very long list of items, JQM will create a new page with data-role = "dialog". Without page transition, the focus will be restored in time, but if You like to show a smooth page transition also for the custom-select dialogs, You need to increase the delay for that button focus.
You can monkey-patch JQM and check for the dialog-page and transition.
Here is an example:
$(document).on('mobileinit', function () {
$.widget( "mobile.selectmenu", $.mobile.selectmenu, {
_focusButton : function() {
var self = this;
if(self.menuType == "page" && $.mobile.defaultDialogTransition != "none") {
setTimeout( function() {
self.button.focus();
}, 200); // increased delay
} else {
setTimeout( function() {
self.button.focus();
}, 40); // default delay
}
}
});
});
hashListeningEnabled = false because all links are handled internally and there won't be any window.history manipulation.