Skip to content

Commit 76cb94c

Browse files
wagnermacielwagnermaciel
committed
fix(aria/combobox): use click instead of pointerup
1 parent 4ec43f4 commit 76cb94c

File tree

4 files changed

+23
-23
lines changed

4 files changed

+23
-23
lines changed

‎src/aria/combobox/combobox.spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ describe('Combobox', () => {
3333

3434
const click = (element: HTMLElement, eventInit?: PointerEventInit) => {
3535
focus();
36-
element.dispatchEvent(new PointerEvent('pointerup', {bubbles: true, ...eventInit}));
36+
element.dispatchEvent(new PointerEvent('click', {bubbles: true, ...eventInit}));
3737
fixture.detectChanges();
3838
};
3939

@@ -603,7 +603,7 @@ describe('Combobox', () => {
603603

604604
const click = (element: HTMLElement, eventInit?: PointerEventInit) => {
605605
focus();
606-
element.dispatchEvent(new PointerEvent('pointerup', {bubbles: true, ...eventInit}));
606+
element.dispatchEvent(new PointerEvent('click', {bubbles: true, ...eventInit}));
607607
fixture.detectChanges();
608608
};
609609

‎src/aria/combobox/combobox.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ import {toSignal} from '@angular/core/rxjs-interop';
4141
'[attr.data-expanded]': 'expanded()',
4242
'(input)': '_pattern.onInput($event)',
4343
'(keydown)': '_pattern.onKeydown($event)',
44-
'(pointerup)': '_pattern.onPointerup($event)',
44+
'(click)': '_pattern.onClick($event)',
4545
'(focusin)': '_pattern.onFocusIn()',
4646
'(focusout)': '_pattern.onFocusOut($event)',
4747
},

‎src/aria/private/combobox/combobox.spec.ts‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -298,7 +298,7 @@ describe('Combobox with Listbox Pattern', () => {
298298
it('should open on click', () => {
299299
const {combobox, inputEl} = getPatterns();
300300
expect(combobox.expanded()).toBe(false);
301-
combobox.onPointerup(clickInput(inputEl));
301+
combobox.onClick(clickInput(inputEl));
302302
expect(combobox.expanded()).toBe(true);
303303
});
304304

@@ -357,7 +357,7 @@ describe('Combobox with Listbox Pattern', () => {
357357
it('should not expand when disabled', () => {
358358
const {combobox, inputEl} = getPatterns({disabled: true});
359359
expect(combobox.expanded()).toBe(false);
360-
combobox.onPointerup(clickInput(inputEl));
360+
combobox.onClick(clickInput(inputEl));
361361
expect(combobox.expanded()).toBe(false);
362362
});
363363
});
@@ -381,7 +381,7 @@ describe('Combobox with Listbox Pattern', () => {
381381
});
382382

383383
it('should select and commit on click', () => {
384-
combobox.onPointerup(clickOption(listbox.inputs.items(), 0));
384+
combobox.onClick(clickOption(listbox.inputs.items(), 0));
385385
expect(listbox.getSelectedItem()).toBe(listbox.inputs.items()[0]);
386386
expect(listbox.inputs.value()).toEqual(['Apple']);
387387
expect(inputEl.value).toBe('Apple');
@@ -442,7 +442,7 @@ describe('Combobox with Listbox Pattern', () => {
442442
});
443443

444444
it('should select and commit on click', () => {
445-
combobox.onPointerup(clickOption(listbox.inputs.items(), 3));
445+
combobox.onClick(clickOption(listbox.inputs.items(), 3));
446446
expect(listbox.getSelectedItem()).toBe(listbox.inputs.items()[3]);
447447
expect(listbox.inputs.value()).toEqual(['Blackberry']);
448448
expect(inputEl.value).toBe('Blackberry');
@@ -503,7 +503,7 @@ describe('Combobox with Listbox Pattern', () => {
503503
});
504504

505505
it('should select and commit on click', () => {
506-
combobox.onPointerup(clickOption(listbox.inputs.items(), 3));
506+
combobox.onClick(clickOption(listbox.inputs.items(), 3));
507507
expect(listbox.getSelectedItem()).toBe(listbox.inputs.items()[3]);
508508
expect(listbox.inputs.value()).toEqual(['Blackberry']);
509509
expect(inputEl.value).toBe('Blackberry');
@@ -589,7 +589,7 @@ describe('Combobox with Listbox Pattern', () => {
589589
describe('Readonly mode', () => {
590590
it('should select and close on selection', () => {
591591
const {combobox, listbox, inputEl} = getPatterns({readonly: true});
592-
combobox.onPointerup(clickOption(listbox.inputs.items(), 2));
592+
combobox.onClick(clickOption(listbox.inputs.items(), 2));
593593
expect(listbox.getSelectedItem()).toBe(listbox.inputs.items()[2]);
594594
expect(listbox.inputs.value()).toEqual(['Banana']);
595595
expect(inputEl.value).toBe('Banana');
@@ -606,7 +606,7 @@ describe('Combobox with Listbox Pattern', () => {
606606

607607
it('should NOT clear selection on escape when already closed', () => {
608608
const {combobox, listbox} = getPatterns({readonly: true});
609-
combobox.onPointerup(clickOption(listbox.inputs.items(), 2));
609+
combobox.onClick(clickOption(listbox.inputs.items(), 2));
610610
expect(listbox.getSelectedItem()).toBe(listbox.inputs.items()[2]);
611611
expect(listbox.inputs.value()).toEqual(['Banana']);
612612
combobox.onKeydown(escape());
@@ -741,7 +741,7 @@ describe('Combobox with Tree Pattern', () => {
741741
});
742742

743743
it('should select and commit on click', () => {
744-
combobox.onPointerup(clickTreeItem(tree.inputs.allItems(), 0));
744+
combobox.onClick(clickTreeItem(tree.inputs.allItems(), 0));
745745
expect(tree.inputs.value()).toEqual(['Fruit']);
746746
expect(inputEl.value).toBe('Fruit');
747747
});
@@ -755,7 +755,7 @@ describe('Combobox with Tree Pattern', () => {
755755
});
756756

757757
it('should select on focusout if the input text exactly matches an item', () => {
758-
combobox.onPointerup(clickInput(inputEl));
758+
combobox.onClick(clickInput(inputEl));
759759
type('Apple');
760760
combobox.onFocusOut(new FocusEvent('focusout'));
761761
expect(tree.inputs.value()).toEqual(['Apple']);
@@ -800,7 +800,7 @@ describe('Combobox with Tree Pattern', () => {
800800
});
801801

802802
it('should select and commit on click', () => {
803-
combobox.onPointerup(clickTreeItem(tree.inputs.allItems(), 2));
803+
combobox.onClick(clickTreeItem(tree.inputs.allItems(), 2));
804804
expect(tree.getSelectedItem()).toBe(tree.inputs.allItems()[2]);
805805
expect(tree.inputs.value()).toEqual(['Banana']);
806806
expect(inputEl.value).toBe('Banana');
@@ -857,7 +857,7 @@ describe('Combobox with Tree Pattern', () => {
857857
});
858858

859859
it('should select and commit on click', () => {
860-
combobox.onPointerup(clickTreeItem(tree.inputs.allItems(), 2));
860+
combobox.onClick(clickTreeItem(tree.inputs.allItems(), 2));
861861
expect(tree.getSelectedItem()).toBe(tree.inputs.allItems()[2]);
862862
expect(tree.inputs.value()).toEqual(['Banana']);
863863
expect(inputEl.value).toBe('Banana');
@@ -927,9 +927,9 @@ describe('Combobox with Tree Pattern', () => {
927927
describe('Readonly mode', () => {
928928
it('should select and close on selection', () => {
929929
const {combobox, tree, inputEl} = getPatterns({readonly: true});
930-
combobox.onPointerup(clickInput(inputEl));
930+
combobox.onClick(clickInput(inputEl));
931931
expect(combobox.expanded()).toBe(true);
932-
combobox.onPointerup(clickTreeItem(tree.inputs.allItems(), 0));
932+
combobox.onClick(clickTreeItem(tree.inputs.allItems(), 0));
933933
expect(tree.inputs.value()).toEqual(['Fruit']);
934934
expect(inputEl.value).toBe('Fruit');
935935
expect(combobox.expanded()).toBe(false);
@@ -945,8 +945,8 @@ describe('Combobox with Tree Pattern', () => {
945945

946946
it('should NOT clear selection on escape when already closed', () => {
947947
const {combobox, tree, inputEl} = getPatterns({readonly: true});
948-
combobox.onPointerup(clickInput(inputEl));
949-
combobox.onPointerup(clickTreeItem(tree.inputs.allItems(), 0));
948+
combobox.onClick(clickInput(inputEl));
949+
combobox.onClick(clickTreeItem(tree.inputs.allItems(), 0));
950950
expect(tree.inputs.value()).toEqual(['Fruit']);
951951
expect(inputEl.value).toBe('Fruit');
952952
expect(combobox.expanded()).toBe(false);

‎src/aria/private/combobox/combobox.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -197,8 +197,8 @@ export class ComboboxPattern<T extends ListItem<V>, V> {
197197
return manager;
198198
});
199199

200-
/** The pointerup event manager for the combobox. */
201-
pointerup = computed(() =>
200+
/** The click event manager for the combobox. */
201+
click = computed(() =>
202202
new PointerEventManager().on(e => {
203203
const item = this.inputs.popupControls()?.getItem(e);
204204

@@ -226,10 +226,10 @@ export class ComboboxPattern<T extends ListItem<V>, V> {
226226
}
227227
}
228228

229-
/** Handles pointerup events for the combobox. */
230-
onPointerup(event: PointerEvent) {
229+
/** Handles click events for the combobox. */
230+
onClick(event: PointerEvent) {
231231
if (!this.inputs.disabled()) {
232-
this.pointerup().handle(event);
232+
this.click().handle(event);
233233
}
234234
}
235235

0 commit comments

Comments
 (0)