Select-only Combobox Example: Fix scroll event listener bug

[ariellalgilmore]

Fixes #2719.
Select only scrollbar would close when user would try to click on it.
worked on with @andreancardona 🎉

Preview fixed Select-Only Combobox Example | APG | WAI | W3C

Review checklist

Reviewers: To learn what needs to be covered by each review, Follow the link for the type of review to which you are assigned.

• N/A: Editorial review
• Functional review by @spectranaut
• N/A: Visual design review
• N/A: Accessibility review
• Code review by @spectranaut
• Test review by @spectranaut

---

WAI Preview Link (Last built on Tue, 25 Jul 2023 22:54:47 GMT).

[mcking65]

@ccanash please assign someone to determine why the preview failed to build andacquire a functional preview link.

[howard-e]

@ariellalgilmore @mcking65 this was related to w3c/wai-aria-practices#220 not being merged when #2670 was deployed.

I've re-ran the action and the preview link is now available in the top comment.

[css-meeting-bot]

The ARIA Authoring Practices (APG) Task Force just discussed PR 2723: Select-only Combobox Example: Fix scroll event listener bug by ariellalgilmore.

The full IRC log of that discussion

<jugglinmike> subtopic: PR 2723: Select-only Combobox Example: Fix scroll event listener bug by ariellalgilmore
<jugglinmike> github: https://github.com//pull/2723
<jugglinmike> Matt_King: This is ready for review; did we assign a reviewer last week?
<jugglinmike> andrea_cardona: We asked Valerie to review, and she said that she could
<jugglinmike> Matt_King: It's awesome to see spectranaut back in APG stuff

[spectranaut]

thanks so much for talking this on!! unfortunately... it looks like you turn on "ignoreBlur" permanently for the element, so if you click the scroll bar to scroll, the combobox will no longer close when focus is lost.

To replicate:

1. Open the combobox
2. Click the scrollbar, use it to scroll
3. Click outside the combobox, doesn't close

I'm not totally sure how I would fix this... skipping the blur entirely (except for background clicks, as originally proposed) will also keep the combobox from closing when keyboard focus is moved away.

[andreancardona]

@spectranaut converting to draft while we still look into this!

[css-meeting-bot]

The ARIA Authoring Practices (APG) Task Force just discussed PR 2723: Select-only Combobox Example: Fix scroll event listener bug by ariellalgilmore.

The full IRC log of that discussion

<jugglinmike> subtopic: PR 2723: Select-only Combobox Example: Fix scroll event listener bug by ariellalgilmore
<jugglinmike> github: https://github.com//pull/2723
<jugglinmike> arigilmore: The fixes I've tried are causing either a keyboard issue or a mouse issue, so we've converted it back to draft for now
<jugglinmike> arigilmore: We'll take another try, but we might reach out to the team to see if anyone has other suggestions

[css-meeting-bot]

The ARIA Authoring Practices (APG) Task Force just discussed PR 2723: Select-only Combobox Example: Fix scroll event listener bug by ariellalgilmore.

The full IRC log of that discussion

<jugglinmike> Subtopic: PR 2723: Select-only Combobox Example: Fix scroll event listener bug by ariellalgilmore
<jugglinmike> github: https://github.com//pull/2723
<jugglinmike> arigilmore: I was working on this with Andrea, and when we tried the suggested solution, it didn't work for mouse, and our solution didn't work for keyboard
<jugglinmike> arigilmore: We were having trouble getting the "blur" effect
<jugglinmike> arigilmore: The original issue was: when someone would click on the scrollbar in the combobox, it would immediately close the combobox.
<jugglinmike> arigilmore: By fixing that, we were having trouble getting keyboard navigation to work AND mouse navigation to work when navigating in the combobox.
<jugglinmike> arigilmore: Now, you can click on the scroll bar, and it will scroll without closing. But after that, if you click outside the combobox, it doesn't close.
<jugglinmike> arigilmore: Though it does close when you tab away. It's just a problem for the case where you've clicked on the scrollbar
<jugglinmike> arigilmore: This doesn't appear to be a browser bug because the interaction works as expected on the other examples (even though those examples look quite different)
<jugglinmike> arigilmore: I don't currently understand why the other comboboxes work while this one particular combobox does not
<jugglinmike> Matt_King: Sarah wrote the original code here; they might be able to help
<jugglinmike> arigilmore: I'll reach out to them

[smhigley]

Made a quick codepen demo-ing a fix: https://codepen.io/smhigley/pen/QWJVPWp/f733695118b87fa51dee32b52e5d6614

The approach is to not close the popup if focus moves to the listbox on blur (using event.relatedTarget), and to add a focusout listener to the listbox so that it will also close when the listbox is blurred.

This also means the ignoreBlur logic can be removed entirely, so it seems like a nice fix

[ariellalgilmore]

@spectranaut updated!! Thank you @smhigley for the fix suggestions!

[spectranaut]

Looks great! Sorry I missed this update :)

[mcking65]

thank you @ariellalgilmore, @andreancardona, @smhigley, and @spectranaut!!!