Skip to content

Commit 237985b

Browse files
running-coderrunning-coder
committed
Fix #434 item value in the onCancel callback is undefined
1 parent ba694cd commit 237985b

File tree

4 files changed

+166
-61
lines changed

4 files changed

+166
-61
lines changed

‎dist/jquery.typeahead.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/jquery.typeahead.js‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* Licensed under the MIT license
55
*
66
* @author Tom Bertrand
7-
* @version 2.10.4 (2018-4-16)
7+
* @version 2.10.4 (2018-7-19)
88
* @link http://www.runningcoder.org/jquerytypeahead/
99
*/
1010
(function (factory) {
@@ -734,8 +734,9 @@
734734
scope.helper.executeCallback.call(
735735
scope,
736736
scope.options.callback.onCancel,
737-
[scope.node, e]
737+
[scope.node, scope.item, e]
738738
);
739+
scope.item = null;
739740
}
740741

741742
scope.options.cancelButton &&
@@ -796,7 +797,6 @@
796797
this.rawQuery = this.rawQuery.replace(/^\s+/, "");
797798

798799
if (this.rawQuery !== this.query) {
799-
this.item = null;
800800
this.query = this.rawQuery;
801801
}
802802
},
@@ -2419,10 +2419,6 @@
24192419
return;
24202420
}
24212421

2422-
// if (scope.options.multiselect) {
2423-
// scope.items.push(item);
2424-
// scope.comparedItems.push(scope.getMultiselectComparedData(item));
2425-
// } else {
24262422
if (!scope.options.multiselect) {
24272423
scope.item = item;
24282424
}
@@ -2458,6 +2454,9 @@
24582454
.val(scope.query)
24592455
.focus();
24602456

2457+
scope.options.cancelButton &&
2458+
scope.toggleCancelButtonVisibility();
2459+
24612460
scope.helper.executeCallback.call(
24622461
scope,
24632462
scope.options.callback.onClickAfter,
@@ -3310,7 +3309,6 @@
33103309
if (this.isContentEditable) {
33113310
this.node.text("");
33123311
}
3313-
this.item = null;
33143312
this.query = "";
33153313
this.rawQuery = "";
33163314
},

‎test/integration/callback.oncancel.test.js‎

Lines changed: 80 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,97 @@
1-
const $ = require("jquery");
1+
const $ = require('jquery');
22
const Typeahead = require('../../src/jquery.typeahead');
33

