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

Commit 1f54bf6

Browse files
devversionThomasBurleson
authored andcommitted
fix(autocomplete): fix autocomplete tabindex support
- We should always apply to the root directive a tabindex of `-1` - We should direct the tabindex to the input (if tabindex is specified) - Added accompanying tests Fixes #6999. Closes #7005
1 parent bc55ac9 commit 1f54bf6

File tree

2 files changed

+46
-1
lines changed

2 files changed

+46
-1
lines changed

src/components/autocomplete/autocomplete.spec.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,49 @@ describe('<md-autocomplete>', function() {
163163
element.remove();
164164
}));
165165

166+
it('should forward the tabindex to the input', inject(function() {
167+
var scope = createScope(null, {inputId: 'custom-input-id'});
168+
var template =
169+
'<md-autocomplete ' +
170+
'md-input-id="{{inputId}}" ' +
171+
'md-selected-item="selectedItem" ' +
172+
'md-search-text="searchText" ' +
173+
'md-items="item in match(searchText)" ' +
174+
'md-item-text="item.display" ' +
175+
'tabindex="3"' +
176+
'placeholder="placeholder">' +
177+
'<span md-highlight-text="searchText">{{item.display}}</span>' +
178+
'</md-autocomplete>';
179+
180+
var element = compile(template, scope);
181+
var input = element.find('input');
182+
183+
expect(input.attr('tabindex')).toBe('3');
184+
185+
element.remove();
186+
}));
187+
188+
it('should always set the tabindex of the autcomplete to `-1`', inject(function() {
189+
var scope = createScope(null, {inputId: 'custom-input-id'});
190+
var template =
191+
'<md-autocomplete ' +
192+
'md-input-id="{{inputId}}" ' +
193+
'md-selected-item="selectedItem" ' +
194+
'md-search-text="searchText" ' +
195+
'md-items="item in match(searchText)" ' +
196+
'md-item-text="item.display" ' +
197+
'tabindex="3"' +
198+
'placeholder="placeholder">' +
199+
'<span md-highlight-text="searchText">{{item.display}}</span>' +
200+
'</md-autocomplete>';
201+
202+
var element = compile(template, scope);
203+
204+
expect(element.attr('tabindex')).toBe('-1');
205+
206+
element.remove();
207+
}));
208+
166209
it('should clear value when hitting escape', inject(function($mdConstant, $timeout) {
167210
var scope = createScope();
168211
var template = '\

src/components/autocomplete/js/autocompleteDirective.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,9 @@ function MdAutocomplete () {
156156
// Set our variable for the link function above which runs later
157157
element.hasNotFoundTemplate = !!noItemsTemplate;
158158

159-
if (!attr.hasOwnProperty('tabindex')) element.attr('tabindex', '-1');
159+
// Always set our tabindex of the autocomplete directive to -1, because our input
160+
// will hold the actual tabindex.
161+
element.attr('tabindex', '-1');
160162

161163
return '\
162164
<md-autocomplete-wrap\

0 commit comments

Comments
 (0)