Skip to content

Commit 3f92ca5

Browse files
authored
fix: Fix tooltip focus management (#41)
1 parent 76008ba commit 3f92ca5

File tree

3 files changed

+30
-10
lines changed

3 files changed

+30
-10
lines changed

.prettierignore

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,5 @@
1-
dist/
1+
.husky/
2+
.idea/
3+
build/
4+
coverage/
25
node_modules/

.prettierrc

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,17 @@
1414
"parser": "babylon"
1515
}
1616
},
17+
{
18+
"files": "./**/*.svelte",
19+
"options": {
20+
"svelteBracketNewLine": false,
21+
"svelteAllowShorthand": false,
22+
"svelteSortOrder" : "options-scripts-styles-markup",
23+
"plugins": [
24+
"prettier-plugin-svelte"
25+
]
26+
}
27+
},
1728
{
1829
"files": "./**/*.json",
1930
"options": {

src/Tooltip.js

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -271,14 +271,14 @@ class Tooltip {
271271
await this.#transitionTooltip(1)
272272
}
273273

274-
this.#target.appendChild(this.#tooltip)
275-
this.#observer.wait(this.#tooltip, null, { events: [DOMObserver.EXIST, DOMObserver.ADD] }).then(() => {
274+
this.#observer.wait(this.#tooltip, null, { events: [DOMObserver.ADD] }).then(({ node }) => {
276275
this.#positionTooltip()
277276
})
277+
this.#target.appendChild(this.#tooltip)
278278

279279
if (this.#contentActions) {
280280
Object.entries(this.#contentActions).forEach(
281-
([key, { eventType, callback, callbackParams, closeOnCallback }]) => {
281+
([key, { eventType, callback, callbackParams, closeOnCallback }], i) => {
282282
const trigger = key === '*' ? this.#tooltip : this.#tooltip.querySelector(key)
283283
if (trigger) {
284284
const listener = (event) => {
@@ -289,6 +289,8 @@ class Tooltip {
289289
}
290290
trigger.addEventListener(eventType, listener)
291291
this.#events.push({ trigger, eventType, listener })
292+
293+
if (i === 0) trigger.focus()
292294
}
293295
}
294296
)
@@ -352,14 +354,18 @@ class Tooltip {
352354
})
353355
}
354356

355-
async #onTargetEnter() {
356-
await this.#waitForDelay(this.#enterDelay)
357-
await this.#appendTooltipToTarget()
357+
async #onTargetEnter(e) {
358+
if (this.#target === e.target) {
359+
await this.#waitForDelay(this.#enterDelay)
360+
await this.#appendTooltipToTarget()
361+
}
358362
}
359363

360-
async #onTargetLeave() {
361-
await this.#waitForDelay(this.#leaveDelay)
362-
await this.#removeTooltipFromTarget()
364+
async #onTargetLeave(e) {
365+
if (this.#target === e.target || !this.#target.contains(e.target)) {
366+
await this.#waitForDelay(this.#leaveDelay)
367+
await this.#removeTooltipFromTarget()
368+
}
363369
}
364370

365371
async #onWindowChange(e) {

0 commit comments

Comments
 (0)