44
describe('Typeahead onCancel Callback Tests', () => {
5-
'use strict';
5+
'use strict';
66

7-
let myTypeahead,
8-
onCancel;
7+
let myTypeahead, onCancel, myItem;
98

10-
beforeAll(() => {
9+
beforeAll(() => {
10+
document.body.innerHTML = `<form>
11+
<div class="typeahead__container">
12+
<div class="typeahead__field">
13+
<div class="typeahead__query">
14+
<input class="js-typeahead"
15+
name="q"
16+
type="search"
17+
autofocus
18+
autocomplete="off">
19+
</div>
20+
<div class="typeahead__button">
21+
<button type="submit">
22+
<span class="typeahead__search-icon"></span>
23+
</button>
24+
</div>
25+
</div>
26+
</div>
27+
</form>`;
1128

12-
document.body.innerHTML = '<input class="js-typeahead">';
13-
14-
myTypeahead = $.typeahead({
15-
input: '.js-typeahead',
16-
minLength: 0,
17-
generateOnLoad: true,
18-
display: ['display'],
19-
template: '{{display}} {{details}}',
20-
emptyTemplate: "no result for {{query}}",
21-
source: [
22-
{
23-
"id": "1",
24-
"display": "Test"
25-
},
26-
{
27-
"id": "2",
28-
"display": "callback"
29-
}
30-
],
31-
callback: {
32-
onCancel: function (node, event) {
33-
onCancel = true;
34-
}
35-
}
36-
});
29+
myTypeahead = $.typeahead({
30+
input: '.js-typeahead',
31+
minLength: 0,
32+
generateOnLoad: true,
33+
display: ['display'],
34+
template: '{{display}} {{details}}',
35+
emptyTemplate: 'no result for {{query}}',
36+
source: [
37+
{
38+
id: '1',
39+
display: 'Test',
40+
},
41+
{
42+
id: '2',
43+
display: 'callback',
44+
},
45+
],
46+
callback: {
47+
onCancel: function(node, item, event) {
48+
onCancel = true;
49+
myItem = item;
50+
},
51+
},
3752
});
53+
});
3854

39-
beforeEach(() => {
40-
onCancel = false
41-
});
55+
beforeEach(() => {
56+
onCancel = false;
57+
});
4258

43-
it('Should call onCancel callback when ESC is pressed', () => {
44-
myTypeahead.node.val('test');
45-
myTypeahead.node.trigger('input');
59+
it('Should call onCancel callback when ESC is pressed', () => {
60+
myTypeahead.node.val('test');
61+
myTypeahead.node.trigger('input');
4662

47-
myTypeahead.node.trigger($.Event("keydown", { keyCode: 27 }));
48-
expect(onCancel).toBeTruthy();
49-
});
63+
myTypeahead.node.trigger($.Event('keydown', { keyCode: 27 }));
64+
expect(onCancel).toBeTruthy();
65+
});
5066

51-
it('Should call onCancel callback if cancel button is clicked', () => {
52-
myTypeahead.node.val('test');
53-
myTypeahead.node.trigger('input');
67+
it('Should call onCancel callback if cancel button is clicked', () => {
68+
myTypeahead.node.val('test');
69+
myTypeahead.node.trigger('input');
5470

55-
myTypeahead.node.parent().find('.typeahead__cancel-button').trigger('mousedown')
56-
expect(onCancel).toBeTruthy();
57-
});
71+
myTypeahead.node
72+
.parent()
73+
.find('.typeahead__cancel-button')
74+
.trigger('mousedown');
75+
expect(onCancel).toBeTruthy();
76+
});
5877

59-
it('Should call onCancel callback if a character is deleted and the input is empty', () => {
60-
myTypeahead.node.val('test');
61-
myTypeahead.node.trigger('input');
78+
it('Should call onCancel callback if an item is selected and the input is cleared', () => {
79+
myTypeahead.node.val('test');
80+
myTypeahead.node.trigger('input');
6281

63-
myTypeahead.node.val('');
64-
myTypeahead.node.trigger('input');
82+
let items = myTypeahead.container.find('.' + myTypeahead.options.selector.item);
83+
items
84+
.eq(0)
85+
.find('a')
86+
.trigger('click');
6587

66-
expect(onCancel).toBeTruthy();
88+
myTypeahead.node.trigger($.Event('keydown', { keyCode: 27 }));
89+
expect(onCancel).toBeTruthy();
90+
expect(myItem).toEqual({
91+
matchedKey: 'display',
92+
id: '1',
93+
display: 'Test',
94+
group: 'group',
6795
});
96+
});
6897
});

‎test/option/cancelButton.test.js‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
const $ = require("jquery");
2+
const Typeahead = require('../../src/jquery.typeahead');
3+
4+
describe('Typeahead cancelButton option Tests', () => {
5+
let myTypeahead;
6+
7+
describe('Cancel button is enabled', () => {
8+
9+
beforeAll(() => {
10+
document.body.innerHTML = `<form>
11+
<div class="typeahead__container">
12+
<div class="typeahead__field">
13+
<div class="typeahead__query">
14+
<input class="js-typeahead"
15+
name="q"
16+
type="search"
17+
autofocus
18+
autocomplete="off">
19+
</div>
20+
<div class="typeahead__button">
21+
<button type="submit">
22+
<span class="typeahead__search-icon"></span>
23+
</button>
24+
</div>
25+
</div>
26+
</div>
27+
</form>`;
28+
29+
myTypeahead = $.typeahead({
30+
input: '.js-typeahead',
31+
minLength: 1,
32+
cancelButton: true,
33+
source: {
34+
data: ['test1', 'test2', 'test3', 'test4', 'test5']
35+
}
36+
});
37+
38+
});
39+
40+
it('Should show/hide the cancel button when search is empty/not empty', () => {
41+
expect(myTypeahead.container.find(`.${myTypeahead.options.selector.cancelButton}`)).toHaveLength(1);
42+
expect(myTypeahead.container.hasClass('cancel')).toBeFalsy();
43+
44+
myTypeahead.node.val('t');
45+
myTypeahead.node.trigger('input');
46+
47+
expect(myTypeahead.container.hasClass('cancel')).toBeTruthy();
48+
49+
myTypeahead.node.trigger($.Event("keydown", { keyCode: 8 }));
50+
51+
expect(myTypeahead.container.hasClass('cancel')).toBeTruthy();
52+
});
53+
54+
it('Should show the cancel button when an item is selected', () => {
55+
myTypeahead.node.val('t');
56+
myTypeahead.node.trigger('input');
57+
58+
let items = myTypeahead.container.find('.' + myTypeahead.options.selector.item);
59+
items.eq(0).find('a').trigger('click');
60+
61+
expect(myTypeahead.container.find(`.${myTypeahead.options.selector.cancelButton}`)).toHaveLength(1);
62+
expect(myTypeahead.container.hasClass('cancel')).toBeTruthy();
63+
});
64+
65+
it('Should show the cancel button when an item is selected', () => {
66+
myTypeahead.node.val('t');
67+
myTypeahead.node.trigger('input');
68+
69+
let items = myTypeahead.container.find('.' + myTypeahead.options.selector.item);
70+
items.eq(0).find('a').trigger('click');
71+
72+
myTypeahead.node.trigger($.Event("keydown", { keyCode: 27 }));
73+
74+
expect(myTypeahead.container.find(`.${myTypeahead.options.selector.cancelButton}`)).toHaveLength(1);
75+
expect(myTypeahead.container.hasClass('cancel')).toBeFalsy();
76+
});
77+
});
78+
});

0 commit comments

Comments
 (0)