Skip to content

Commit ac0c72f

Browse files
fcaballerofcaballero
committed
fix(search-enabled) keyboard navigation does not work when search-enabled is false
Closes angular-ui#375 PRs angular-ui#1114 and angular-ui#1109
1 parent 2525bfa commit ac0c72f

File tree

6 files changed

+69
-46
lines changed

6 files changed

+69
-46
lines changed

‎src/bootstrap/match.tpl.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="ui-select-match" ng-hide="$select.open" ng-disabled="$select.disabled" ng-class="{'btn-default-focus':$select.focus}">
1+
<div class="ui-select-match" ng-hide="$select.open && $select.searchEnabled" ng-disabled="$select.disabled" ng-class="{'btn-default-focus':$select.focus}">
22
<span tabindex="-1"
33
class="btn btn-default form-control ui-select-toggle"
44
aria-label="{{ $select.baseTitle }} activate"

‎src/bootstrap/select.tpl.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,10 @@
66
aria-owns="ui-select-choices-{{ $select.generatedId }}"
77
aria-activedescendant="ui-select-choices-row-{{ $select.generatedId }}-{{ $select.activeIndex }}"
88
class="form-control ui-select-search"
9+
ng-class="{'ui-select-offscreen':!$select.searchEnabled}"
910
placeholder="{{$select.placeholder}}"
1011
ng-model="$select.search"
11-
ng-show="$select.searchEnabled && $select.open">
12+
ng-show="$select.open">
1213
<div class="ui-select-choices"></div>
1314
<div class="ui-select-no-choice"></div>
1415
</div>

‎src/common.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,15 @@ body > .select2-container.open {
9999
margin-top: -2px; /* FIXME hardcoded value :-/ */
100100
}
101101

102+
.ui-select-container[theme="selectize"] .ui-select-search-hidden{
103+
opacity: 0;
104+
height: 0;
105+
min-height: 0;
106+
padding: 0;
107+
margin: 0;
108+
border:0;
109+
}
110+
102111
/* Bootstrap theme */
103112

104113
/* Helper class to show styles when focus */

‎src/select2/select.tpl.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@
66
<div class="ui-select-match"></div>
77
<div class="ui-select-dropdown select2-drop select2-with-searchbox select2-drop-active"
88
ng-class="{'select2-display-none': !$select.open}">
9-
<div class="select2-search" ng-show="$select.searchEnabled">
9+
<div class="select2-search" ng-class="{'ui-select-offscreen':!$select.searchEnabled}">
1010
<input type="text" autocomplete="off" autocorrect="false" autocapitalize="off" spellcheck="false"
11-
role="combobox"
12-
aria-expanded="true"
13-
aria-owns="ui-select-choices-{{ $select.generatedId }}"
14-
aria-label="{{ $select.baseTitle }}"
15-
aria-activedescendant="ui-select-choices-row-{{ $select.generatedId }}-{{ $select.activeIndex }}"
11+
role="combobox"
12+
aria-expanded="true"
13+
aria-owns="ui-select-choices-{{ $select.generatedId }}"
14+
aria-label="{{ $select.baseTitle }}"
15+
aria-activedescendant="ui-select-choices-row-{{ $select.generatedId }}-{{ $select.activeIndex }}"
1616
class="ui-select-search select2-input"
1717
ng-model="$select.search">
1818
</div>

‎src/selectize/select.tpl.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@
55
<div class="ui-select-match"></div>
66
<input type="text" autocomplete="off" tabindex="-1"
77
class="ui-select-search ui-select-toggle"
8+
ng-class="{'ui-select-search-hidden':!$select.searchEnabled}"
89
ng-click="$select.toggle($event)"
910
placeholder="{{$select.placeholder}}"
1011
ng-model="$select.search"
11-
ng-hide="!$select.searchEnabled || ($select.selected && !$select.open)"
12+
ng-hide="$select.selected && !$select.open"
1213
ng-disabled="$select.disabled"
1314
aria-label="{{ $select.baseTitle }}">
1415
</div>

‎test/select.spec.js

Lines changed: 49 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -412,21 +412,21 @@ describe('ui-select tests', function() {
412412
expect(getMatchLabel(el)).toEqual('Samantha');
413413
});
414414

