Select-Only Combobox Example - listbox closes when clicking on scrollbar

[LukaszJaro]

The following example https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/

When the select only combo box is open/expanded, and you attempt to click on the scrollbar, it causes the listbox to close preventing the user from scrolling with mouse to see more options.

It looks like this is to do with the blur event handler "this.comboEl.addEventListener('blur', this.onComboBlur.bind(this))". When combobox loses focus, it closes the listbox which is fine in every case except when attempting to scroll by dragging the scroll bar with a mouse.

This "Editable Combobox With List Autocomplete Example" is actually working correctly and allows scrolling with mouse.

[LukaszJaro]

I came up with a fix for this by copying similar functionality from "Editable Combobox With List Autocomplete Example"

Comment out blur event (seems to not be needed as other events handle closing the listbox) + add pointerup event.

// add event listeners
//this.comboEl.addEventListener( 'blur', this.onComboBlur.bind( this ) );
this.comboEl.addEventListener( 'click', this.onComboClick.bind( this ) );
this.comboEl.addEventListener( 'keydown', this.onComboKeyDown.bind( this ) );
// Fix mouse scroll issue.
document.body.addEventListener( 'pointerup', this.onBackgroundPointerUp.bind( this ), true );

Further down in code under the other event functions I added:

Select.prototype.onBackgroundPointerUp = function ( event ) {
	if (
		!this.comboEl.contains( event.target ) &&
		!this.listboxEl.contains( event.target )
	) {
		if ( this.open ) {
			//this.selectOption( this.activeIndex );
			this.updateMenuState( false, false );
		}
	}
}

[css-meeting-bot]

The ARIA Authoring Practices (APG) Task Force just discussed Select-Only Combobox Example - listbox closes when clicking on scrollbar.

The full IRC log of that discussion

<jugglinmike> Subtopic: Select-Only Combobox Example - listbox closes when clicking on scrollbar
<jugglinmike> github: https://github.com//issues/2719
<jugglinmike> Matt_King: Can anyone reproduce the reported behavior? And do they agree that it's a bug?
<jugglinmike> Andrea: I'm happy to look into this one
<jugglinmike> Andrea: I can confirm the reported behavior, and I agree that it's a bug. I'll be taking a closer look at the proposed fix

[andreancardona]

Current working PR in draft: #2723