@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.
@@ -45,6 +45,11 @@ const styles = css `
45
45
  text-overflow: ellipsis;
46
46
  white-space: nowrap;
47
47
  }
48
+
49
+ :host([disabled]) {
50
+ pointer-events: none;
51
+ }
52
+
48
53
  :host([disabled]),
49
54
  :host([disabled]:hover),
50
55
  :host([disabled]:active),
@@ -52,7 +52,6 @@ const styles = [
52
52
  :host([disabled]) {
53
53
  color: var(--mdc-navmenuitem-disabled-color);
54
54
  background-color: var(--mdc-navmenuitem-disabled-background-color);
55
- pointer-events: none;
56
55
  }
57
56
 
58
57
  :host([active][disabled]) {
@@ -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
- const firstOption = this.getFirstValidOption();
355
- this.focusAndUpdateTabIndexes(firstOption);
356
- event.preventDefault();
355
+ optionToFocus = this.getFirstValidOption();
357
356
  break;
358
357
  }
359
358
  case KEYS.END: {
360
- const lastOption = this.getLastValidOption();
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
- this.focusAndUpdateTabIndexes(options[newIndex]);
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
- this.focusAndUpdateTabIndexes(options[newIndex]);
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
- this.focusAndUpdateTabIndexes(options[newIndex]);
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
- this.focusAndUpdateTabIndexes(options[newIndex]);
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.