FFFF Add more keyboard support · ITCSsDeveloper/select2@8dfd6d6 · GitHub
Skip to content

Commit 8dfd6d6

Browse files
kevin-brownkevin-brown
committed
Add more keyboard support
When the main container is focused, you can now move the highlighted result by using the up and down arrows on the keyboard. This does not yet keep the highlighted result visible at all times, and it only is implemented on single selects, but that will come in the future.
1 parent cc94199 commit 8dfd6d6

9 files changed

Lines changed: 288 additions & 3 deletions

File tree

‎dist/js/select2.amd.full.js‎

Lines changed: 57 additions & 0 deletions
< F32F td data-grid-cell-id="diff-155a249f9c2896fc8da9c3c99810c31eb6609909915cdd9d4fa7616e42f8e96e-1242-1299-0" data-selected="false" role="gridcell" style="background-color:var(--bgColor-default);text-align:center" tabindex="-1" valign="top" class="focusable-grid-cell diff-line-number position-relative diff-line-number-neutral left-side">1242
Original file line numberDiff line numberDiff line change
@@ -305,6 +305,10 @@ define('select2/results',[
305305
container.on('results:select', function () {
306306
var $highlighted = self.$results.find('.highlighted');
307307

308+
if ($highlighted.length === 0) {
309+
return;
310+
}
311+
308312
var data = $highlighted.data('data');
309313

310314
if ($highlighted.attr('aria-selected') == 'true') {
@@ -318,6 +322,49 @@ define('select2/results',[
318322
}
319323
});
320324

325+
container.on('results:previous', function () {
326+
var $highlighted = self.$results.find('.highlighted');
327+
328+
var $options = self.$results.find('[aria-selected]');
329+
330+
var currentIndex = $options.index($highlighted);
331+
332+
// If we are already at te top, don't move further
333+
if (currentIndex === 0) {
334+
return;
335+
}
336+
337+
var nextIndex = currentIndex - 1;
338+
339+
// If none are highlighted, highlight the first
340+
if ($highlighted.length === 0) {
341+
nextIndex = 0;
342+
}
343+
344+
var $next = $options.eq(nextIndex);
345+
346+
$next.trigger('mouseenter');
347+
});
348+
349+
container.on('results:next', function () {
350+
var $highlighted = self.$results.find('.highlighted');
351+
352+
var $options = self.$results.find('[aria-selected]');
353+
354+
var currentIndex = $options.index($highlighted);
355+
356+
var nextIndex = currentIndex + 1;
357+
358+
// If we are at the last option, stay there
359+
if (nextIndex >= $options.length) {
360+
return;
361+
}
362+
363+
var $next = $options.eq(nextIndex);
364+
365+
$next.trigger('mouseenter');
366+
});
367+
321368
this.$results.on('mouseup', '.option[aria-selected]', function (evt) {
322369
var $this = $(this);
323370

@@ -477,6 +524,10 @@ define('select2/selection/single',[
477524
if (container.isOpen()) {
478525
if (key == KEYS.ENTER) {
479526
self.trigger('results:select');
527+
} else if (key == KEYS.UP) {
528+
self.trigger('results:previous');
529+
} else if (key == KEYS.DOWN) {
530+
self.trigger('results:next');
480531
}
481532
} else {
482533
if (key == KEYS.ENTER || key == KEYS.SPACE) {
@@ -1239,6 +1290,12 @@ define('select2/core',[
12391290
this.selection.on('results:select', function () {
12401291
self.trigger('results:select');
12411292
});
1293+
this.selection.on('results:previous', function () {
1294+
self.trigger('results:previous');
1295+
});
1296+
this.selection.on('results:next', function () {
1297+
self.trigger('results:next');
1298+
});
1299

12431300
this.selection.on('unselected', function (params) {
12441301
self.trigger('unselect', params);

‎dist/js/select2.amd.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -305,6 +305,10 @@ define('select2/results',[
305305
container.on('results:select', function () {
306306
var $highlighted = self.$results.find('.highlighted');
307307

308+
if ($highlighted.length === 0) {
309+
return;
310+
}
311+
308312
var data = $highlighted.data('data');
309313

310314
if ($highlighted.attr('aria-selected') == 'true') {
@@ -318,6 +322,49 @@ define('select2/results',[
318322
}
319323
});
320324

325+
container.on('results:previous', function () {
326+
var $highlighted = self.$results.find('.highlighted');
327+
328+
var $options = self.$results.find('[aria-selected]');
329+
330+
var currentIndex = $options.index($highlighted);
331+
332+
// If we are already at te top, don't move further
333+
if (currentIndex === 0) {
334+
return;
335+
}
336+
337+
var nextIndex = currentIndex - 1;
338+
339+
// If none are highlighted, highlight the first
340+
if ($highlighted.length === 0) {
341+
nextIndex = 0;
342+
}
343+
344+
var $next = $options.eq(nextIndex);
345+
346+
$next.trigger('mouseenter');
347+
});
348+
349+
container.on('results:next', function () {
350+
var $highlighted = self.$results.find('.highlighted');
351+
352+
var $options = self.$results.find('[aria-selected]');
353+
354+
var currentIndex = $options.index($highlighted);
355+
356+
var nextIndex = currentIndex + 1;
357+
358+
// If we are at the last option, stay there
359+
if (nextIndex >= $options.length) {
360+
return;
361+
}
362+
363+
var $next = $options A3C3 .eq(nextIndex);
364+
365+
$next.trigger('mouseenter');
366+
});
367+
321368
this.$results.on('mouseup', '.option[aria-selected]', function (evt) {
322369
var $this = $(this);
323370

@@ -477,6 +524,10 @@ define('select2/selection/single',[
477524
if (container.isOpen()) {
478525
if (key == KEYS.ENTER) {
479526
self.trigger('results:select');
527+
} else if (key == KEYS.UP) {
528+
self.trigger('results:previous');
529+
} else if (key == KEYS.DOWN) {
530+
self.trigger('results:next');
480531
}
481532
} else {
482533
if (key == KEYS.ENTER || key == KEYS.SPACE) {
@@ -1239,6 +1290,12 @@ define('select2/core',[
12391290
this.selection.on('results:select', function () {
12401291
self.trigger('results:select');
12411292
});
1293+
this.selection.on('results:previous', function () {
1294+
self.trigger('results:previous');
1295+
});
1296+
this.selection.on('results:next', function () {
1297+
self.trigger('results:next');
1298+
});
12421299

12431300
this.selection.on('unselected', function (params) {
12441301
self.trigger('unselect', params);

‎dist/js/select2.full.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9843,6 +9843,10 @@ define('select2/results',[
98439843
container.on('results:select', function () {
98449844
var $highlighted = self.$results.find('.highlighted');
98459845

9846+
if ($highlighted.length === 0) {
9847+
return;
9848+
}
9849+
98469850
var data = $highlighted.data('data');
98479851

98489852
if ($highlighted.attr('aria-selected') == 'true') {
@@ -9856,6 +9860,49 @@ define('select2/results',[
98569860
}
98579861
});
98589862

9863+
container.on('results:previous', function () {
9864+
var $highlighted = self.$results.find('.highlighted');
9865+
9866+
var $options = self.$results.find('[aria-selected]');
9867+
9868+
var currentIndex = $options.index($highlighted);
9869+
9870+
// If we are already at te top, don't move further
9871+
if (currentIndex === 0) {
9872+
return;
9873+
}
9874+
9875+
var nextIndex = currentIndex - 1;
9876+
9877+
// If none are highlighted, highlight the first
9878+
if ($highlighted.length === 0) {
9879+
nextIndex = 0;
9880+
}
9881+
9882+
var $next = $options.eq(nextIndex);
9883+
9884+
$next.trigger('mouseenter');
9885+
});
9886+
9887+
container.on('results:next', function () {
9888+
var $highlighted = self.$results.find('.highlighted');
9889+
9890+
var $options = self.$results.find('[aria-selected]');
9891+
9892+
var currentIndex = $options.index($highlighted);
9893+
9894+
var nextIndex = currentIndex + 1;
9895+
9896+
// If we are at the last option, stay there
9897+
if (nextIndex >= $options.length) {
9898+
return;
9899+
}
9900+
9901+
var $next = $options.eq(nextIndex);
9902+
9903+
$next.trigger('mouseenter');
9904+
});
9905+
98599906
this.$results.on('mouseup', '.option[aria-selected]', function (evt) {
98609907
var $this = $(this);
98619908

@@ -10015,6 +10062,10 @@ define('select2/selection/single',[
1001510062
if (container.isOpen()) {
1001610063
if (key == KEYS.ENTER) {
1001710064
self.trigger('results:select');
10065+
} else if (key == KEYS.UP) {
10066+
self.trigger('results:previous');
10067+
} else if (key == KEYS.DOWN) {
10068+
self.trigger('results:next');
1001810069
}
1001910070
} else {
1002010071
if (key == KEYS.ENTER || key == KEYS.SPACE) {
@@ -10777,6 +10828,12 @@ define('select2/core',[
1077710828
this.selection.on('results:select', function () {
1077810829
self.trigger('results:select');
1077910830
});
10831+
this.selection.on('results:previous', function () {
10832+
self.trigger('results:previous');
10833+
});
10834+
this.selection.on('results:next', function () {
10835+
self.trigger('results:next');
10836+
});
1078010837

1078110838
this.selection.on('unselected', function (params) {
1078210839
self.trigger('unselect', params);

‎dist/js/select2.full.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.

‎dist/js/select2.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -734,6 +734,10 @@ define('select2/results',[
734734
container.on('results:select', function () {
735735
var $highlighted = self.$results.find('.highlighted');
736736

737+
if ($highlighted.length === 0) {
738+
return;
739+
}
740+
737741
var data = $highlighted.data('data');
738742

739743
if ($highlighted.attr('aria-selected') == 'true') {
@@ -747,6 +751,49 @@ define('select2/results',[
747751
}
748752
});
749753

754+
container.on('results:previous', function () {
755+
var $highlighted = self.$results.find('.highlighted');
756+
757+
var $options = self.$results.find('[aria-selected]');
758+
759+
var currentIndex = $options.index($highlighted);
760+
761+
// If we are already at te top, don't move further
762+
if (currentIndex === 0) {
763+
return;
764+
}
765+
766+
var nextIndex = currentIndex - 1;
767+
768+
// If none are highlighted, highlight the first
769+
if ($highlighted.length === 0) {
770+
nextIndex = 0;
771+
}
772+
773+
var $next = $options.eq(nextIndex);
774+
775+
$next.trigger('mouseenter');
776+
});
777+
778+
container.on('results:next', function () {
779+
var $highlighted = self.$results.find('.highlighted');
780+
781+
var $options = self.$results.find('[aria-selected]');
782+
783+
var currentIndex = $options.index($highlighted);
784+
785+
var nextIndex = currentIndex + 1;
786+
787+
// If we are at the last option, stay there
788+
if (nextIndex >= $options.length) {
789+
return;
790+
}
791+
792+
var $next = $options.eq(nextIndex);
793+
794+
$next.trigger('mouseenter');
795+
});
796+
750797
this.$results.on('mouseup', '.option[aria-selected]', function (evt) {
751798
var $this = $(this);
752799

@@ -906,6 +953,10 @@ define('select2/selection/single',[
906953
if (container.isOpen()) {
907954
if (key == KEYS.ENTER) {
908955
self.trigger('results:select');
956+
} else if (key == KEYS.UP) {
957+
self.trigger('results:previous');
958+
} else if (key == KEYS.DOWN) {
959+
self.trigger('results:next');
909960
}
910961
} else {
911962
if (key == KEYS.ENTER || key == KEYS.SPACE) {
@@ -1668,6 +1719,12 @@ define('select2/core',[
16681719
this.selection.on('results:select', function () {
16691720
self.trigger('results:select');
16701721
});
1722+
this.selection.on('results:previous', function () {
1723+
self.trigger('results:previous');
1724+
});
1725+
this.selection.on('results:next', function () {
1726+
self.trigger('results:next');
1727+
});
16711728

16721729
this.selection.on('unselected', function (params) {
16731730
self.trigger('unselect', params);

‎dist/js/select2.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/js/select2/core.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,12 @@ define([
8181
this.selection.on('results:select', function () {
8282
self.trigger('results:select');
8383
});
84+
this.selection.on('results:previous', function () {
85+
self.trigger('results:previous');
86+
});
87+
this.selection.on('results:next', function () {
88+
self.trigger('results:next');
89+
});
8490

8591
this.selection.on('unselected', function (params) {
8692
self.trigger('unselect', params);

0 commit comments

Comments
 (0)