Fixes #20077: Fix form field focus bug on Edge #171

New Issue

MrUnknownDE · 2026-04-05T16:22:39+02:00

MrUnknownDE commented

2026-04-05 16:22:39 +02:00

Originally created by @jeremystretch on 3/11/2026

Fixes: #20077

Root cause: TomSelect's open() method calls focus(), which:

Synchronously calls control_input.focus() (moving browser focus to this instance)
Schedules setTimeout(() => { ignoreFocus = false; onFocus(); }, 0)

When Edge's autofill rapidly focuses multiple inputs, the sequence becomes a ping-pong loop:

Edge focuses select1 → open() → focus() → control_input.focus() → setTimeout A
Edge focuses select2 → select1 gets onBlur() → select1 closes (isOpen=false)
setTimeout A fires → select1 calls onFocus() → open() (since isOpen=false again!) → focus() → steals focus back from select2
select2 closes → select2's pending setTimeout fires → steals focus back from select1 → infinite loop

Changes:

New file netboxTomSelect.ts: NetBoxTomSelect extends TomSelect with the patched focus()
dynamicTomSelect.ts: DynamicTomSelect now extends NetBoxTomSelect instead of TomSelect
static.ts: initStaticSelects() and initColorSelects() use NetBoxTomSelect instead of TomSelect (static selects with pre-loaded options are equally susceptible to the loop)

I've verified that this addresses the problematic behavior using the Edge browser.

*Originally created by @jeremystretch on 3/11/2026* ### Fixes: #20077 Root cause: TomSelect's open() method calls focus(), which: 1. Synchronously calls `control_input.focus()` (moving browser focus to this instance) 2. Schedules `setTimeout(() => { ignoreFocus = false; onFocus(); }, 0)` When Edge's autofill rapidly focuses multiple inputs, the sequence becomes a ping-pong loop: - Edge focuses select1 → open() → focus() → control_input.focus() → setTimeout A - Edge focuses select2 → select1 gets onBlur() → select1 closes (isOpen=false) - setTimeout A fires → select1 calls onFocus() → open() (since isOpen=false again!) → focus() → steals focus back from select2 - select2 closes → select2's pending setTimeout fires → steals focus back from select1 → infinite loop Changes: - New file `netboxTomSelect.ts`: NetBoxTomSelect extends TomSelect with the patched `focus()` - `dynamicTomSelect.ts`: DynamicTomSelect now extends NetBoxTomSelect instead of TomSelect - `static.ts`: `initStaticSelects()` and `initColorSelects()` use NetBoxTomSelect instead of TomSelect (static selects with pre-loaded options are equally susceptible to the loop) I've verified that this addresses the problematic behavior using the Edge browser.

MrUnknownDE closed this issue

2026-04-05 16:22:39 +02:00

Sign in to join this conversation.

Branches Tags

main

21455-sql-indexes-audit

21357-register-model-actions

feature

20924-plugin-ui-components

21766-improve-test-coverage-for-sortable-table-columns

21157-export-template-public-models

21025-pre-render-config-contexts

21364-swagger

feature-ip-prefix-link

20911-dropdown-3

fix_module_substitution

21160-filterset

20911-dropdown-2

20044-elevation-stuck-lightmode

7604-filter-modifiers-v3

20660-script-load

19724-graphql

14884-script

19720-macaddress-interface-generic-relation

fix-19669-api-image-download

7604-filter-modifiers

19275-fixes-interface-bulk-edit

fix-17794-get_field_value_return_list

11507-show-aggregate-and-rir-on-api

9583-add_column_specific_search_field_to_tables

No Label

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/netbox#171