Fluentui: ComboBox: suggestedDisplayValue property of comboBoxState is not getting reset on clearing selectedKeys

[pandey11]

Actual behavior:

I'm trying this code where formValidator.form.profile.value is a state and getting reset on click of a button.

Current Issue. When i'm trying to select value of comboBox using key board it is setting suggestedDisplayValue. But even if i'm clearing selectedKey to null it is not resetting suggestedDisplayValue and in turn text getting displayed in comboBox
<ComboBox label="profile?" onChange={onComboBoxChange} options={profiles} required selectedKey={formValidator.form.profile.value} />

Expected behavior:

It should clearComboBox if selectedKey gets reset

Priorities and help requested:

Requested priority: (Blocking, High, Normal, Low) High

Products/sites affected: Yes

[marygans]

Hi @pandey11! Thanks for reporting this. Could you provide a codepen example of this issue you are having? You can start by clicking the "export to codepen" button on this combobox example.

[pandey11]

Hi @marygans, I have shared the recording of repro steps over email. Please let me know if needed more info.

[pandey11]

@ecraig12345 @marygans any update on this ??

[marygans]

Hi @pandey11 my apologies on the delay here! I was able to view the video and was not able to repro the bug you see on the ms referral site locally. I will share the video repro with my colleagues and get back to you shortly!

[micahgodbolt]

I put together a quick codepen and trying to simulate your issue, but so far no luck:

https://codepen.io/micahgodbolt/pen/aeEdEo?editors=0011

While i see there is a suggestedDisplayValue

As soon as I select an option via keyboard, that state is removed. Can you fork this Pen and try to repro your isse?

[pandey11]

Hi @micahgodbolt please try this https://codepen.io/anon/pen/XvVaNo?editors=0011
onClick={() => { if (_basicComboBox.current) { setKey(null); // _basicComboBox.current.focus(true); }
defining callback function inline somehow re-render the and component and cause performance issue.

[pandey11]

Repro step:

1. expand combo box.
2. press d key of keyboard, this will auto select d. please don't select d using mouse.
3. move you cursor outside of options pen so that combo box collapse.
4. Now hit reset combo box and check console
   please let me know if any other info needed we can syncup over teams as well

[micahgodbolt]

Ok I see. Repro is even easier. If you open the dropdown and then close it by clicking outside of the dropdown, setting the 'selectedKey' to null does not change the value.

[pandey11]

This is creating illusion to user that required field is provided but application blocks user to proceed.it's a high severity issue for our application

[micahgodbolt]

@pandey11 our shield devs are balancing a number of incoming issues. We'll take a look into as soon as we can. As an open source project, if you are able to find the offending logic (probably in the onDismiss callback) and create a PR, we'd be happy to review and get it merged ASAP

[msft-github-bot]

:tada:This issue was addressed in #10102, which has now been successfully released as [email protected].:tada:

Handy links:

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

[pandey11]

@marygans @micahgodbolt i think the latest version is not working properly, can you please try with combobox which have key as string type,it's working with options having key as integer

[marygans]

@marygans @micahgodbolt i think the latest version is not working properly, can you please try with combobox which have key as string type,it's working with options having key as integer

Hi @pandey11, I just tested again and it is working fine for me, can you provide your example?

[micahgodbolt]

I'll reopen again until we can determine if there's still an issue here.

[jspurlin]

@marygans Did the previous fix not fix this issue? If not, is there active work on this?

[marygans]

Hi @pandey11 Below is what I see when I repro'd with strings. Can you share a bit more of your scenario via codepen or similar?

See below

_(React state in DOM now updates here)_

Thanks!

[pandey11]

@marygans Can we sync up over team, sometime tomorrow(Redmond time will also work).I am able to repro this in my application but struggling to repro it with codepen.

[marygans]

@pandey11, yeah sure. I will set up some time!

[marygans]

Closing this issue as I spoke with @pandey11 offline a few weeks regarding the issue in product application vs this repo. Feel free to re-open for any further questions