Skip to content
This repository was archived by the owner on Oct 1, 2024. It is now read-only.

Commit e35fe18

Browse files
geotrevgeotrev
authored
Merge pull request #139 from geotrev/js/tooltip-focus-bug
Fixes [138]
2 parents 482c48c + 3c23cd8 commit e35fe18

File tree

3 files changed

+157
-0
lines changed

3 files changed

+157
-0
lines changed

‎src/js/__tests__/__snapshots__/tooltip.spec.js.snap‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,144 @@ exports[`Tooltips #handleClose -> Tooltip Blur/MouseOut hides tooltip on mouseou
9797
</div>
9898
`;
9999

100+
exports[`Tooltips #handleClose -> Tooltip Blur/MouseOut will hide focused tooltip if second is hovered at the same time 1`] = `
101+
<body>
102+
103+
104+
<span
105+
class="tooltip"
106+
data-tooltip="new-tooltip"
107+
>
108+
109+
110+
<button
111+
aria-describedby="new-tooltip"
112+
class="tooltip-trigger"
113+
data-target="new-tooltip"
114+
>
115+
Tooltip Button
116+
</button>
117+
118+
119+
<div
120+
class="tooltip-box"
121+
data-visible="false"
122+
id="new-tooltip"
123+
role="tooltip"
124+
style="left: 0px;"
125+
>
126+
127+
This is a tooltip.
128+
129+
</div>
130+
131+
132+
</span>
133+
134+
135+
<span
136+
class="tooltip"
137+
data-tooltip="new-tooltip10"
138+
>
139+
140+
141+
<button
142+
aria-describedby="new-tooltip10"
143+
class="tooltip-trigger"
144+
data-target="new-tooltip10"
145+
>
146+
Tooltip Button
147+
</button>
148+
149+
150+
<div
151+
class="tooltip-box"
152+
data-visible="true"
153+
id="new-tooltip10"
154+
role="tooltip"
155+
style="left: 0px;"
156+
>
157+
158+
This is a tooltip.
159+
160+
</div>
161+
162+
163+
</span>
164+
165+
166+
</body>
167+
`;
168+
169+
exports[`Tooltips #handleClose -> Tooltip Blur/MouseOut will hide hovered tooltip if second is focused at the same time 1`] = `
170+
<body>
171+
172+
173+
<span
174+
class="tooltip"
175+
data-tooltip="new-tooltip"
176+
>
177+
178+
179+
<button
180+
aria-describedby="new-tooltip"
181+
class="tooltip-trigger"
182+
data-target="new-tooltip"
183+
>
184+
Tooltip Button
185+
</button>
186+
187+
188+
<div
189+
class="tooltip-box"
190+
data-visible="false"
191+
id="new-tooltip"
192+
role="tooltip"
193+
style="left: 0px;"
194+
>
195+
196+
This is a tooltip.
197+
198+
</div>
199+
200+
201+
</span>
202+
203+
204+
<span
205+
class="tooltip"
206+
data-tooltip="new-tooltip10"
207+
>
208+
209+
210+
<button
211+
aria-describedby="new-tooltip10"
212+
class="tooltip-trigger"
213+
data-target="new-tooltip10"
214+
>
215+
Tooltip Button
216+
</button>
217+
218+
219+
<div
220+
class="tooltip-box"
221+
data-visible="true"
222+
id="new-tooltip10"
223+
role="tooltip"
224+
style="left: 0px;"
225+
>
226+
227+
This is a tooltip.
228+
229+
</div>
230+
231+
232+
</span>
233+
234+
235+
</body>
236+
`;
237+
100238
exports[`Tooltips #render -> Tooltip Focus/MouseOver opens tooltip on focus 1`] = `
101239
<div
102240
class="tooltip-box"

‎src/js/__tests__/tooltip.spec.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,23 @@ describe("Tooltips", () => {
111111
// When
112112
trigger1.focus()
113113
trigger2.focus()
114+
// Then
115+
expect(document.body).toMatchSnapshot()
116+
})
117+
118+
it("will hide hovered tooltip if second is focused at the same time", () => {
119+
// When
120+
global.simulateMouseEvent("mouseover", trigger1, true, true)
121+
trigger2.focus()
122+
// Then
123+
expect(document.body).toMatchSnapshot()
124+
})
125+
126+
it("will hide focused tooltip if second is hovered at the same time", () => {
127+
// When
128+
trigger1.focus()
129+
global.simulateMouseEvent("mouseover", trigger2, true, true)
130+
// Then
114131
expect(document.body).toMatchSnapshot()
115132
})
116133
})

‎src/js/tooltip.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,8 @@ export default class Tooltip {
103103
}
104104

105105
_render(event) {
106+
if (this._activeTooltip || this._activeTrigger) this._handleClose()
107+
106108
this._activeTrigger = event.target
107109

108110
const tooltipId = this._activeTrigger.getAttribute(Selectors.DATA_TARGET)

0 commit comments

Comments
 (0)