Skip to content

Commit

Permalink
Merge pull request #2356 from kirbydesign/bug/7114-use-popover-on-sel…
Browse files Browse the repository at this point in the history
…ect-dropdowns

Fix item-selection on dropdown with popover in safari
  • Loading branch information
mictro authored Jun 17, 2022
2 parents 6750f45 + 144b54d commit ecb9cfd
Show file tree
Hide file tree
Showing 4 changed files with 37 additions and 17 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -173,5 +173,22 @@ describe('DropdownComponent + PopoverComponent', () => {
it('should have options be visible', () => {
expect(cardElement).toBeVisible();
});

it('should select the selected item', () => {
const expectedItem = items[0];

spectator.click('kirby-item');

expect(spectator.component.value).toEqual(expectedItem);
});

it('should emit change event with the selected item', () => {
const expectedItem = items[0];
const onChangeSpy = spyOn(spectator.component.change, 'emit');

spectator.click('kirby-item');

expect(onChangeSpy).toHaveBeenCalledWith(expectedItem);
});
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -567,9 +567,10 @@ describe('DropdownComponent (popover version)', () => {
});
});

describe('and looses focus', () => {
describe('and popover is clicked', () => {
it('should close dropdown', () => {
spectator.dispatchFakeEvent(spectator.element, 'blur');
spectator.click('kirby-popover');

expect(spectator.component.isOpen).toBeFalsy();
});
});
Expand Down Expand Up @@ -804,14 +805,6 @@ describe('DropdownComponent (popover version)', () => {
expect(onChangeSpy).toHaveBeenCalledWith(expectedItem);
});

it('should invoke callback from registerOnTouched() function on blur', () => {
const onTouchedSpy = jasmine.createSpy('_onTouched');
spectator.component.registerOnTouched(onTouchedSpy);
spectator.blur();
spectator.detectChanges();
expect(onTouchedSpy).toHaveBeenCalled();
});

describe('when setDisabledState() function is invoked', () => {
it('should set disabled = false when invoked with false', () => {
spectator.component.disabled = true;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,12 @@
<ng-container *ngTemplateOutlet="usePopover ? popoverTemplate : itemWrapperTemplate"></ng-container>

<ng-template #popoverTemplate>
<kirby-popover [target]="buttonElement" [popout]="popout" (willHide)="_onPopoverWillHide()">
<kirby-popover
[target]="buttonElement"
[popout]="popout"
(click)="_onPopoverClick($event)"
(willHide)="_onPopoverWillHide()"
>
<ng-container *ngTemplateOutlet="itemWrapperTemplate"></ng-container>
</kirby-popover>
</ng-template>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -471,14 +471,19 @@ export class DropdownComponent

@HostListener('keydown.enter')
@HostListener('keydown.escape')
_onEnterOrEscape() {
this.close();
this._onTouched();
}

_onPopoverClick(event: PointerEvent) {
this.close();
}

@HostListener('blur', ['$event'])
_onBlur(event?: FocusEvent) {
if (this.disabled) return;
if (this.isOpen) {
if (!this.cardElement.nativeElement.contains(event?.relatedTarget as HTMLElement)) {
this.close();
}
}
if (this.usePopover) return;
this.close();
this._onTouched();
}

Expand Down

0 comments on commit ecb9cfd

Please sign in to comment.