HTML element focus not working within ChromiumWebBrowser

[HorvatJosip]

Hello,

I am using the ChromiumWebBrowser to display the login form for Identity Server within a WPF project and I can't get the username field to focus once the form loads.

The NuGet installed within the project is CefSharp.WinForms version 88.2.90.0.
(IdentityModel.OidcClient NuGet version is 3.0.0.0)

The flow is set up as follows: create OidcClientOptions with Browser property set to instance of browser class that creates a ChromiumWebBrowser and places it inside a WindowsFormsHost (Child property set to instance of ChromiumWebBrowser) on a new WPF window (Content set to the WindowsFormsHost mentioned before). Passing the options to OidcClient and calling LoginAsync fires up the browser.

Settings for Cef.Initialize are only two cmd args: enable-media-stream which is set to 1 and ignore-certificate-errors

These are things I've tried:
autofocus HTML attribute

// Nothing happens
webBrowser.ExecuteScriptAsyncWhenPageLoaded("setTimeout(() => $('#Username').focus(), 3000);");

// Nothing happens
webBrowser.ExecuteScriptAsyncWhenPageLoaded("$('input')[1].focus();");

// Shows MessageBox with "Username" as content
webBrowser.ExecuteScriptAsyncWhenPageLoaded("alert(document.activeElement.name)");

// Shows MessageBox with jQuery's val method and after I click on 'Ok',
// it populates the username field with 'yup', but it doesn't focus it
webBrowser.ExecuteScriptAsyncWhenPageLoaded(@"
	const $username = $('#Username');
	alert($username.val);
	$username.val('yup');
	$username.focus();");

Note: after I click tab, it focuses the username field, but I need it to be focused immediately.

This is really weird because the input is actually focused (according to document.activeElement.name), but it just doesn't register it unless I press the tab key.

[amaitland]

Did you give the WinForms control focus?

Rather than using WindowsFormsHost the https://www.nuget.org/packages/CefSharp.Wpf.HwndHost/ provides a HwndHost implementation.

[HorvatJosip]

No, I just tried various focus arrangements, but none of them seemed to get the job done.

Here is a little snippet from code:

_windowsFormsHost = new WindowsFormsHost { Child = webBrowser };
_window.Content = _windowsFormsHost;
_window.Show(); // WPF Window
webBrowser.Load(_options.StartUrl);
webBrowser.Focus();

Is there maybe something wrong here? Maybe order?

[amaitland]

No, I just tried various focus arrangements, but none of them seemed to get the job done.

Executing Javascript won't get the control itself focus. It's like setting the Text of TextBox changing it's value doesn't give it focus.

Note: after I click tab, it focuses the username field, but I need it to be focused immediately.

Pressing the Tab key cycles through the focusable elements. You've just changed the focused element.

Try the standard options, see https://docs.microsoft.com/en-us/dotnet/desktop/wpf/advanced/focus-overview?view=netframeworkdesktop-4.8#keyboard-focus

[amaitland]

The following will work if you use the CefSharp.Wpf.HwndHost control. It might also work with the WinForms version hosted within a WindowsFormsHost.

public partial class MainWindow : Window
{
	public MainWindow()
	{
		InitializeComponent();

		Loaded += OnWindowLoaded;
	}

	private void OnWindowLoaded(object sender, RoutedEventArgs e)
	{
		Browser.GetBrowserHost().SetFocus(true);
	}
}