From 96c6583eb6f54c8e57a8450d5929cc575e0be0ee Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Wed, 12 Nov 2025 18:22:36 -0500 Subject: [PATCH 1/2] fix(multiple): change delays to use ms --- src/aria/listbox/listbox.spec.ts | 4 ++-- src/aria/listbox/listbox.ts | 2 +- src/aria/menu/menu.ts | 6 +++--- .../private/behaviors/list-typeahead/list-typeahead.spec.ts | 2 +- src/aria/private/behaviors/list-typeahead/list-typeahead.ts | 2 +- src/aria/private/behaviors/list/list.spec.ts | 4 ++-- src/aria/private/combobox/combobox.spec.ts | 4 ++-- src/aria/private/listbox/listbox.spec.ts | 2 +- src/aria/private/menu/menu.spec.ts | 4 ++-- src/aria/private/menu/menu.ts | 4 ++-- src/aria/tree/tree.ts | 2 +- src/components-examples/aria/combobox/select-examples.css | 0 12 files changed, 18 insertions(+), 18 deletions(-) create mode 100644 src/components-examples/aria/combobox/select-examples.css diff --git a/src/aria/listbox/listbox.spec.ts b/src/aria/listbox/listbox.spec.ts index df138a3eca61..5bba549e061a 100644 --- a/src/aria/listbox/listbox.spec.ts +++ b/src/aria/listbox/listbox.spec.ts @@ -724,7 +724,7 @@ describe('Listbox', () => { }); it('should reset search term after typeaheadDelay', async () => { - setupListbox({options: getOptions(), focusMode, typeaheadDelay: 0.1}); + setupListbox({options: getOptions(), focusMode, typeaheadDelay: 100}); type('A'); expect(isFocused(1)).toBe(true); @@ -817,7 +817,7 @@ class ListboxExample { multi = false; wrap = true; selectionMode: 'follow' | 'explicit' = 'explicit'; - typeaheadDelay = 0.5; + typeaheadDelay = 500; } @Component({ diff --git a/src/aria/listbox/listbox.ts b/src/aria/listbox/listbox.ts index aef733b6d8c3..01c70723569f 100644 --- a/src/aria/listbox/listbox.ts +++ b/src/aria/listbox/listbox.ts @@ -123,7 +123,7 @@ export class Listbox { selectionMode = input<'follow' | 'explicit'>('follow'); /** The amount of time before the typeahead search is reset. */ - typeaheadDelay = input(0.5); // Picked arbitrarily. + typeaheadDelay = input(500); // Picked arbitrarily. /** Whether the listbox is disabled. */ disabled = input(false, {transform: booleanAttribute}); diff --git a/src/aria/menu/menu.ts b/src/aria/menu/menu.ts index 03cb41bd6919..9fee8b4e7844 100644 --- a/src/aria/menu/menu.ts +++ b/src/aria/menu/menu.ts @@ -193,7 +193,7 @@ export class Menu { readonly wrap = input(true, {transform: booleanAttribute}); /** The delay in seconds before the typeahead buffer is cleared. */ - readonly typeaheadDelay = input(0.5); // Picked arbitrarily. + readonly typeaheadDelay = input(500); // Picked arbitrarily. /** Whether the menu is disabled. */ readonly disabled = input(false, {transform: booleanAttribute}); @@ -223,7 +223,7 @@ export class Menu { onSelect = output(); /** The delay in seconds before expanding sub-menus on hover. */ - readonly expansionDelay = input(0.1); // Arbitrarily chosen. + readonly expansionDelay = input(100); // Arbitrarily chosen. constructor() { this._pattern = new MenuPattern({ @@ -345,7 +345,7 @@ export class MenuBar { readonly wrap = input(true, {transform: booleanAttribute}); /** The delay in seconds before the typeahead buffer is cleared. */ - readonly typeaheadDelay = input(0.5); + readonly typeaheadDelay = input(500); /** The menu ui pattern instance. */ readonly _pattern: MenuBarPattern; diff --git a/src/aria/private/behaviors/list-typeahead/list-typeahead.spec.ts b/src/aria/private/behaviors/list-typeahead/list-typeahead.spec.ts index 8490433a7209..efc0da99eb64 100644 --- a/src/aria/private/behaviors/list-typeahead/list-typeahead.spec.ts +++ b/src/aria/private/behaviors/list-typeahead/list-typeahead.spec.ts @@ -26,7 +26,7 @@ function getTypeahead(inputs: TestInputs = {}): ListTypeahead { focusManager, ...focusManager.inputs, items, - typeaheadDelay: signal(0.5), + typeaheadDelay: signal(500), ...inputs, }); } diff --git a/src/aria/private/behaviors/list-typeahead/list-typeahead.ts b/src/aria/private/behaviors/list-typeahead/list-typeahead.ts index 3ee7bfe3a7a0..2c77756b70e4 100644 --- a/src/aria/private/behaviors/list-typeahead/list-typeahead.ts +++ b/src/aria/private/behaviors/list-typeahead/list-typeahead.ts @@ -74,7 +74,7 @@ export class ListTypeahead { this.timeout = setTimeout(() => { this._query.set(''); this._startIndex.set(undefined); - }, this.inputs.typeaheadDelay() * 1000); + }, this.inputs.typeaheadDelay()); return true; } diff --git a/src/aria/private/behaviors/list/list.spec.ts b/src/aria/private/behaviors/list/list.spec.ts index 0ac2fe68f883..4d916d8ebc4e 100644 --- a/src/aria/private/behaviors/list/list.spec.ts +++ b/src/aria/private/behaviors/list/list.spec.ts @@ -24,7 +24,7 @@ describe('List Behavior', () => { return new List({ values: inputs.values ?? signal([]), activeItem: signal(undefined), - typeaheadDelay: inputs.typeaheadDelay ?? signal(0.5), + typeaheadDelay: inputs.typeaheadDelay ?? signal(500), wrap: inputs.wrap ?? signal(true), disabled: inputs.disabled ?? signal(false), multi: inputs.multi ?? signal(false), @@ -390,7 +390,7 @@ describe('List Behavior', () => { }); it('should respect typeaheadDelay', async () => { - const {list} = getDefaultPatterns({typeaheadDelay: signal(0.1)}); + const {list} = getDefaultPatterns({typeaheadDelay: signal(100)}); list.search('b'); expect(list.inputs.activeItem()).toBe(list.inputs.items()[2]); // Banana await delay(50); // Less than delay diff --git a/src/aria/private/combobox/combobox.spec.ts b/src/aria/private/combobox/combobox.spec.ts index 6dc275584a47..1b71b805f541 100644 --- a/src/aria/private/combobox/combobox.spec.ts +++ b/src/aria/private/combobox/combobox.spec.ts @@ -125,7 +125,7 @@ function getListboxPattern( values: signal(initialValue ? [initialValue] : []), combobox: signal(combobox) as any, activeItem: signal(undefined), - typeaheadDelay: signal(0.5), + typeaheadDelay: signal(500), wrap: signal(true), readonly: signal(false), disabled: signal(false), @@ -169,7 +169,7 @@ function getTreePattern( values: signal(initialValue ? [initialValue] : []), combobox: signal(combobox) as any, activeItem: signal(undefined), - typeaheadDelay: signal(0.5), + typeaheadDelay: signal(500), wrap: signal(true), disabled: signal(false), softDisabled: signal(true), diff --git a/src/aria/private/listbox/listbox.spec.ts b/src/aria/private/listbox/listbox.spec.ts index 42a1615e5f80..ec2b867a33b9 100644 --- a/src/aria/private/listbox/listbox.spec.ts +++ b/src/aria/private/listbox/listbox.spec.ts @@ -36,7 +36,7 @@ describe('Listbox Pattern', () => { items: inputs.items, values: inputs.values ?? signal([]), activeItem: signal(undefined), - typeaheadDelay: inputs.typeaheadDelay ?? signal(0.5), + typeaheadDelay: inputs.typeaheadDelay ?? signal(500), wrap: inputs.wrap ?? signal(true), readonly: inputs.readonly ?? signal(false), disabled: inputs.disabled ?? signal(false), diff --git a/src/aria/private/menu/menu.spec.ts b/src/aria/private/menu/menu.spec.ts index 6fcd8dfde595..3a04dc4513c9 100644 --- a/src/aria/private/menu/menu.spec.ts +++ b/src/aria/private/menu/menu.spec.ts @@ -61,7 +61,7 @@ function getMenuBarPattern(values: string[], opts?: {textDirection: 'ltr' | 'rtl selectionMode: signal('explicit'), values: signal([]), wrap: signal(true), - typeaheadDelay: signal(0.5), + typeaheadDelay: signal(500), softDisabled: signal(true), focusMode: signal('activedescendant'), element: signal(document.createElement('div')), @@ -99,7 +99,7 @@ function getMenuPattern( items: items, parent: signal(parent) as any, activeItem: signal(undefined), - typeaheadDelay: signal(0.5), + typeaheadDelay: signal(500), wrap: signal(true), softDisabled: signal(true), multi: signal(false), diff --git a/src/aria/private/menu/menu.ts b/src/aria/private/menu/menu.ts index d61e9ffbae9b..7fee4b484cde 100644 --- a/src/aria/private/menu/menu.ts +++ b/src/aria/private/menu/menu.ts @@ -232,7 +232,7 @@ export class MenuPattern { this._closeTimeout = setTimeout(() => { item.close(); this._closeTimeout = undefined; - }, this.inputs.expansionDelay() * 1000); + }, this.inputs.expansionDelay()); } } @@ -243,7 +243,7 @@ export class MenuPattern { this._openTimeout = setTimeout(() => { item.open(); this._openTimeout = undefined; - }, this.inputs.expansionDelay() * 1000); + }, this.inputs.expansionDelay()); } /** Handles mouseout events for the menu. */ diff --git a/src/aria/tree/tree.ts b/src/aria/tree/tree.ts index df6a6bd1378f..dc1060a48ac0 100644 --- a/src/aria/tree/tree.ts +++ b/src/aria/tree/tree.ts @@ -150,7 +150,7 @@ export class Tree { readonly softDisabled = input(true, {transform: booleanAttribute}); /** The delay in seconds before the typeahead search is reset. */ - readonly typeaheadDelay = input(0.5); + readonly typeaheadDelay = input(500); /** The values of the currently selected items. */ readonly values = model([]); diff --git a/src/components-examples/aria/combobox/select-examples.css b/src/components-examples/aria/combobox/select-examples.css new file mode 100644 index 000000000000..e69de29bb2d1 From b66658cf59a76a993065cb9cd3d653b7814111f5 Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Wed, 12 Nov 2025 18:26:10 -0500 Subject: [PATCH 2/2] fixup! fix(multiple): change delays to use ms --- src/aria/menu/menu.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/aria/menu/menu.ts b/src/aria/menu/menu.ts index 9fee8b4e7844..e5e78c79f14b 100644 --- a/src/aria/menu/menu.ts +++ b/src/aria/menu/menu.ts @@ -192,7 +192,7 @@ export class Menu { /** Whether the menu should wrap its items. */ readonly wrap = input(true, {transform: booleanAttribute}); - /** The delay in seconds before the typeahead buffer is cleared. */ + /** The delay in milliseconds before the typeahead buffer is cleared. */ readonly typeaheadDelay = input(500); // Picked arbitrarily. /** Whether the menu is disabled. */ @@ -222,7 +222,7 @@ export class Menu { /** A callback function triggered when a menu item is selected. */ onSelect = output(); - /** The delay in seconds before expanding sub-menus on hover. */ + /** The delay in milliseconds before expanding sub-menus on hover. */ readonly expansionDelay = input(100); // Arbitrarily chosen. constructor() { @@ -344,7 +344,7 @@ export class MenuBar { /** Whether the menu should wrap its items. */ readonly wrap = input(true, {transform: booleanAttribute}); - /** The delay in seconds before the typeahead buffer is cleared. */ + /** The delay in milliseconds before the typeahead buffer is cleared. */ readonly typeaheadDelay = input(500); /** The menu ui pattern instance. */