javascriptjquery-uijquery-ui-selectmenu

Jquery UI selectmenu keycodes 115/116 preventing?


https://jqueryui.com/selectmenu/ have very unusual event reaction on keycode 115 (F4). When u expand the list and click on F4 button, some and some+1 option selected for a change. In example from link - first and second option, but in my app 20 and 21 node of list :O.

Is a bug? It is possible to prevent this?

In my app i found second strange reaction on keycode 116 (F5). When u expand the list and click on F5 button, some option is selected before reload a page. In my app it'ss 10. Is not cool for me because i get some project to work. This project has event which send ajax request to save data in session on change selected option, but after click F5 app send ajax request before reload a page which change some attribute in session on 10 because as i said when u click F5 selectmenu change selected node on 10.

Example: https://jqueryui.com/selectmenu/ Click on selectmenu with title "Select a speed" and click F4

Its is possible to prevent this events?


Solution

  • You might change the selectmenu prototype like this (see and run the code snippet below):

    $(function() {
    
      var ok = $.ui.selectmenu.prototype._buttonEvents.keydown;
      $.ui.selectmenu.prototype._buttonEvents.keydown = function(e) {
        if (e.keyCode == 115 || e.keyCode == 116) e.stopPropagation();
        ok.call(this, e);
      }
    
      var a = $("#speed").selectmenu();
    
    });
    label {
      display: block;
    }
    
    select {
      width: 200px;
    }
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.12.4.js"></script>
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    
    <label for="speed">Select a speed:</label>
    <select name="speed" id="speed">
      <option value="Slower">Slower</option>
      <option value="Slow">Slow</option>
      <option value="Medium" selected>Medium</option>
      <option value="Fast">Fast</option>
      <option value="Faster">Faster</option>
    </select>