When I right click on jquery ui spinner it increments automatically non-stop. Any way to fix this?

341 Views Asked by At

This issue is experienced only in Linux and Mac OS. It seems to be a jQuery spinner bug.

The spinner under the link has the bug too:

https://jqueryui.com/spinner/

<input class="spinner"/>
$(".spinner").spinner("value",1);
2

There are 2 best solutions below

5
reflexgravity On

I fixed this bug adding onfocus attribute to the HTML.

<input class="ui-spinner" onfocus="this.blur()"/>
1
Daniel Beck On

The problem only exists when the user right-clicks on the increment/decrement buttons (the context menu appears to interfere with the mouse events that spinner() expects.)

You can work around this by disabling the context menu for those buttons only:

$('.spinme').spinner();

// disable right-click on the increment/decrement buttons
// You'll need to do this after the spinner is instantiated,
// so the buttons already exist when you bind this event to them.  
// Or use delegated events.
$('#nomenu .ui-spinner-button').bind('contextmenu', function(e) {
  return false;
});
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div>
  Default behavior:<br>
  <input class="spinme">
</div>
<br>
<div id="nomenu">
  Context menu removed:<br>
  <input class="spinme">
</div>