From 5881263afacd807d21f7b4195c9543754cb99887 Mon Sep 17 00:00:00 2001
From: Nicolai Henriksen <nicolai.h80@gmail.com>
Date: Thu, 2 Mar 2023 06:32:47 +0100
Subject: [PATCH] Fix PasswordBox keyboard focus traversal issue (#3096)

* Extend SmartHint demo page with new features

* Handle forward/backward keyboard focus on reveal style PasswordBox

* Add UI test to verify tabbing works

* Fix issue with backwards focus traversal when hiding a revealed password

* Update UI test with syntax feature which is hopefully added to XAMLTest

* Rev'ing XAMLTest

---------

Co-authored-by: Kevin Bost <kitokeboo@gmail.com>
---
 MainDemo.Wpf/SmartHint.xaml                   | 20 +++++++---
 .../WPF/PasswordBoxes/PasswordBoxTests.cs     | 37 +++++++++++++++++++
 .../Behaviors/PasswordBoxBehavior.cs          | 24 ++++++++++++
 3 files changed, 76 insertions(+), 5 deletions(-)

diff --git a/MainDemo.Wpf/SmartHint.xaml b/MainDemo.Wpf/SmartHint.xaml
index 72fb5f9928..f04629e44b 100644
--- a/MainDemo.Wpf/SmartHint.xaml
+++ b/MainDemo.Wpf/SmartHint.xaml
@@ -408,7 +408,11 @@
         </Grid>
 
         <!-- Reveal style PasswordBox variants -->
-        <TextBlock Style="{StaticResource MaterialDesignHeadline6TextBlock}" Text="PasswordBox 'reveal' styles" Margin="0,40,0,0" />
+        <StackPanel Orientation="Horizontal" Margin="0,40,0,0">
+          <TextBlock Style="{StaticResource MaterialDesignHeadline6TextBlock}" Text="PasswordBox 'reveal' styles" />
+          <CheckBox x:Name="PasswordBoxesRevealedCheckBox" Content="IsPasswordRevealed" Margin="20,0,0,0" />
+        </StackPanel>
+        
         <Grid>
           <Grid.Resources>
             <Style TargetType="{x:Type PasswordBox}" BasedOn="{StaticResource MaterialDesignFloatingHintRevealPasswordBox}">
@@ -417,6 +421,7 @@
               <Setter Property="materialDesign:TextFieldAssist.LeadingIcon" Value="{StaticResource LeadingIcon}" />
               <Setter Property="materialDesign:HintAssist.IsFloating" Value="{Binding FloatHint}" />
               <Setter Property="materialDesign:PasswordBoxAssist.Password" Value="{Binding RelativeSource={RelativeSource Self}, Path=Tag}" />
+              <Setter Property="materialDesign:PasswordBoxAssist.IsPasswordRevealed" Value="{Binding ElementName=PasswordBoxesRevealedCheckBox, Path=IsChecked}" />
               <Setter Property="Padding">
                 <Setter.Value>
                   <MultiBinding Converter="{StaticResource CustomPaddingConverter}">
@@ -458,6 +463,7 @@
               <Setter Property="materialDesign:TextFieldAssist.LeadingIcon" Value="{StaticResource LeadingIcon}" />
               <Setter Property="materialDesign:HintAssist.IsFloating" Value="{Binding FloatHint}" />
               <Setter Property="materialDesign:PasswordBoxAssist.Password" Value="{Binding RelativeSource={RelativeSource Self}, Path=Tag}" />
+              <Setter Property="materialDesign:PasswordBoxAssist.IsPasswordRevealed" Value="{Binding ElementName=PasswordBoxesRevealedCheckBox, Path=IsChecked}" />
               <Setter Property="Padding">
                 <Setter.Value>
                   <MultiBinding Converter="{StaticResource CustomPaddingConverter}">
@@ -499,6 +505,7 @@
               <Setter Property="materialDesign:TextFieldAssist.LeadingIcon" Value="{StaticResource LeadingIcon}" />
               <Setter Property="materialDesign:HintAssist.IsFloating" Value="{Binding FloatHint}" />
               <Setter Property="materialDesign:PasswordBoxAssist.Password" Value="{Binding RelativeSource={RelativeSource Self}, Path=Tag}" />
+              <Setter Property="materialDesign:PasswordBoxAssist.IsPasswordRevealed" Value="{Binding ElementName=PasswordBoxesRevealedCheckBox, Path=IsChecked}" />
               <Setter Property="Padding">
                 <Setter.Value>
                   <MultiBinding Converter="{StaticResource CustomPaddingConverter}">
@@ -534,7 +541,10 @@
         </Grid>
 
         <!-- ComboBox variants -->
-        <TextBlock Style="{StaticResource MaterialDesignHeadline6TextBlock}" Text="ComboBox styles" Margin="0,40,0,0" />
+        <StackPanel Orientation="Horizontal" Margin="0,40,0,0">
+          <TextBlock Style="{StaticResource MaterialDesignHeadline6TextBlock}" Text="ComboBox styles"  />
+          <CheckBox x:Name="ComboBoxesEditableCheckBox" Content="IsEditable" Margin="20,0,0,0" />
+        </StackPanel>
         <Grid>
           <Grid.Resources>
             <Style TargetType="{x:Type ComboBox}" BasedOn="{StaticResource MaterialDesignFloatingHintComboBox}">
@@ -544,7 +554,7 @@
               <Setter Property="materialDesign:HintAssist.IsFloating" Value="{Binding FloatHint}" />
               <Setter Property="Text" Value="{Binding RelativeSource={RelativeSource Self}, Path=Tag}" />
               <Setter Property="ItemsSource" Value="{Binding ComboBoxOptions}" />
-              <Setter Property="IsEditable" Value="True" />
+              <Setter Property="IsEditable" Value="{Binding ElementName=ComboBoxesEditableCheckBox, Path=IsChecked}" />
               <Setter Property="Padding">
                 <Setter.Value>
                   <MultiBinding Converter="{StaticResource CustomPaddingConverter}">
@@ -587,7 +597,7 @@
               <Setter Property="materialDesign:HintAssist.IsFloating" Value="{Binding FloatHint}" />
               <Setter Property="Text" Value="{Binding RelativeSource={RelativeSource Self}, Path=Tag}" />
               <Setter Property="ItemsSource" Value="{Binding ComboBoxOptions}" />
-              <Setter Property="IsEditable" Value="True" />
+              <Setter Property="IsEditable" Value="{Binding ElementName=ComboBoxesEditableCheckBox, Path=IsChecked}" />
               <Setter Property="Padding">
                 <Setter.Value>
                   <MultiBinding Converter="{StaticResource CustomPaddingConverter}">
@@ -630,7 +640,7 @@
               <Setter Property="materialDesign:HintAssist.IsFloating" Value="{Binding FloatHint}" />
               <Setter Property="Text" Value="{Binding RelativeSource={RelativeSource Self}, Path=Tag}" />
               <Setter Property="ItemsSource" Value="{Binding ComboBoxOptions}" />
-              <Setter Property="IsEditable" Value="True" />
+              <Setter Property="IsEditable" Value="{Binding ElementName=ComboBoxesEditableCheckBox, Path=IsChecked}" />
               <Setter Property="Padding">
                 <Setter.Value>
                   <MultiBinding Converter="{StaticResource CustomPaddingConverter}">
diff --git a/MaterialDesignThemes.UITests/WPF/PasswordBoxes/PasswordBoxTests.cs b/MaterialDesignThemes.UITests/WPF/PasswordBoxes/PasswordBoxTests.cs
index 5e33450e9f..ee50b27a35 100644
--- a/MaterialDesignThemes.UITests/WPF/PasswordBoxes/PasswordBoxTests.cs
+++ b/MaterialDesignThemes.UITests/WPF/PasswordBoxes/PasswordBoxTests.cs
@@ -296,4 +296,41 @@ public async Task PasswordBox_WithHintAndValidationError_RespectsPadding(string
 
         recorder.Success();
     }
+
+    [Fact]
+    [Description("Issue 3095")]
+    public async Task PasswordBox_WithRevealedPassword_RespectsKeyboardTabNavigation()
+    {
+        await using var recorder = new TestRecorder(App);
+
+        var stackPanel = await LoadXaml<StackPanel>(@"
+<StackPanel Orientation=""Vertical"">
+  <TextBox x:Name=""TextBox1"" Width=""200"" />
+  <PasswordBox x:Name=""PasswordBox"" Width=""200""
+               materialDesign:PasswordBoxAssist.IsPasswordRevealed=""True""
+               Style=""{StaticResource MaterialDesignFloatingHintRevealPasswordBox}"" />
+  <TextBox x:Name=""TextBox2"" Width=""200"" />
+</StackPanel>");
+
+        var textBox1 = await stackPanel.GetElement<TextBox>("TextBox1");
+        var passwordBox = await stackPanel.GetElement<PasswordBox>("PasswordBox");
+        var revealPasswordTextBox = await passwordBox.GetElement<TextBox>("RevealPasswordTextBox");
+        var textBox2 = await stackPanel.GetElement<TextBox>("TextBox2");
+
+        // Assert Tab forward
+        await textBox1.MoveKeyboardFocus();
+        Assert.True(await textBox1.GetIsKeyboardFocused());
+        await textBox1.SendKeyboardInput($"{Key.Tab}");
+        Assert.True(await revealPasswordTextBox.GetIsKeyboardFocused());
+        await revealPasswordTextBox.SendKeyboardInput($"{Key.Tab}");
+        Assert.True(await textBox2.GetIsKeyboardFocused());
+
+        // Assert Tab backwards
+        await textBox2.SendKeyboardInput($"{ModifierKeys.Shift}{Key.Tab}");
+        Assert.True(await revealPasswordTextBox.GetIsKeyboardFocused());
+        await revealPasswordTextBox.SendKeyboardInput($"{Key.Tab}{ModifierKeys.None}");
+        Assert.True(await textBox1.GetIsKeyboardFocused());
+
+        recorder.Success();
+    }
 }
diff --git a/MaterialDesignThemes.Wpf/Behaviors/PasswordBoxBehavior.cs b/MaterialDesignThemes.Wpf/Behaviors/PasswordBoxBehavior.cs
index 9647a11a5f..c6c55900c7 100644
--- a/MaterialDesignThemes.Wpf/Behaviors/PasswordBoxBehavior.cs
+++ b/MaterialDesignThemes.Wpf/Behaviors/PasswordBoxBehavior.cs
@@ -6,10 +6,33 @@ internal class PasswordBoxBehavior : Behavior<PasswordBox>
 {
     private void PasswordBoxLoaded(object sender, RoutedEventArgs e) => PasswordBoxAssist.SetPassword(AssociatedObject, AssociatedObject.Password);
 
+    private void PasswordBoxPreviewGotKeyboardFocus(object sender, KeyboardFocusChangedEventArgs e)
+    {
+        if (PasswordBoxAssist.GetIsPasswordRevealed(AssociatedObject) &&
+            AssociatedObject.FindChild<TextBox>("RevealPasswordTextBox") is { } revealPasswordTextBox)
+        {
+            if (ReferenceEquals(e.OldFocus, revealPasswordTextBox) && ReferenceEquals(e.NewFocus, AssociatedObject))
+            {
+                // When password box receives keyboard focus, but it came from the nested reveal TextBox. We request focus transfer to the previous element from the password box's POV
+                TraversalRequest request = new TraversalRequest(FocusNavigationDirection.Previous);
+                AssociatedObject.MoveFocus(request);
+                e.Handled = true;
+            }
+            else if (!ReferenceEquals(e.OriginalSource, revealPasswordTextBox))
+            {
+                // When password box receives keyboard focus while the password is revealed, we transfer the focus to the nested reveal TextBox.
+                revealPasswordTextBox.Focus();
+                e.Handled = true;
+            }
+        }
+        
+    }
+
     protected override void OnAttached()
     {
         base.OnAttached();
         AssociatedObject.Loaded += PasswordBoxLoaded;
+        AssociatedObject.PreviewGotKeyboardFocus += PasswordBoxPreviewGotKeyboardFocus;
     }
 
     protected override void OnDetaching()
@@ -17,6 +40,7 @@ protected override void OnDetaching()
         if (AssociatedObject != null)
         {
             AssociatedObject.Loaded -= PasswordBoxLoaded;
+            AssociatedObject.PreviewGotKeyboardFocus -= PasswordBoxPreviewGotKeyboardFocus;
         }
         base.OnDetaching();
     }