combobo inside a jquery UI dialog closes when scrollbar is clicked

[pmcquay]

index.zip

Attached is a small reproduction of the issue I am having, the Combobo combobox works excellently, however when it is placed within a jquery dialog, the combobox closes and loses focus when the scrollbar is clicked.

Any help would be appreciated.

[schne324]

Thanks for attaching the example of the issue. It looks like you've found an actual bug (and I can't think of a good temporary work-around) but I imagine the fix for this should be pretty easy. I'll let you know when this gets fixed.

[pmcquay]

Awesome! Looking forward to it, anything else I can do to help, let me know!

[schne324]

Looks like I was wrong. This isn't a bug in combobo but rather a side-effect caused by jQuery UI dialog. I checked the API docs for the dialog widget I didn't have time to test it out myself but _allowInteraction option (http://api.jqueryui.com/dialog/#method-_allowInteraction) seems promising.

Like you've already pointed out its caused by the input losing focus. If you check the demo this doesn't happen.

[pmcquay]

I have looked at the demo, and also confirmed that the reason this happens is something to do with jquery dialogs.

I have looked at the _allowInteraction function, and even if I just return true from it (allow interaction all of the time) it still exhibits this behaviour.

Also, the _allowInteraction hook appears to only be used to allow interactions with elements that are outside the dialog in the DOM, but are positioned over the dialog using absolute positioning. To my knowledge, Combobo does not do this, instead using the actual elements that it is supplied (a much better way to go IMO)

I also tried completely disabling jQueryUI's focustabbable function (the function that autofocuses things in dialogs) thinking that it could be the issue. No resolution there.

[pmcquay]

I can get the issue to go away by changing the blur handler in combobo to not do anything:

  this.input.addEventListener('blur', function () {
    //if (!_this2.isHovering) {
    //  _this2.closeList();
    //}
  });

This feels wrong to me however, and seems like a pretty hacky solution. It also might affect other things.

[pmcquay]

yeah this breaks tabbing off of the input. So for some reason, when its in a JQ dialog, blur is being triggered when I click on the scrollbar. Seems like a lot of other people have similar issues as well if you google "blur scrollbar"

[pmcquay]

the answer to this question seems interesting: https://stackoverflow.com/questions/21708138/dropdown-plugin-closing-on-scroll-bar-click

[pmcquay]

ahh, it gets more interesting, I can now repro this without having jquery ui in the page at all. It happens because the dialog has tabindex -1 on it.

index-nojqueryui.zip

[schne324]

interesting...I guess you could have a workaround that removes tabIndex when the input receives focus and add it back whenever the input is blurred

[pmcquay]

that does sound like it could work, I'm just hesitant to go that way because it could have unintended effects on our users, especially the ones for whom we are investigating changing this control (users who have to use a screenreader)

Is there anything else you could suggest? It almost seems like this is a bug in the browser to be honest. Triggering the blur event on an input when the scrollbar of an overflow:scroll div is clicked within an element that has tabindex="-1" seems awfully convoluted.

[schne324]

It does seem a little funky that browsers do that but I think it is intentional. When you click anything, the nearest parent that is focusable will receive focus (that way when you click a span inside of a button, the button receives focus, for example). You're probably right though, browsers should NOT include scrollbars in that logic.

Theres not much (other than complete hacks) Combobo can do about this though which is a bummer.

[schne324]

I'm going to close this because it doesn't appear to be an issue caused by Combobo. As @pmcquay stated it seems like this is a bug in the browser.

If anyone comes up with a solution to this that isn't hacky, I welcome a PR!