@fluid-topics/ft-combobox 2.0.33 → 2.0.35

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.
Files changed (4) hide show
  1. package/build/ft-combobox.js +92 -86
  2. package/build/ft-combobox.light.js +663 -660
  3. package/build/ft-combobox.min.js +724 -721
  4. package/package.json +4 -4
package/build/ft-combobox.js CHANGED
@@ -10,7 +10,7 @@ import { repeat } from "lit/directives/repeat.js";
10
10
  import { classMap } from "lit/directives/class-map.js";
11
11
  import { ifDefined } from "lit/directives/if-defined.js";
12
12
  import { when } from "lit/directives/when.js";
13
- import { Debouncer, FtLitElement, numberProperty, screenReaderStyles, } from "@fluid-topics/ft-wc-utils";
13
+ import { Debouncer, FtLitElement, ignoreComposingEvents, numberProperty, screenReaderStyles, } from "@fluid-topics/ft-wc-utils";
14
14
  import { styles } from "./ft-combobox.styles";
15
15
  import { FtInputLabel } from "@fluid-topics/ft-input-label";
16
16
  import { FtRipple } from "@fluid-topics/ft-ripple";
@@ -69,91 +69,6 @@ export class FtCombobox extends withI18n(FtLitElement) {
69
69
  this.closeListbox(true);
70
70
  }
71
71
  };
72
- this.onComboboxKeyDown = (event) => {
73
- if (event.ctrlKey || event.shiftKey) {
74
- return;
75
- }
76
- let handled = false;
77
- switch (event.key) {
78
- case "Enter":
79
- this.commitSelectionFromEnter();
80
- handled = true;
81
- break;
82
- case "ArrowDown":
83
- case "Down": {
84
- this.moveFocusToNextSuggestion(event);
85
- handled = true;
86
- break;
87
- }
88
- case "ArrowUp":
89
- case "Up": {
90
- this.moveFocusToPreviousSuggestion(event);
91
- handled = true;
92
- break;
93
- }
94
- case "Escape":
95
- case "Esc":
96
- this.handleEscapeKey();
97
- handled = true;
98
- break;
99
- case "Tab":
100
- this.handleTabKey();
101
- break;
102
- case "Home":
103
- this.moveCaretToHome();
104
- handled = true;
105
- break;
106
- case "End": {
107
- this.moveCaretToEnd();
108
- handled = true;
109
- break;
110
- }
111
- }
112
- if (handled) {
113
- event.stopPropagation();
114
- event.preventDefault();
115
- }
116
- };
117
- this.onComboboxKeyUp = (event) => {
118
- if (event.key === "Escape" || event.key === "Esc") {
119
- return;
120
- }
121
- let handled = false;
122
- switch (event.key) {
123
- case "Backspace":
124
- this.setVisualFocusCombobox();
125
- handled = true;
126
- break;
127
- // Do nothing on Arrow navigation keyup to preserve listbox visual focus
128
- case "ArrowDown":
129
- case "Down":
130
- case "ArrowUp":
131
- case "Up":
132
- handled = true;
133
- break;
134
- case "ArrowLeft":
135
- case "Enter":
136
- case "Left":
137
- case "ArrowRight":
138
- case "Right":
139
- case "Home":
140
- case "End":
141
- this.setVisualFocusCombobox();
142
- handled = true;
143
- break;
144
- default:
145
- // For printable keys, the @input handler will update the list.
146
- // We only maintain visual focus here for printable characters (not arrows, etc.).
147
- if (this.isPrintableCharacter(event.key) && this.input.value.length) {
148
- this.setVisualFocusCombobox();
149
- }
150
- break;
151
- }
152
- if (handled) {
153
- event.stopPropagation();
154
- event.preventDefault();
155
- }
156
- };
157
72
  this.onComboboxClick = () => {
158
73
  if (this.isOpen) {
159
74
  this.closeListbox(true);
@@ -642,6 +557,91 @@ export class FtCombobox extends withI18n(FtLitElement) {
642
557
  const length = this.input.value.length;
643
558
  this.input.setSelectionRange(length, length);
644
559
  }
560
+ onComboboxKeyDown(event) {
561
+ if (event.ctrlKey || event.shiftKey) {
562
+ return;
563
+ }
564
+ let handled = false;
565
+ switch (event.key) {
566
+ case "Enter":
567
+ this.commitSelectionFromEnter();
568
+ handled = true;
569
+ break;
570
+ case "ArrowDown":
571
+ case "Down": {
572
+ this.moveFocusToNextSuggestion(event);
573
+ handled = true;
574
+ break;
575
+ }
576
+ case "ArrowUp":
577
+ case "Up": {
578
+ this.moveFocusToPreviousSuggestion(event);
579
+ handled = true;
580
+ break;
581
+ }
582
+ case "Escape":
583
+ case "Esc":
584
+ this.handleEscapeKey();
585
+ handled = true;
586
+ break;
587
+ case "Tab":
588
+ this.handleTabKey();
589
+ break;
590
+ case "Home":
591
+ this.moveCaretToHome();
592
+ handled = true;
593
+ break;
594
+ case "End": {
595
+ this.moveCaretToEnd();
596
+ handled = true;
597
+ break;
598
+ }
599
+ }
600
+ if (handled) {
601
+ event.stopPropagation();
602
+ event.preventDefault();
603
+ }
604
+ }
605
+ onComboboxKeyUp(event) {
606
+ if (event.key === "Escape" || event.key === "Esc") {
607
+ return;
608
+ }
609
+ let handled = false;
610
+ switch (event.key) {
611
+ case "Backspace":
612
+ this.setVisualFocusCombobox();
613
+ handled = true;
614
+ break;
615
+ // Do nothing on Arrow navigation keyup to preserve listbox visual focus
616
+ case "ArrowDown":
617
+ case "Down":
618
+ case "ArrowUp":
619
+ case "Up":
620
+ handled = true;
621
+ break;
622
+ case "ArrowLeft":
623
+ case "Enter":
624
+ case "Left":
625
+ case "ArrowRight":
626
+ case "Right":
627
+ case "Home":
628
+ case "End":
629
+ this.setVisualFocusCombobox();
630
+ handled = true;
631
+ break;
632
+ default:
633
+ // For printable keys, the @input handler will update the list.
634
+ // We only maintain visual focus here for printable characters (not arrows, etc.).
635
+ if (this.isPrintableCharacter(event.key) && this.input.value.length) {
636
+ this.setVisualFocusCombobox();
637
+ }
638
+ break;
639
+ }
640
+ if (handled) {
641
+ event.stopPropagation();
642
+ event.preventDefault();
643
+ }
644
+ }
645
645
  focus() {
646
646
  var _a;
647
647
  (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus();
@@ -753,3 +753,9 @@ __decorate([
753
753
  __decorate([
754
754
  query(".ft-combobox--listbox")
755
755
  ], FtCombobox.prototype, "listbox", void 0);
756
+ __decorate([
757
+ ignoreComposingEvents()
758
+ ], FtCombobox.prototype, "onComboboxKeyDown", null);
759
+ __decorate([
760
+ ignoreComposingEvents()
761
+ ], FtCombobox.prototype, "onComboboxKeyUp", null);