415-
it('should correctly render initial state with track by $index', function () {
416-
417-
var el = compileTemplate(
418-
'<ui-select ng-model="selection.selected"> \
419-
<ui-select-match placeholder="Pick one...">{{$select.selected.name}}</ui-select-match> \
420-
<ui-select-choices repeat="person in people track by $index"> \
421-
{{person.email}} \
422-
</ui-select-choices> \
423-
</ui-select>'
424-
);
425-
426-
openDropdown(el);
427-
428-
var generatedId = el.scope().$select.generatedId;
429-
expect($(el).find('[id="ui-select-choices-row-' + generatedId + '-0"]').length).toEqual(1);
415+
it('should correctly render initial state with track by $index', function () {
416+
417+
var el = compileTemplate(
418+
'<ui-select ng-model="selection.selected"> \
419+
<ui-select-match placeholder="Pick one...">{{$select.selected.name}}</ui-select-match> \
420+
<ui-select-choices repeat="person in people track by $index"> \
421+
{{person.email}} \
422+
</ui-select-choices> \
423+
</ui-select>'
424+
);
425+
426+
openDropdown(el);
427+
428+
var generatedId = el.scope().$select.generatedId;
429+
expect($(el).find('[id="ui-select-choices-row-' + generatedId + '-0"]').length).toEqual(1);
430430
});
431431

432432
it('should utilize wrapper directive ng-model', function() {
@@ -1530,12 +1530,12 @@ describe('ui-select tests', function() {
15301530

15311531
it('should show search input when true', function() {
15321532
setupSelectComponent(true, 'selectize');
1533-
expect($(el).find('.ui-select-search')).not.toHaveClass('ng-hide');
1533+
expect($(el).find('.ui-select-search')).not.toHaveClass('ui-select-search-hidden');
15341534
});
15351535

15361536
it('should hide search input when false', function() {
15371537
setupSelectComponent(false, 'selectize');
1538-
expect($(el).find('.ui-select-search')).toHaveClass('ng-hide');
1538+
expect($(el).find('.ui-select-search')).toHaveClass('ui-select-search-hidden');
15391539
});
15401540

15411541
});
@@ -1544,12 +1544,12 @@ describe('ui-select tests', function() {
15441544

15451545
it('should show search input when true', function() {
15461546
setupSelectComponent('true', 'select2');
1547-
expect($(el).find('.select2-search')).not.toHaveClass('ng-hide');
1547+
expect($(el).find('.select2-search')).not.toHaveClass('ui-select-offscreen');
15481548
});
15491549

15501550
it('should hide search input when false', function() {
15511551
setupSelectComponent('false', 'select2');
1552-
expect($(el).find('.select2-search')).toHaveClass('ng-hide');
1552+
expect($(el).find('.select2-search')).toHaveClass('ui-select-offscreen');
15531553
});
15541554

15551555
});
@@ -1559,13 +1559,25 @@ describe('ui-select tests', function() {
15591559
it('should show search input when true', function() {
15601560
setupSelectComponent('true', 'bootstrap');
15611561
clickMatch(el);
1562-
expect($(el).find('.ui-select-search')).not.toHaveClass('ng-hide');
1562+
expect($(el).find('.ui-select-search')).not.toHaveClass('ui-select-offscreen');
1563+
});
1564+
1565+
it('should hide match template when is true', function() {
1566+
setupSelectComponent('true', 'bootstrap');
1567+
clickMatch(el);
1568+
expect($(el).find('.ui-select-match')).toHaveClass('ng-hide');
15631569
});
15641570

15651571
it('should hide search input when false', function() {
15661572
setupSelectComponent('false', 'bootstrap');
15671573
clickMatch(el);
1568-
expect($(el).find('.ui-select-search')).toHaveClass('ng-hide');
1574+
expect($(el).find('.ui-select-search')).toHaveClass('ui-select-offscreen');
1575+
});
1576+
1577+
it('should show match template when is false', function() {
1578+
setupSelectComponent('false', 'bootstrap');
1579+
clickMatch(el);
1580+
expect($(el).find('.ui-select-match')).not.toHaveClass('ng-hide');
15691581
});
15701582

15711583
});
@@ -1607,42 +1619,42 @@ describe('ui-select tests', function() {
16071619
expect(el.find('.ui-select-match-item').length).toBe(0);
16081620
});
16091621

1610-
it('should render intial state with data-multiple attribute', function () {
1611-
// ensure match template has been loaded by having more than one selection
1612-
scope.selection.selectedMultiple = [scope.people[0], scope.people[1]];
1613-
1622+
it('should render intial state with data-multiple attribute', function () {
1623+
// ensure match template has been loaded by having more than one selection
1624+
scope.selection.selectedMultiple = [scope.people[0], scope.people[1]];
1625+
16141626
var el = compileTemplate(
16151627
'<ui-select data-multiple ng-model="selection.selectedMultiple" theme="bootstrap" style="width: 800px;"> \
16161628
<ui-select-match placeholder="Pick one...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match> \
16171629
<ui-select-choices repeat="person in people | filter: $select.search"> \
16181630
<div ng-bind-html="person.name | highlight: $select.search"></div> \
16191631
<div ng-bind-html="person.email | highlight: $select.search"></div> \
16201632
</ui-select-choices> \
1621-
</ui-select>'
1622-
);
1623-
1633+
</ui-select>'
1634+
);
1635+
16241636
expect(el).toHaveClass('ui-select-multiple');
16251637
expect(el.scope().$select.selected.length).toBe(2);
1626-
expect(el.find('.ui-select-match-item').length).toBe(2);
1638+
expect(el.find('.ui-select-match-item').length).toBe(2);
16271639
});
16281640

1629-
it('should render intial state with x-multiple attribute', function () {
1630-
// ensure match template has been loaded by having more than one selection
1631-
scope.selection.selectedMultiple = [scope.people[0], scope.people[1]];
1632-
1641+
it('should render intial state with x-multiple attribute', function () {
1642+
// ensure match template has been loaded by having more than one selection
1643+
scope.selection.selectedMultiple = [scope.people[0], scope.people[1]];
1644+
16331645
var el = compileTemplate(
16341646
'<ui-select x-multiple ng-model="selection.selectedMultiple" theme="bootstrap" style="width: 800px;"> \
16351647
<ui-select-match placeholder="Pick one...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match> \
16361648
<ui-select-choices repeat="person in people | filter: $select.search"> \
16371649
<div ng-bind-html="person.name | highlight: $select.search"></div> \
16381650
<div ng-bind-html="person.email | highlight: $select.search"></div> \
16391651
</ui-select-choices> \
1640-
</ui-select>'
1641-
);
1642-
1652+
</ui-select>'
1653+
);
1654+
16431655
expect(el).toHaveClass('ui-select-multiple');
16441656
expect(el.scope().$select.selected.length).toBe(2);
1645-
expect(el.find('.ui-select-match-item').length).toBe(2);
1657+
expect(el.find('.ui-select-match-item').length).toBe(2);
16461658
});
16471659

16481660
it('should set model as an empty array if ngModel isnt defined after an item is selected', function () {

0 commit comments

Comments
 (0)