Turn off button focus:visible when not keyboard navigation


I have a component that contains the RadzenHtmlEditor and a save button.
To avoid that the user has to click outside the form prior to clicking the save button, I'm using a mouseover event that sets the focus to the save button.

  <WelcomeRichText Value="@_welcomeText" Change="@(input => { _welcomeText = input; HandleChange(input); })"/>
  <RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.End" Gap="1rem" Class="rz-mt-2 rz-mb-2">
    <RadzenButton @ref="saveButton" id="WelcomeSaveButton" ButtonType="ButtonType.Submit" ButtonStyle="ButtonStyle.Primary" Size="ButtonSize.Medium" Icon="save" 
                  Text="@Localizer["Save"]" @onmouseover="@SetFocusSubmitButton"/>
    <RadzenButton ButtonStyle="ButtonStyle.Secondary" Size="ButtonSize.Medium" Variant="Variant.Flat" Icon="cancel" Text="@Localizer["Cancel"]" Click="@Cancel"/>


  [Parameter] public string? SurveyWelcomeText { get; set; }
  private string? _welcomeText;
  private RadzenButton saveButton;
  protected override void OnInitialized()
    if (SurveyWelcomeText is not null)
      _welcomeText = SurveyWelcomeText;
  private void HandleChange(string input)
    SurveyWelcomeText = input == "" ? null : input;
  void SetFocusSubmitButton()
    JSRuntime.InvokeVoidAsync("setFocus", saveButton.Element);
  private void Save()

  private void Cancel() => DialogService.Close();

However how do I prevent the focus:visible when it's a mouseover? It should be visible when using keyboard navigation.


I don't know if this is possible - a focused element is a focused element regardless of the method used to focus it.

The button focused state is only visible when using keyboard navigation.

Hi @yordanov ,

I am aware of this... In this case I force setFocus on mouseover... In that case the button get's the outline as if it was navigated to with the keyboard.