@momentum-design/components 0.102.7 → 0.102.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser/index.js +6 -2
- package/dist/browser/index.js.map +3 -3
- package/dist/components/listitem/listitem.styles.js +5 -0
- package/dist/components/navmenuitem/navmenuitem.styles.js +0 -1
- package/dist/components/select/select.component.js +12 -14
- package/dist/custom-elements.json +1317 -1317
- package/dist/react/index.d.ts +3 -3
- package/dist/react/index.js +3 -3
- package/package.json +1 -1
@@ -349,54 +349,52 @@ class Select extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)) {
|
|
349
349
|
* @param event - The keyboard event.
|
350
350
|
*/
|
351
351
|
handlePopoverKeydown(event) {
|
352
|
+
let optionToFocus = null;
|
352
353
|
switch (event.key) {
|
353
354
|
case KEYS.HOME: {
|
354
|
-
|
355
|
-
this.focusAndUpdateTabIndexes(firstOption);
|
356
|
-
event.preventDefault();
|
355
|
+
optionToFocus = this.getFirstValidOption();
|
357
356
|
break;
|
358
357
|
}
|
359
358
|
case KEYS.END: {
|
360
|
-
|
361
|
-
this.focusAndUpdateTabIndexes(lastOption);
|
362
|
-
event.preventDefault();
|
359
|
+
optionToFocus = this.getLastValidOption();
|
363
360
|
break;
|
364
361
|
}
|
365
362
|
case KEYS.ARROW_DOWN: {
|
366
363
|
const options = this.getAllValidOptions();
|
367
364
|
const currentIndex = options.findIndex(option => option === event.target);
|
368
365
|
const newIndex = Math.min(currentIndex + 1, options.length - 1);
|
369
|
-
|
370
|
-
event.preventDefault();
|
366
|
+
optionToFocus = options[newIndex];
|
371
367
|
break;
|
372
368
|
}
|
373
369
|
case KEYS.ARROW_UP: {
|
374
370
|
const options = this.getAllValidOptions();
|
375
371
|
const currentIndex = options.findIndex(option => option === event.target);
|
376
372
|
const newIndex = Math.max(currentIndex - 1, 0);
|
377
|
-
|
378
|
-
event.preventDefault();
|
373
|
+
optionToFocus = options[newIndex];
|
379
374
|
break;
|
380
375
|
}
|
381
376
|
case KEYS.PAGE_DOWN: {
|
382
377
|
const options = this.getAllValidOptions();
|
383
378
|
const currentIndex = options.findIndex(option => option === event.target);
|
384
379
|
const newIndex = Math.min(currentIndex + 10, options.length - 1);
|
385
|
-
|
386
|
-
event.preventDefault();
|
380
|
+
optionToFocus = options[newIndex];
|
387
381
|
break;
|
388
382
|
}
|
389
383
|
case KEYS.PAGE_UP: {
|
390
384
|
const options = this.getAllValidOptions();
|
391
385
|
const currentIndex = options.findIndex(option => option === event.target);
|
392
386
|
const newIndex = Math.max(currentIndex - 10, 0);
|
393
|
-
|
394
|
-
event.preventDefault();
|
387
|
+
optionToFocus = options[newIndex];
|
395
388
|
break;
|
396
389
|
}
|
397
390
|
default:
|
398
391
|
break;
|
399
392
|
}
|
393
|
+
if (optionToFocus) {
|
394
|
+
this.focusAndUpdateTabIndexes(optionToFocus);
|
395
|
+
event.preventDefault();
|
396
|
+
event.stopPropagation();
|
397
|
+
}
|
400
398
|
}
|
401
399
|
/**
|
402
400
|
* Focuses the given option and updates the tabindex for all options.
|