(editable) ComboBox: Moved ToggleButton down in Z-Order (#2789)

* Moved ToggleButton down in Z-Order

This allows the editable TextBox to capture mouse interactions and grab focus without opening the drop down.

* Removed whitespace - to force new PR check

Author: nicolaihenriksen

MainDemo.Wpf/ComboBoxes.xaml

@@ -275,7 +275,8 @@
                 HorizontalAlignment="Left">
                 <ComboBox
                     Style="{StaticResource MaterialDesignFilledComboBox}"
-                    materialDesign:HintAssist.Hint="Validation test"
+                    materialDesign:HintAssist.Hint="Validation test (editable)"
+                    IsEditable="True"
                     ItemsSource="{Binding ShortStringList}"
                     materialDesign:TextFieldAssist.HasClearButton="True"
                     Width="256">

MaterialDesignThemes.UITests/WPF/ComboBoxes/ComboBoxTests.cs

@@ -127,4 +127,49 @@ async Task AssertMenu(string menuHeader)
             Assert.True(menuItem is not null, $"{menuHeader} menu item not found");
         }
     }
-}
+
+    [Fact]
+    [Description("Issue 2713")]
+    public async Task OnEditableComboBox_ClickInTextArea_FocusesTextBox()
+    {
+        await using var recorder = new TestRecorder(App);
+
+        var stackPanel = await LoadXaml<StackPanel>(@"
+<StackPanel Orientation=""Horizontal"">
+    <ComboBox x:Name=""EditableComboBox"" IsEditable=""True"" Style=""{StaticResource MaterialDesignComboBox}"">
+        <ComboBoxItem>Select1</ComboBoxItem>
+        <ComboBoxItem>Select2</ComboBoxItem>
+        <ComboBoxItem IsSelected=""True"">Select3</ComboBoxItem>
+        <ComboBoxItem>Select4</ComboBoxItem>
+        <ComboBoxItem>Select5</ComboBoxItem>
+    </ComboBox>
+    <Button x:Name=""Button"" />
+</StackPanel>");
+
+        var comboBox = await stackPanel.GetElement<ComboBox>("EditableComboBox");
+        var editableTextBox = await comboBox.GetElement<TextBox>("PART_EditableTextBox");
+        var button = await stackPanel.GetElement<Button>("Button");
+
+        // Open the combobox initially
+        await comboBox.LeftClick(Position.RightCenter);
+        await Task.Delay(50);   // Allow a little time for the drop-down to open (and property to change)
+        bool wasOpenAfterClickOnToggleButton = await comboBox.GetIsDropDownOpen();
+
+        // Focus (i.e. click) another element
+        await button.LeftClick();
+
+        // Click the editable TextBox of the ComboBox
+        await editableTextBox.LeftClick();
+        await Task.Delay(50);   // Allow a little time for the drop-down to open (and property to change)
+        bool wasOpenAfterClickOnEditableTextBox = await comboBox.GetIsDropDownOpen();
+        bool textBoxHasFocus = await editableTextBox.GetIsFocused();
+        bool textBoxHasKeyboardFocus = await editableTextBox.GetIsKeyboardFocused();
+
+        Assert.True(wasOpenAfterClickOnToggleButton, "ComboBox should have opened drop down when clicking the toggle button");
+        Assert.False(wasOpenAfterClickOnEditableTextBox, "ComboBox should not have opened drop down when clicking the editable TextBox");
+        Assert.True(textBoxHasFocus, "Editable TextBox should have focus");
+        Assert.True(textBoxHasKeyboardFocus, "Editable TextBox should have keyboard focus");
+
+        recorder.Success();
+    }
+}

MaterialDesignThemes.Wpf/Themes/MaterialDesignTheme.ComboBox.xaml

@@ -325,6 +325,14 @@
                                 Width="0"
                                 MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" />
                         </Grid.ColumnDefinitions>
+                        <ToggleButton
+                            x:Name="toggleButton"
+                            Grid.ColumnSpan="2"
+                            IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
+                            Style="{StaticResource MaterialDesignComboBoxToggleButton}"
+                            BorderBrush="{TemplateBinding BorderBrush}"
+                            Padding="{TemplateBinding Padding}"
+                            Margin="{Binding ElementName=InnerRoot, Path=Margin}" />
                         <Border
                             Grid.Column="0"
                             Grid.Row="0"
@@ -489,13 +497,6 @@
                         </ScrollViewer>
                     </ContentControl>
                 </wpf:ComboBoxPopup>
-                <ToggleButton
-                    x:Name="toggleButton"
-                    IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
-                    Style="{StaticResource MaterialDesignComboBoxToggleButton}"
-                    BorderBrush="{TemplateBinding BorderBrush}"
-                    Padding="{TemplateBinding Padding}"
-                    Margin="{Binding ElementName=InnerRoot, Path=Margin}" />
                 <Button
                     x:Name="PART_ClearButton"
                     Style="{DynamicResource MaterialDesignToolButton}"