Turn off button focus:visible when not keyboard navigation

Radzen.Blazor Components
1

Hi

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"/>
  </RadzenStack>

@code{

  [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()
  {
    DialogService.Close(_welcomeText);
  }

  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.

Rgds,
Tino

2

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

3

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

4

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.

rgds,
Tino