Fix tab focus on mode

Author: yaira2

src/Files.App.Controls/Omnibar/Omnibar.Events.cs

@@ -47,8 +47,8 @@ private void AutoSuggestBox_LostFocus(object sender, RoutedEventArgs e)
 			// TextBox still has focus if the context menu for selected text is open
 			var element = Microsoft.UI.Xaml.Input.FocusManager.GetFocusedElement(this.XamlRoot);
 			if (element is FlyoutBase or Popup)
-				return; 
-			
+				return;
+
 			GlobalHelper.WriteDebugStringForOmnibar("The TextBox lost the focus.");
 
 			IsFocused = false;

src/Files.App.Controls/Omnibar/Omnibar.cs

@@ -128,7 +128,7 @@ protected void ChangeMode(OmnibarMode? oldMode, OmnibarMode newMode)
 				// Add the reposition transition to the all modes
 				mode.Transitions = [new RepositionThemeTransition()];
 				mode.UpdateLayout();
-				mode.IsTabStop = true;
+				mode.IsTabStop = false;
 			}
 
 			var index = _modesHostGrid.Children.IndexOf(newMode);

src/Files.App.Controls/Omnibar/Omnibar.xaml

@@ -117,33 +117,28 @@
 		<Setter Property="HorizontalContentAlignment" Value="Left" />
 		<Setter Property="VerticalAlignment" Value="Stretch" />
 
-		<Setter Property="IsTabStop" Value="True" />
-		<Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
-
 		<Setter Property="Template">
 			<Setter.Value>
 				<ControlTemplate TargetType="local:OmnibarMode">
 					<Grid
 						x:Name="PART_RootGrid"
 						Height="{TemplateBinding Height}"
 						HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
-						Background="{TemplateBinding Background}"
-						TabFocusNavigation="Local">
+						Background="{TemplateBinding Background}">
 						<!--  Mode Button  -->
-						<Border
+						<Button
 							x:Name="PART_ModeButton"
 							Width="{StaticResource OmnibarModeDefaultClickAreaWidth}"
 							Margin="1"
 							Background="{TemplateBinding Background}"
 							BorderBrush="{TemplateBinding BorderBrush}"
-							BorderThickness="{TemplateBinding BorderThickness}"
+							BorderThickness="0"
 							CornerRadius="{TemplateBinding CornerRadius}"
-							IsTabStop="True"
-							ToolTipService.ToolTip="{Binding ModeName, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
-							UseSystemFocusVisuals="{StaticResource UseSystemFocusVisuals}">
-							<Border.BackgroundTransition>
-								<BrushTransition Duration="0:0:0.083" />
-							</Border.BackgroundTransition>
+							ToolTipService.ToolTip="{Binding ModeName, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}">
+							<Button.Resources>
+								<SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="{ThemeResource SubtleFillColorSecondary}" />
+								<SolidColorBrush x:Key="ButtonBackgroundPressed" Color="{ThemeResource SubtleFillColorTertiary}" />
+							</Button.Resources>
 
 							<Grid>
 								<ContentPresenter
@@ -160,7 +155,7 @@
 									Content="{Binding IconOnActive, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
 									Visibility="Collapsed" />
 							</Grid>
-						</Border>
+						</Button>
 
 						<ContentPresenter
 							x:Name="PART_InactiveContent"
@@ -174,14 +169,9 @@
 
 							<VisualStateGroup x:Name="PointerStates">
 								<VisualState x:Name="PointerNormal" />
-								<VisualState x:Name="PointerOver">
-									<VisualState.Setters>
-										<Setter Target="PART_ModeButton.Background" Value="{ThemeResource SubtleFillColorSecondaryBrush}" />
-									</VisualState.Setters>
-								</VisualState>
+								<VisualState x:Name="PointerOver" />
 								<VisualState x:Name="PointerPressed">
 									<VisualState.Setters>
-										<Setter Target="PART_ModeButton.Background" Value="{ThemeResource SubtleFillColorTertiaryBrush}" />
 										<Setter Target="PART_ModeButtonInactiveIconPresenter.Visibility" Value="Collapsed" />
 										<Setter Target="PART_ModeButtonActiveIconPresenter.Visibility" Value="Visible" />
 									</VisualState.Setters>

src/Files.App.Controls/Omnibar/OmnibarMode.Events.cs

@@ -35,11 +35,6 @@ private void ModeButton_PointerReleased(object sender, PointerRoutedEventArgs e)
 			GlobalHelper.WriteDebugStringForOmnibar($"The mouse pointer has been unpressed from the UI area of this Mode ({this})");
 
 			VisualStateManager.GoToState(this, "PointerOver", true);
-
-			owner.IsModeButtonPressed = true;
-
-			// Change the current mode
-			owner.CurrentSelectedMode = this;
 		}
 
 		private void ModeButton_PointerExited(object sender, PointerRoutedEventArgs e)
@@ -48,5 +43,14 @@ private void ModeButton_PointerExited(object sender, PointerRoutedEventArgs e)
 
 			VisualStateManager.GoToState(this, "PointerNormal", true);
 		}
+
+		private void ModeButton_Click(object sender, RoutedEventArgs e)
+		{
+			if (_ownerRef is null || _ownerRef.TryGetTarget(out var owner) is false || owner.CurrentSelectedMode == this)
+				return;
+
+			owner.IsModeButtonPressed = true;
+			owner.CurrentSelectedMode = this;
+		}
 	}
-}
+}

src/Files.App.Controls/Omnibar/OmnibarMode.cs

@@ -16,7 +16,7 @@ public partial class OmnibarMode : ItemsControl
 
 		private WeakReference<Omnibar>? _ownerRef;
 
-		private Border _modeButton = null!;
+		private Button _modeButton = null!;
 
 		// Constructor
 
@@ -33,14 +33,15 @@ protected override void OnApplyTemplate()
 		{
 			base.OnApplyTemplate();
 
-			_modeButton = GetTemplateChild(TemplatePartName_ModeButton) as Border
+			_modeButton = GetTemplateChild(TemplatePartName_ModeButton) as Button
 				?? throw new MissingFieldException($"Could not find {TemplatePartName_ModeButton} in the given {nameof(OmnibarMode)}'s style.");
 
 			Loaded += OmnibarMode_Loaded;
 			_modeButton.PointerEntered += ModeButton_PointerEntered;
 			_modeButton.PointerPressed += ModeButton_PointerPressed;
 			_modeButton.PointerReleased += ModeButton_PointerReleased;
 			_modeButton.PointerExited += ModeButton_PointerExited;
+			_modeButton.Click += ModeButton_Click;
 
 			GlobalHelper.WriteDebugStringForOmnibar($"The template and the events of the Omnibar Mode ({this}) have been initialized.");
 		}