title: Strange interaction between slider (input range) and combo box (select) when syncing them with jQuery and using up/down arrow keys
body: <p>I am working on a project where I needed to sync a slider value with a combo box value.  The code seemed to works.  But I observed something odd when I tried the two controls on Firefox.  I would move the slider and in the process, gain focus on the combobox.  Then I would use the up/down arrow keys on my keyboard and the selected item would move up/down as I'd expect.  But when I moved the slider a second time and repeated the use of the up/down arrow keys, the item selected by the slider was ignored in favor of the item previously selected by the keys.  I tried this on the current versions of all 5 major browsers and found this behavior on Firefox only.  So I removed as much extraneous code as possible to try to rule out an error on my part. <a href="https://jsfiddle.net/crislawrence/84sfunLh/1/" rel="nofollow noreferrer">JSFiddle here</a>.</p>
  
  <p>I reported the bug to Mozilla, thinking that I had identified a Firefox issue.  But the response I got back was that the problem I observed disappears when using plain old javascript.  I am using jQuery 3.3.1.  I tried plain old javascript and did see the problem vanish.  I also tried several earlier flavors (v2 and v1) of jQuery and got the above noted behavior every time.  I guess before I try reporting this issue to jQuery, I thought I might ask whether my existing code looks sound as javascript in general is not my strong suit. I am also wondering whether there is any way I can make this synchronization work without abandoning jQuery, which I do need for other purposes.</p>
  
  <p>Here is the code below.  Note that while this code uses the range input as the slider, my initial code actually uses a jQuery UI slider.  It was with that widget that I first noticed the problem.  I reverted to the range input to eliminate jQuery UI as a possible culprit.</p>
  
  <p>Assuming my code is sound and that there is a bug (jQuery or Firefox) can anyone suggest a possible workaround to avoid the behavior I am reporting?  Any and all advice is most welcome and appreciated.</p>
  
  <p>Thanks, Cris</p>
  
  <pre><code>    &lt;script&gt;
  
      $(document).ready(function () {
  
          $("#coarse_slider").change(function() {
              $('#row_selector').val(this.value).trigger("focus");
          });
  
          $('#row_selector').change(function () {
              $("#coarse_slider").val(this.value);
          });
  
          $('#row_selector').val(8).trigger("change").trigger("focus");
  
      });
  
  &lt;/script&gt;
  
  &lt;div&gt;
      &lt;input id="coarse_slider" type="range" value="5" step="1" max="19" min="0" /&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;select size="20" name="row_selector" id="row_selector"&gt;
          &lt;option value="1"&gt;A&lt;/option&gt;
          &lt;option value="2"&gt;B&lt;/option&gt;
          &lt;option value="3"&gt;C&lt;/option&gt;
          &lt;option value="4"&gt;D&lt;/option&gt;
          &lt;option value="5"&gt;E&lt;/option&gt;
          &lt;option value="6"&gt;F&lt;/option&gt;
          &lt;option value="7"&gt;G&lt;/option&gt;
          &lt;option value="8"&gt;H&lt;/option&gt;
          &lt;option value="9"&gt;I&lt;/option&gt;
          &lt;option value="10"&gt;J&lt;/option&gt;
          &lt;option value="11"&gt;K&lt;/option&gt;
          &lt;option value="12"&gt;L&lt;/option&gt;
          &lt;option value="13"&gt;M&lt;/option&gt;
          &lt;option value="14"&gt;N&lt;/option&gt;
          &lt;option value="15"&gt;O&lt;/option&gt;
          &lt;option value="16"&gt;P&lt;/option&gt;
          &lt;option value="17"&gt;Q&lt;/option&gt;
          &lt;option value="18"&gt;R&lt;/option&gt;
          &lt;option value="19"&gt;S&lt;/option&gt;
          &lt;option value="20"&gt;T&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>