-
Notifications
You must be signed in to change notification settings - Fork 1.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(tooltip): align closing behavior with Bootstrap
If several triggers are set, ex. 'hover focus', make sure that all triggers are taken into account for closure and not only the first one. Ex: mouseout on the triggering element, should not close the tooltip while the element is focused; and focus leaving the element should not close the tooltip while the mouse is still hovering it. Fixes #3889
- Loading branch information
1 parent
c7c0978
commit 55f45fd
Showing
8 changed files
with
274 additions
and
277 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
28 changes: 28 additions & 0 deletions
28
e2e-app/src/app/tooltip/triggers/tooltip-triggers.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
<h3> | ||
Tooltip triggers | ||
<span class="ms-1 badge {{ d.isOpen() ? 'bg-success' : 'bg-danger' }}" id="open-status">{{ | ||
d.isOpen() ? 'open' : 'closed' | ||
}}</span> | ||
</h3> | ||
|
||
<form id="default"> | ||
<div class="mb-3 row row-cols-lg-auto"> | ||
<div class="col-12"> | ||
<button class="btn btn-outline-light" id="before">Before</button> | ||
<button | ||
id="trigger" | ||
#d="ngbTooltip" | ||
ngbTooltip="Tooltip here" | ||
type="button" | ||
class="btn btn-outline-secondary ms-2" | ||
> | ||
Tooltip | ||
</button> | ||
<button class="btn btn-outline-light ms-2" id="after">After</button> | ||
</div> | ||
|
||
<div class="col-12"> | ||
<button class="btn btn-outline-secondary ms-1" id="outside-button">Outside button</button> | ||
</div> | ||
</div> | ||
</form> |
13 changes: 13 additions & 0 deletions
13
e2e-app/src/app/tooltip/triggers/tooltip-triggers.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import { ChangeDetectionStrategy, Component } from '@angular/core'; | ||
import { FormsModule } from '@angular/forms'; | ||
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; | ||
|
||
@Component({ | ||
standalone: true, | ||
imports: [FormsModule, NgbModule], | ||
templateUrl: './tooltip-triggers.component.html', | ||
changeDetection: ChangeDetectionStrategy.OnPush, | ||
}) | ||
export class TooltipTriggersComponent { | ||
autoClose: boolean | 'inside' | 'outside' = true; | ||
} |
67 changes: 67 additions & 0 deletions
67
e2e-app/src/app/tooltip/triggers/tooltip-triggers.e2e-spec.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,67 @@ | ||
import { getPage, setPage, test } from '../../../../baseTest'; | ||
import { expectTooltipToBeClosed, expectTooltipToBeOpen } from '../tooltip.po'; | ||
import { sendKey } from '../../tools.po'; | ||
|
||
const hoverOutside = async () => await getPage().hover('#outside-button'); | ||
const clickOutside = async () => await getPage().click('#outside-button'); | ||
const clickTriggeringElement = async () => await getPage().click('#trigger'); | ||
|
||
const openTooltip = async (message: string) => { | ||
await getPage().hover('button[ngbTooltip]'); | ||
await expectTooltipToBeOpen(message); | ||
}; | ||
|
||
test.use({ testURL: 'tooltip/triggers', testSelector: 'h3:text("Tooltip triggers")' }); | ||
test.beforeEach(async ({ page }) => setPage(page)); | ||
|
||
test.describe('Tooltip Triggers', () => { | ||
test(`open close tooltip with hover`, async () => { | ||
await openTooltip(`Opening tooltip with hover`); | ||
|
||
await hoverOutside(); | ||
await expectTooltipToBeClosed(`Tooltip close when hover outside`); | ||
}); | ||
|
||
test(`should not close tooltip on mouseout after triggering element click`, async () => { | ||
await openTooltip(`Opening tooltip with hover`); | ||
|
||
await clickTriggeringElement(); | ||
await expectTooltipToBeOpen(`Tooltip should stay visible when clicking on the triggering element`); | ||
|
||
await hoverOutside(); | ||
await expectTooltipToBeOpen(`Tooltip should not close after hovering the outside element`); | ||
|
||
await clickOutside(); | ||
await expectTooltipToBeClosed(`Tooltip should close after clicking the outside element`); | ||
}); | ||
|
||
test(`should close tooltip on blur`, async ({ browserName }) => { | ||
test.skip(browserName === 'webkit'); | ||
|
||
await getPage().click('#before'); | ||
|
||
await sendKey('Tab'); | ||
await expectTooltipToBeOpen(`Tooltip should have been opened with focus`); | ||
|
||
await sendKey('Tab'); | ||
await expectTooltipToBeClosed(`Tooltip should close after focusing outside the element`); | ||
}); | ||
|
||
test(`should not close tooltip on blur after triggering element click`, async ({ browserName }) => { | ||
test.skip(browserName === 'webkit'); | ||
|
||
await getPage().click('#before'); | ||
|
||
await sendKey('Tab'); | ||
await expectTooltipToBeOpen(`Tooltip should have been opened with focus`); | ||
|
||
await clickTriggeringElement(); | ||
await expectTooltipToBeOpen(`Tooltip should stay visible when clicking on the triggering element`); | ||
|
||
await sendKey('Tab'); | ||
await expectTooltipToBeOpen(`Tooltip should not close after focusing outside the element`); | ||
|
||
await hoverOutside(); | ||
await expectTooltipToBeClosed(`Tooltip should close after hovering the outside element`); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.