Skip to content

Add option changing TAB-key behaviour: Focus on the next tabindex, instead of selecting the top-suggestion #181

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add option changing TAB-key behaviour: Focus on the next tabindex, instead of selecting the top-suggestion #181

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions dist/bloodhound.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
/*!
* typeahead.js 1.2.0
* https://github.com/twitter/typeahead.js
* Copyright 2013-2017 Twitter, Inc. and other contributors; Licensed MIT
* typeahead.js 1.2.1
* https://github.com/corejavascript/typeahead.js
* Copyright 2013-2018 Twitter, Inc. and other contributors; Licensed MIT
*/


(function(root, factory) {
if (typeof define === "function" && define.amd) {
define([ "jquery" ], function(a0) {
return root["Bloodhound"] = factory(a0);
});
} else if (typeof exports === "object") {
} else if (typeof module === "object" && module.exports) {
module.exports = factory(require("jquery"));
} else {
root["Bloodhound"] = factory(root["jQuery"]);
Expand Down Expand Up @@ -158,7 +159,7 @@
noop: function() {}
};
}();
var VERSION = "1.2.0";
var VERSION = "1.2.1";
var tokenizers = function() {
"use strict";
return {
Expand Down
9 changes: 5 additions & 4 deletions dist/bloodhound.min.js
View file
Open in desktop

Large diffs are not rendered by default.

19 changes: 11 additions & 8 deletions dist/typeahead.bundle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
/*!
* typeahead.js 1.2.0
* https://github.com/twitter/typeahead.js
* Copyright 2013-2017 Twitter, Inc. and other contributors; Licensed MIT
* typeahead.js 1.2.1
* https://github.com/corejavascript/typeahead.js
* Copyright 2013-2018 Twitter, Inc. and other contributors; Licensed MIT
*/


(function(root, factory) {
if (typeof define === "function" && define.amd) {
define([ "jquery" ], function(a0) {
return root["Bloodhound"] = factory(a0);
});
} else if (typeof exports === "object") {
} else if (typeof module === "object" && module.exports) {
module.exports = factory(require("jquery"));
} else {
root["Bloodhound"] = factory(root["jQuery"]);
Expand Down Expand Up @@ -158,7 +159,7 @@
noop: function() {}
};
}();
var VERSION = "1.2.0";
var VERSION = "1.2.1";
var tokenizers = function() {
"use strict";
return {
Expand Down Expand Up @@ -956,7 +957,7 @@
define([ "jquery" ], function(a0) {
return factory(a0);
});
} else if (typeof exports === "object") {
} else if (typeof module === "object" && module.exports) {
module.exports = factory(require("jquery"));
} else {
factory(root["jQuery"]);
Expand Down Expand Up @@ -2114,6 +2115,7 @@
this.menu = o.menu;
this.enabled = true;
this.autoselect = !!o.autoselect;
this.tabAutocomplete = o.tabAutocomplete !== false;
this.active = false;
this.input.hasFocus() && this.activate();
this.dir = this.input.getLangDir();
Expand Down Expand Up @@ -2203,7 +2205,7 @@
var $selectable;
if ($selectable = this.menu.getActiveSelectable()) {
this.select($selectable) && $e.preventDefault();
} else if ($selectable = this.menu.getTopSelectable()) {
} else if (this.tabAutocomplete && ($selectable = this.menu.getTopSelectable())) {
this.autocomplete($selectable) && $e.preventDefault();
}
},
Expand Down Expand Up @@ -2439,7 +2441,8 @@
menu: menu,
eventBus: eventBus,
minLength: o.minLength,
autoselect: o.autoselect
autoselect: o.autoselect,
tabAutocomplete: o.tabAutocomplete !== false
}, www);
$input.data(keys.www, www);
$input.data(keys.typeahead, typeahead);
Expand Down
11 changes: 6 additions & 5 deletions dist/typeahead.bundle.min.js
View file
Open in desktop

Large diffs are not rendered by default.

15 changes: 9 additions & 6 deletions dist/typeahead.jquery.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
/*!
* typeahead.js 1.2.0
* https://github.com/twitter/typeahead.js
* Copyright 2013-2017 Twitter, Inc. and other contributors; Licensed MIT
* typeahead.js 1.2.1
* https://github.com/corejavascript/typeahead.js
* Copyright 2013-2018 Twitter, Inc. and other contributors; Licensed MIT
*/


(function(root, factory) {
if (typeof define === "function" && define.amd) {
define([ "jquery" ], function(a0) {
return factory(a0);
});
} else if (typeof exports === "object") {
} else if (typeof module === "object" && module.exports) {
module.exports = factory(require("jquery"));
} else {
factory(root["jQuery"]);
Expand Down Expand Up @@ -1167,6 +1168,7 @@
this.menu = o.menu;
this.enabled = true;
this.autoselect = !!o.autoselect;
this.tabAutocomplete = o.tabAutocomplete !== false;
this.active = false;
this.input.hasFocus() && this.activate();
this.dir = this.input.getLangDir();
Expand Down Expand Up @@ -1256,7 +1258,7 @@
var $selectable;
if ($selectable = this.menu.getActiveSelectable()) {
this.select($selectable) && $e.preventDefault();
} else if ($selectable = this.menu.getTopSelectable()) {
} else if (this.tabAutocomplete && ($selectable = this.menu.getTopSelectable())) {
this.autocomplete($selectable) && $e.preventDefault();
}
},
Expand Down Expand Up @@ -1492,7 +1494,8 @@
menu: menu,
eventBus: eventBus,
minLength: o.minLength,
autoselect: o.autoselect
autoselect: o.autoselect,
tabAutocomplete: o.tabAutocomplete !== false
}, www);
$input.data(keys.www, www);
$input.data(keys.typeahead, typeahead);
Expand Down
9 changes: 5 additions & 4 deletions dist/typeahead.jquery.min.js
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 6 additions & 0 deletions doc/jquery_typeahead.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,12 @@ When initializing a typeahead, there are a number of options you can configure.

* `autoselect` – If `true`, the first suggestion will be selected when pressing the Enter key.

* `tabAutocomplete` - Optional, defaults to `true`.
Pressing the TAB-key within the input-field selects the top most entry
from the suggestion list. If you set this option to false, tab does what tab
usually is expected to do: change the focus on the html-element with the
next tabindex

* `minLength` – The minimum character length needed before suggestions start
getting rendered. Defaults to `1`.

Expand Down
3 changes: 2 additions & 1 deletion src/typeahead/plugin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,8 @@
menu: menu,
eventBus: eventBus,
minLength: o.minLength,
autoselect: o.autoselect
autoselect: o.autoselect,
tabAutocomplete: o.tabAutocomplete !== false
}, www);

$input.data(keys.www, www);
Expand Down
8 changes: 4 additions & 4 deletions src/typeahead/typeahead.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@ var Typeahead = (function() {

this.autoselect = !!o.autoselect;

this.tabAutocomplete = o.tabAutocomplete !== false;

// activate the typeahead on init if the input has focus
this.active = false;
this.input.hasFocus() && this.activate();
Expand Down Expand Up @@ -174,7 +176,7 @@ var Typeahead = (function() {
$e.preventDefault();
$e.stopPropagation();
}
} else if(this.autoselect) {
} else if (this.autoselect) {
if (this.select(this.menu.getTopSelectable())) {
$e.preventDefault();
$e.stopPropagation();
Expand All @@ -187,9 +189,7 @@ var Typeahead = (function() {

if ($selectable = this.menu.getActiveSelectable()) {
this.select($selectable) && $e.preventDefault();
}

else if ($selectable = this.menu.getTopSelectable()) {
} else if (this.tabAutocomplete && ($selectable = this.menu.getTopSelectable())) {
this.autocomplete($selectable) && $e.preventDefault();
}
},
Expand Down
37 changes: 27 additions & 10 deletions test/typeahead/typeahead_spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -476,16 +476,33 @@ describe('Typeahead', function() {
expect(payload.preventDefault).not.toHaveBeenCalled();
});

it('should autocomplete to top suggestion', function() {
var $el;

$el = $('<foo>');
spyOn(this.view, 'autocomplete');
this.menu.getTopSelectable.andReturn($el);

this.input.trigger(eventName, payload);

expect(this.view.autocomplete).toHaveBeenCalledWith($el);
it('should autocomplete to top suggestion on default (option tabAutocomplete not set)', function() {
var $el;
$el = $('<foo>');
spyOn(this.view, 'autocomplete');
this.menu.getTopSelectable.andReturn($el);
this.input.trigger(eventName, payload);
expect(this.view.autocomplete).toHaveBeenCalledWith($el);
Copy link
Contributor

@jcrben jcrben Mar 26, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This test would be more durable if we could read the resulting HTML and find that the text is there, as I'm doing with tests using enzyme... just because the view was called with the $el does not mean it actually autocompleted right?

Particularly with a loosely-maintained library like this, it's important to have reliable tests - I recommend writing an integration test https://github.com/corejavascript/typeahead.js/tree/master/test/integration

I think @jesperronn tried to revive integration tests but ran into a travis issue

});

it('should autocomplete to top suggestion if option tabAutocomplete is true)', function() {
this.view.tabAutocomplete = true;
var $el;
$el = $('<foo>');
spyOn(this.view, 'autocomplete');
this.menu.getTopSelectable.andReturn($el);
this.input.trigger(eventName, payload);
expect(this.view.autocomplete).toHaveBeenCalledWith($el);
});

it('should not autocomplete to top suggestion if option tabAutocomplete is false', function() {
this.view.tabAutocomplete = false;
var $el;
$el = $('<foo>');
spyOn(this.view, 'autocomplete');
this.menu.getTopSelectable.andReturn($el);
this.input.trigger(eventName, payload);
expect(this.view.autocomplete).not.toHaveBeenCalledWith($el);
});

it('should prevent default behavior of DOM event if autocompletion succeeds', function() {
Expand Down