Skip to content

Commit eea7242

Browse files
thetthet
authored
Merge pull request #1033 from Patternslib/scrum-464
fix(pat tooltip): Fix problem with misaligned tooltip arrow with remote content.
2 parents 0ce9b24 + 4656100 commit eea7242

File tree

2 files changed

+27
-22
lines changed

2 files changed

+27
-22
lines changed

‎src/pat/tooltip/tooltip.js‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ export default Base.extend({
6969
ignoreAttributes: true,
7070
interactive: true,
7171
onHide: this._onHide.bind(this),
72-
onShow: this._onShow.bind(this),
72+
onShow: await this._onShow.bind(this),
7373
onMount: this._onMount.bind(this),
7474
trigger: "click",
7575
};
@@ -106,6 +106,7 @@ export default Base.extend({
106106

107107
show() {
108108
// Show this tooltip
109+
// API method.
109110
this.tippy.show();
110111
},
111112

@@ -117,6 +118,7 @@ export default Base.extend({
117118

118119
destroy() {
119120
// Remove this tooltip
121+
// API method.
120122
this.tippy.destroy();
121123
},
122124

@@ -244,11 +246,7 @@ export default Base.extend({
244246
registry.scan(this.tippy.popper);
245247
},
246248

247-
async _onMount() {
248-
if (this.options.source === "ajax") {
249-
await this.get_content(); // + _initialize_content
250-
}
251-
249+
_onMount() {
252250
// Notify parent patterns about injected content.
253251
// Do not call pat-inject's handler, because all necessary
254252
// initialization after injection is done here.
@@ -290,7 +288,7 @@ export default Base.extend({
290288
this._initialize_content();
291289
},
292290

293-
_onShow() {
291+
async _onShow() {
294292
if (this.options.closing !== "auto" && this.options.trigger === "hover") {
295293
// no auto-close when hovering when closing mode is "sticky" or "close-button".
296294
this.tippy.setProps({ trigger: "click" });
@@ -300,6 +298,10 @@ export default Base.extend({
300298
this.el.classList.remove(this.inactive_class);
301299
this.el.classList.add(this.active_class);
302300
}
301+
302+
if (this.options.source === "ajax") {
303+
await this._get_content();
304+
}
303305
},
304306

305307
_onHide() {

‎src/pat/tooltip/tooltip.test.js‎

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1024,7 +1024,7 @@ describe("pat-tooltip", () => {
10241024
const instance = new pattern($el);
10251025
await utils.timeout(1);
10261026

1027-
const spy_content = jest.spyOn(instance, "get_content");
1027+
const spy_content = jest.spyOn(instance, "_get_content");
10281028
const spy_show = jest.spyOn(instance.tippy.props, "onShow");
10291029

10301030
testutils.click($el);
@@ -1057,7 +1057,7 @@ describe("pat-tooltip", () => {
10571057
const instance = new pattern($el);
10581058
await utils.timeout(1);
10591059

1060-
const spy_content = jest.spyOn(instance, "get_content");
1060+
const spy_content = jest.spyOn(instance, "_get_content");
10611061
const spy_show = jest.spyOn(instance.tippy.props, "onShow");
10621062

10631063
testutils.click($el);
@@ -1100,7 +1100,7 @@ describe("pat-tooltip", () => {
11001100
const instance = new pattern(el);
11011101
await utils.timeout(1);
11021102

1103-
const spy_content = jest.spyOn(instance, "get_content");
1103+
const spy_content = jest.spyOn(instance, "_get_content");
11041104
const spy_show = jest.spyOn(instance.tippy.props, "onShow");
11051105

11061106
el.click();
@@ -1144,7 +1144,7 @@ describe("pat-tooltip", () => {
11441144
const instance = new pattern(el);
11451145
await utils.timeout(1);
11461146

1147-
const spy_content = jest.spyOn(instance, "get_content");
1147+
const spy_content = jest.spyOn(instance, "_get_content");
11481148
const spy_show = jest.spyOn(instance.tippy.props, "onShow");
11491149

11501150
el.click();
@@ -1177,14 +1177,16 @@ describe("pat-tooltip", () => {
11771177
const instance = new pattern($el);
11781178
await utils.timeout(1);
11791179

1180-
const spy_content = jest.spyOn(instance, "get_content");
1180+
const spy_content = jest.spyOn(instance, "_get_content");
1181+
const spy_get_content = jest.spyOn(instance, "get_content");
11811182
const spy_show = jest.spyOn(instance.tippy.props, "onShow");
11821183

11831184
testutils.click($el);
11841185
await utils.timeout(1); // wait a tick for async fetch
11851186

11861187
expect(global.fetch).toHaveBeenCalled();
11871188
expect(spy_content).toHaveBeenCalled();
1189+
expect(spy_get_content).not.toHaveBeenCalled();
11881190
expect(spy_show).toHaveBeenCalled();
11891191
expect(document.querySelector(".tippy-box .tippy-content").textContent).toBe(
11901192
"External content fetched via an HTTP request."
@@ -1198,6 +1200,7 @@ describe("pat-tooltip", () => {
11981200

11991201
expect(global.fetch).toHaveBeenCalled();
12001202
expect(spy_content).toHaveBeenCalled();
1203+
expect(spy_get_content).toHaveBeenCalled();
12011204
expect(spy_show).toHaveBeenCalled();
12021205
expect(document.querySelector(".tippy-box .tippy-content").textContent).toBe(
12031206
"Update!"
@@ -1252,9 +1255,9 @@ describe("pat-tooltip", () => {
12521255
const spy_prevent = jest
12531256
.spyOn(click, "preventDefault")
12541257
.mockImplementation(() => call_order.push("preventDefault"));
1255-
const spy_get_content = jest
1256-
.spyOn(instance, "get_content")
1257-
.mockImplementation(() => call_order.push("get_content"));
1258+
const spy_content = jest
1259+
.spyOn(instance, "_get_content")
1260+
.mockImplementation(() => call_order.push("_get_content"));
12581261

12591262
$el[0].dispatchEvent(click);
12601263
await utils.timeout(1); // wait a tick for async fetch
@@ -1263,11 +1266,11 @@ describe("pat-tooltip", () => {
12631266
$el[0].dispatchEvent(click);
12641267
await utils.timeout(1); // wait a tick for async fetch
12651268

1266-
expect(call_order.filter(it => it === "get_content").length).toEqual(1); // prettier-ignore
1269+
expect(call_order.filter(it => it === "_get_content").length).toEqual(1); // prettier-ignore
12671270
expect(call_order.filter(it => it === "preventDefault").length).toEqual(3); // prettier-ignore
12681271

12691272
spy_prevent.mockRestore();
1270-
spy_get_content.mockRestore();
1273+
spy_content.mockRestore();
12711274
global.fetch.mockRestore();
12721275
delete global.fetch;
12731276
});
@@ -1287,7 +1290,7 @@ describe("pat-tooltip", () => {
12871290
const instance = new pattern($el);
12881291
await utils.timeout(1);
12891292

1290-
const spy_ajax = jest.spyOn(instance, "get_content");
1293+
const spy_ajax = jest.spyOn(instance, "_get_content");
12911294
const spy_show = jest.spyOn(instance.tippy.props, "onShow");
12921295

12931296
testutils.click($el);
@@ -1315,7 +1318,7 @@ describe("pat-tooltip", () => {
13151318
const instance = await new pattern($el);
13161319
await utils.timeout(1);
13171320

1318-
const spy_ajax = jest.spyOn(instance, "get_content");
1321+
const spy_ajax = jest.spyOn(instance, "_get_content");
13191322
const spy_show = jest.spyOn(instance.tippy.props, "onShow");
13201323

13211324
testutils.click($el);
@@ -1353,7 +1356,7 @@ this will be extracted.
13531356
const instance = new pattern($el);
13541357
await utils.timeout(1);
13551358

1356-
const spy_ajax = jest.spyOn(instance, "get_content");
1359+
const spy_ajax = jest.spyOn(instance, "_get_content");
13571360
const spy_show = jest.spyOn(instance.tippy.props, "onShow");
13581361

13591362
testutils.click($el);
@@ -1390,7 +1393,7 @@ this will be extracted.
13901393
const instance = new pattern($el);
13911394
await utils.timeout(1);
13921395

1393-
const spy_ajax = jest.spyOn(instance, "get_content");
1396+
const spy_ajax = jest.spyOn(instance, "_get_content");
13941397
const spy_fetch = jest.spyOn(window, "fetch");
13951398
const spy_show = jest.spyOn(instance.tippy.props, "onShow");
13961399

@@ -1435,7 +1438,7 @@ this will be extracted.
14351438
const instance = new pattern($el);
14361439
await utils.timeout(1);
14371440

1438-
const spy_ajax = jest.spyOn(instance, "get_content");
1441+
const spy_ajax = jest.spyOn(instance, "_get_content");
14391442
const spy_fetch = jest.spyOn(window, "fetch");
14401443
const spy_show = jest.spyOn(instance.tippy.props, "onShow");
14411444

0 commit comments

Comments
 (0)