Combobox: how can the user clear/reset a selection

[petercutting]

A user can select an option in a combobox, but there seems to be no obvious way to clear/reset a previous selection

Here are some possibilities for how the component could support this requirement:

• keyboard, eg DEL and/or BackSpace
• reset option at top of dropdown list
• small docked button.

Why is there no support in the component? Why is there nothing in the documentation to atleast mention that there is no support and maybe what options the progammer has to workaround 👎

workarounds seem to be

• handling keyboard events - advanced
• manually add reset option to the list and handle it
• allowFreeform configuration - suboptimal if you dont want user typing in field

What am I missing?

Peter

[KevinTCoughlin]

@petercutting would you be able to extend the component in a way similar to this Codepen to unblock yourself since there isn't currently a first class reset method on ComboBox?

[petercutting]

looks like I was unclear. I dont want to empty the dropdown options list. I want the user to be able to clear (regret) a previous selection

[msft-github-bot]

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

[cliffkoh]

@JasonGore @KevinTCoughlin @micahgodbolt is this still correctly tagged as a question? Or is it related to #5929 as a verified ComboBox bug?

[micahgodbolt]

Looks like the request is to be able to remove freeform additions

Would be nice to have an 'x' next to that, at least on focus/hover, to be able to remove it

[micahgodbolt]

@betrue-final-final have you seen any examples of dropdown lists where you can remove items from them? In this case we'd want to be able to remove options that we added.

[betrue-final-final]

I'm sure I have somewhere, but would need to look to find them. I would suspect that yes an "x" on the right would appear on focus or hover. Of course this will complicate the keyboarding slightly, but a right arrow could expose the delete, and using the delete key should also work.

[micahgodbolt]

having the X would help indicate it could be deleted as well

[betrue-final-final]

I would only expose it on hover or focus.

[betrue-final-final]

Wait, this isn't about removing an option, but just deselection. Here's the original text: "A user can select an option in a combobox, but there seems to be no obvious way to clear/reset a previous selection."

In most cases, they are selecting another option. I think in this case, he wants to zero out the dropdown back to no selection at all. One way that VSO does that is to have a clear option at bottom. That seems much for a default though. I'm not sure if this is a problem that needs solving though.

[micahgodbolt]

yeah, sorry. This is about removing the contents of the combobox without having to hit backspace a dozen times, or selecting all of the text.

Since the label is editable, we don't make backspace remove the entire entry (like a picker would). An X on the far side would work well, similar to searchbox.

[micahgodbolt]

@jspurlin what's your thought on making an 'clearAll' button show on the far side (make it optional, under a flag)

[betrue-final-final]

We were just talking about this. Yeah, I wouldn't expose this normally as it's not something dropdowns have ever really done and it's kind of a niche. THe other way is to have an additional menu item to "Clear selection". VSTS does this in their filters. That way you won't think it's search.

[micahgodbolt]

oh that's a decent idea. should that be baked in, or just mention it as a good UI practice if necessary.

[jspurlin]

Yeah, I agree either add an option to clear the value or someone could create a button next to the combobox (really anywhere they want) which clears the value (via sending in new props to clear it). This is something that I feel should be handled on a case by case basis and not be baked in to the component

[micahgodbolt]

Okay, so the resolution is: Best practice is to simply have an option in the dropdown, or button next to the combobox with an onClick that sets the combobox 'text' to an empty string.

[jspurlin]

Yep, sounds good to me. If you want the "clear" functionality, that should be the best practice to achieve it

[msft-github-bot]

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

[petercutting]

Keyboard access hasnt been mentioned. So I just suggest that resetting the selection should be possible using just the keyboard (ie not mouse)

[micahgodbolt]

a 'clear' button next to the combobox is a tab away, just like a button placed inside of the combobox. onClick could even return focus to the comobobox if you wanted to.

[msft-github-bot]

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