Filter fields on drop downs don't gain focus automatically

[tardoe]

NetBox version

v3.1.11

Python version

3.9

Steps to Reproduce

1. Go to the sites list
2. Select the filter tab
3. Click the "Region", "Tenant", "Site Group" or any other drop-down option that prompts you with a "filter" search box - the cursor isn't automatically focussed to this filter text field.

Expected Behavior

Like the "Status" and "Tags" filter fields that present a "search" input text box, all filtering text inputs should automatically gain keyboard focus for 0-click text entry.

Observed Behavior

The "filter" field text boxes remain unfocussed and require an additional mouse-click.

[decoupca]

I notice that Tags and Status behaves slightly differently from all other fields. Clicking Tags or Status instantly brings down the dropdown with no change to the "select status" field. Other fields like Region, Tenant, etc all briefly highlight the "select region" field before passing off to the "filter" input. so looks like those fields steal focus briefly before (probably) handing it off to the filter input.

tags/status always auto-focuses for me, but all other fields intermittently do or don't auto-focus every time I click.

On 3.1.2 / macOS Safari

[PaulR282]

It works perfectly for me on v3.2.5 / Chrome Windows.

[kkthxbye-code]

I cannot replicate this on any of: Chrome (Windows), Firefox (Windows) and Safari (OS X).

[ziggekatten]

It seems to depend on how many objects you have in the database. A brand new empty installation has no issues, but as soon as we imported some 800 tenants, it directly occurs in the Tenant dropdown.

[kkthxbye-code]

I managed to replicate it using the throttle feature in chrome. So it happens when the API is slow to respond when the select field populates the data. The field is disabled when it's loading data, so slim-select sets the focus while the search field is disabled if the API is too slow to respond.

Can be fixed by inserting:

this.slim.slim.search.input.focus();

After line 413 here:

netbox/netbox/project-static/src/select/api/apiSelect.ts

Lines 405 to 416 in 29f6291

	private async loadData(): Promise<void> {
	try {
	this.disable();
	await this.getOptions('replace');
	} catch (err) {
	console.error(err);
	} finally {
	this.setOptionStyles();
	this.enable();
	this.base.dispatchEvent(this.loadEvent);
	}
	}

I don't have a time to test i properly right now. If anyone wants to test it properly and submit a PR, feel free. Otherwise I'll probably get to it at some point.

[tardoe]

@kkthxbye-code seems to have nailed it here - I'm using an instance hosted on another continent with reasonable latency loading select field items. While we don't have many field items, the loading time appears to be enough to trigger this.