Clicking scrollbar in dropdown box closes dropdown

[tiguchi]

Clicking the scrollbar in the dropdown box immediately closes the dropdown, so the only options for navigating through the list is by using the mouse wheel or the up / down keys.

[gjsjohnmurray]

Which version are you using? I created a fiddle at https://jsfiddle.net/gjsjohnmurray/p17y09f9/ and wasn't able to reproduce what you reported.

[tiguchi]

I'm using the latest version: 1.1.26

I forked your JSFiddle and added the scombobox configuration options I am using on the website I'm working on. I can reproduce the same problem using Google Chrome Version 46.0.2490.86 (64-bit):

https://jsfiddle.net/nobugames/o17Le9je/1/

[gjsjohnmurray]

When I run your fiddle with my Chrome (47.0.2526.106 m) on 64-bit Windows 8.1 Pro, I click the dropdown button and the list appears. I can click the scrollbar's down-arrow, or click in the scroll-column below the scroll-marker. The list remains open and the contents scroll as expected.

It also works this way for me on Firefox (44.0b1) and on IE (11.0.26)

[tiguchi]

That's strange. I develop mainly on a Linux system (OpenSuse 13.2 KDE) and this is where I'm having this problem. I just tested my fiddle on the latest version of Google Chrome for Mac OS X and cannot reproduce it there. The dropdown stays open as expected.

It's also good to know that the problem does not occur on a Windows system. Thanks for testing that. I'm not sure if it's worth investigating any further, since it could be just some obscure problem with KDE.

A possible workaround I could think of is letting the plugin only close the dropdown when an item (paragraph element) has been clicked (or selected with enter key) or when the input field loses focus.

I created a video demonstrating the problem: https://drive.google.com/file/d/0B_gSlXOo3tt_Z05BcllteGFfRlk/view?usp=sharing

[gjsjohnmurray]

The logic for closing the dropdown is mainly in lines 765-800 of jquery.scombobox.js (line numbers referring to 3f19c5f). On blur from the input field we have to try and work out whether focus is being lost to another element that's a component of the same scombobox, or to elsewhere. Possibly the 200ms timer is expiring before an event from the component manages to cancel it. Or perhaps Chrome on your environment behaves like IE apparently does when clicking onto the scroller parts of the div that displays the dropped-down list. The comments at 770-772 say that such an action on IE gives us a blur but no suitable subsequent event from which to deduce that the blur wasn't away from the scombobox.

[dalvim]

Having this problem on windows 10 x64 with IE11. It seems that the problem is on the onBlur event as stated. Has anyone found a way to fix it?

[wdbsb]

I know this is a little old, but if people are still having problems with this, clearing the timeout on mouse up and the capture of the scroll event seemed to solve the problem for me:

   this.on('mouseup', cp + clist , function(e) { clearTimeout(blurTimer); e.stopPropagation();}); 

   document.addEventListener('scroll', function (event) {  // can't use 'on' because scroll does not bubble 
          if ($(event.target).hasClass(pname+clist)) {
            clearTimeout(blurTimer); event.stopPropagation();
          }
        }, true /*Capture event (not bubble) */);

@gjsjohnmurraywould you consider including something this in the plugin?

[gjsjohnmurray]

@wdbsb are you able to reproduce the problem with either of the fiddles above? If so, what browser version and platform? If not, can you create a fiddle to demonstrate the issue?

[wdbsb]

@gjsjohnmurray Thanks for the reply. I haven't managed to reproduce it in a simple case. What I have noticed is that for some reason in my situation clicking or scrolling the scrollbar on the div in the scombobox causes a blur event on the scombobox's input control ("scombobox-display"). That does not happen in the simple examples.

Apparently the blur event (or lack of it) due to scrolling a div is a common problem. Googling "scrollbar triggers blur" comes up with many other select replacements in JS libraries!

I'll get back to you when I have a better answer.

[wdbsb]

@gjsjohnmurray OK, I've partially figured it out. It has to do with putting the scombobox in a jQuery UI dialog box. The code below shows the problem in the current versions of Firefox and Chrome but works fine in IE11. Unfortunately, it also does not show the problem if I put it in a fiddle.

Have you heard of anyone else having bad interactions with jQuery UI dialogs and scombobox?

<html>
  <head>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>        
    <script type="text/javascript" src="https://cdn.rawgit.com/ivkremer/jquery-simple-combobox/master/js/jquery.scombobox.js"></script>
    <link href="https://cdn.rawgit.com/ivkremer/jquery-simple-combobox/master/css/jquery.scombobox.min.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" media="screen" />
    <style>
      #combo { height: 30px; }
    </style>
    <script>
      $(document).ready( function () {
        $('#combo').scombobox({maxHeight: "90px" });
        $("#dlg").dialog({
                modal:true, 
                autoOpen: true,
                height:300, 
                width:314, 
                title:"Test"
              });      
      });
    </script>
    <title>test</title>
  </head>
  <body>
    <div id="dlg">
      <form>
         <div>Make sure list's scrollbar works</div><hr/>
         <select id="combo">
           <option value="1">One</option>
           <option value="2">Two</option>
           <option value="3">Three</option>
           <option value="4">Four</option>
           <option value="5">Five</option>
           <option value="6">Six</option>
           <option value="7">Seven</option>
           <option value="8">Eight</option>
           <option value="9">Nine</option>
           <option value="10">Ten</option>
           <option value="11">Eleven</option>
           <option value="12">Twelve</option>
           <option value="13">Thirteen</option>
           <option value="14">Fourteen</option>
           <option value="15">Fifteen</option>
           <option value="16">Sixteen</option>
           <option value="17">Seventeen</option>
         </select>
      </form>
    </div>  <!-- dlg -->  
  </body>
</html>

[gjsjohnmurray]

@wdbsb your example let me recreate the issue on Chrome 60 and FF 55. It also happens on my MS Edge, but works as you want it to on IE. All testing on Windows 10 (64bit).

My own use of @ivkremer's scombobox isn't in conjunction with a jQuery UI dialog box.