ComboBox: when clicking on scrollbar do not call onBlur

[Vitalius1]

Pull request checklist

• Addresses an existing issue: Fixes ComboBox invokes onBlur handler unexpectedly when the user clicks the scroll bar of the dropdown menu #6392
• Include a change request file using $ npm run change

Description of changes

Adds additional logic to stop the onBlur handler to be invoked when clicking on the scrollbar of the Callout holding the ComboBox items

Microsoft Reviewers: Open in CodeFlow

[cliffkoh]

LGTM. It would be great to add a unit test.

[chang47]

Looks good!

Only one question, has this problem always existed? Or is this something new that was regressed by something else?

[Vitalius1]

@chang47 It looks like it always existed... but nobody ever checked the clicking on the scrollbar of the Callout holding the list menu.

[chang47]

Good to know. Thank you!

[KevinTCoughlin]

A test would be great, but need not block this PR. Perhaps follow-up with one if you have the time or create an issue so we remember.

Solution LGTM, can't think of a way to do it without traversing the parent nodes until first match so 👍

[msft-github-bot]

🎉[email protected] has been released which incorporates this pull request.:tada:

Handy Links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site

[stanleyymsft]

@Vitalius1 , the fix now can prevent onBlur event handler from being invoked when the user clicks on the scroll bar. However, after the user drag the scroll bar to the right position and move the mouse cursor to the option to click and select it, the moment the cursor moves off the scroll bar, the onBlur handler is invoked. At that moment the mouse cursor is on one of the options, so it is technically not an blur gesture. As a result the selection menu will disappear, so the user can't click and select the intended option. I think this is still a little bug left here.

[Vitalius1]

@stanleyymsft I am trying to repro the issue you described when running locally and I don't see the behavior you mentioned. I am able to click on the scrollbar's thumb, on the scrollbar and I can drag the thumb with the mouse and then move the mouse over the items list and select.

I do see the onBlur being invoked though... So maybe you are right there is still something going on there that needs a fix.

Edit: I assume you control the visibility of the list with the onBlur callback and this is why the menu disappears. I will reopen the issue and pass it to the next Shield engineer on duty.

[dzearing]

@stanleyymsft did you debug in there to understand the bug? Can you provide as much information as possible? Do you see an obvious fix? @jspurlin wrote the ComboBox so if you need more background you can ask him. :)

[stanleyymsft]

@dzearing I tested again today. The issue no longer repro and the the scroll worked well when clicking on it or moving from it to options. Thanks!