Fluentui: Dropdown onChange firing on focus (when component is inside a Dialog)

[Taerarenai]

Environment Information

• __Package version(s)__: 6.164.8
• __Browser and OS versions__: Chrome & Latest version

Please provide a reproduction of the bug in a codepen:

https://codepen.io/esgdante/pen/ROpMMj

Actual behavior:

The issue first showed up in a previous version of Fabric UI. I have a form inside my modal and the first field in my form is a Dropdown. If the dialog is set as isBlocking: true you can see that clicking outside of the modal focuses the first element. In my App this triggers the onChange of the dropdown. I wasn't able to repro that issue on codepen, but it is something similar.

In the codepen above you can see that whenever you open the modal the Dropdown onChange will fire (which in my app kind of breaks the form functionality as it resets the selected option). Check the pen console to see the behaviour (i console logged the onChange event).

Expected behavior:

Focusing the element is fine, however, triggering the onChange event on a programatic focus is kind of breaking.

Priorities and help requested:

Are you willing to submit a PR to fix? No. (I would if i had enough experience to submit a quality PR)

Requested priority: Blocking/High

Products/sites affected: Internal MS App.

Let me know if you need more info.
Thanks.

[joschect]

@Taerarenai Thanks for submitting this issue and including a codepen! That's an interesting bug that does seem like unexpected behavior. We'll investigate but this seems like a bug.

[nguyenquyhy]

I have this same issue when adding a Dropdown inside a Dialog. My current workaround would be to add if (e.type !== 'focus') in the onChange handler before executing any logic.

[wzc19920413]

Any update on this? Seems this bug still exists in the latest version.

[joschect]

@wzc19920413 We took a look into this and it was added for accessibility reasons. This is actually a duplicate of this issue. In the short term you could have something else focused when your modal is opened so it doesn't change on open, but whenever the dropdown gets focused, it will call on change.

[nguyenquyhy]

In my opinion, it is weird to say that onChange triggers when nothing is changed is not a bug. It is even weirder when accessibility is put out as the reason. Would you mind explain more so that we would know what to expect in the future.

Moreover, if this is for accessibility, would forcing focus on another item defeats the purpose of having accessibility and would force dev to do the wrong thing?

Finally, if this is really because of accessibility and there is no plan to remove this bug (I am sorry but this is a bug), will this bug be added to other control in the future as well? If so, can we at least get a parameter to know that the event is triggered due to accessibility reason instead of an actual change.

[msft-github-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fabric React!

[nguyenquyhy]

So Microsoft would just ignore this bug?

[joschect]

@nguyenquyhy If you look at the bug I linked it goes into pretty good detail about why things are done this way. Here's a good response from @cliffkoh that goes into it a bit. There are plans to rewrite dropdown in the future which may get around this.

[nguyenquyhy]

Many thanks for the response! I'll follow the other issue then.

[msft-github-bot]

Because this issue is marked as a duplicate and has not had activity for over 4 days, we're closing this issue for house-keeping purposes. Please refer to the issue that this issue was duplicated to for the purposes of tracking progress. Thank you.