How to allow a user to clear the value of an editable ComboBox?

user_5723259 0
Viewed 362

I'm looking for a way to allow users to enter an empty string, or clear the value of an editable ComboBox in my UWP app. Seems simple enough, but I have not had any luck so far.

Here is the simplest code to reproduce the problem. Place the following control in your test application:

<ComboBox IsEditable="True">
  <ComboBoxItem>Item 1</ComboBoxItem>
</ComboBox>
  1. Load the view with the ComboBox. Note that the Text is blank.
  2. Select "Item 1" from the ComboBox.
  3. Delete the text in the ComboBox field.
  4. Press Enter, or take focus from the ComboBox.

Expected: The ComboBox would accept an empty string and leave the text cleared.
Actual: The text reverts to the previously selected item's text.

Additional notes:

  1. SDK version is 17763 (1809). Upgrading SDK versions is not an option in this particular app at this time.
  2. Any non-empty value can be entered, but empty strings cannot.
  3. I have tried looking for properties that allow empty strings, events I can subscribe to to customize behavior, or methods to override without success.

Any thoughts on how to make this work?

uwp xaml c#
2 Answers

CharacterReceived seems to work for empty value submissions (as opposed to TextSubmitted). the following code will whittle out when the user clears the contents:

private void ComboBox_CharacterReceived(UIElement sender, CharacterReceivedRoutedEventArgs args)
{
    if (sender is ComboBox cb)
    {
        Debug.WriteLine($"Char Received: {args.Character}");

        if (args.Character == 8 && string.IsNullOrEmpty(cb.Text))
        {
            Debug.WriteLine("ComboBox Cleared");
        }
    }
}

enter image description here

With that confirmed, we can take it a step further and do some work on the item itself and clear the value.

Solution

Here's my proof of concept example that achieves your requested goal. First start with the ComboBox in the following state (skips the need to select Item 1):

<ComboBox IsEditable="True" 
          CharacterReceived="ComboBox_CharacterReceived" 
          VerticalAlignment="Center"
          HorizontalAlignment="Center"
          SelectedIndex="0"
          Width="200">
    <ComboBoxItem>Item 1</ComboBoxItem>
    <ComboBoxItem>Item 2</ComboBoxItem>
</ComboBox>

The event handler (comments inline):

private void ComboBox_CharacterReceived(UIElement sender, CharacterReceivedRoutedEventArgs args)
{
    if (sender is ComboBox cb)
    {
        Debug.WriteLine($"Char Received: {args.Character}");

        // If the ComboBox was cleared
        if (string.IsNullOrEmpty(cb.Text))
        {
            Debug.WriteLine("ComboBox Cleared");

            // Get a reference to the currently editing item (aka "Item 1"
            var item = cb.Items?.FirstOrDefault();

            // Cast it safely with pattern match
            if(item is ComboBoxItem currentItem)
            {
                // TAKEAWAY - Clear the content of the item with an empty string
                currentItem.Content = "";

                // Unselect the item
                cb.SelectedIndex = -1;
            }
        }
    }
}

Watch animated GIF of the result at runtime and here's a screenshot

Final Result

I hope this helps!

user_14062100

My Approach:

<ComboBox
Name="combx"
KeyUp="PreviewKeyUp"
IsEditable="True"/>

private void PreviewKeyUp(object sender, Windows.UI.Xaml.Input.KeyRoutedEventArgs e)
{
    if (string.IsNullOrEmpty(combx.Text)) combx.SelectedIndex = -1;

}
user_172333140
Related