@pine-ds/core 3.25.0 → 3.25.1

package/dist/collection/components/pds-combobox/pds-combobox.js

@@ -46,6 +46,8 @@ export class PdsCombobox {
         this.hideLabel = false;
         /**
          * Determines the combobox mode: 'filter' (filter options as you type) or 'select-only' (show all options).
+         * In filter mode, reopening the menu while the input still shows the label of the selected option temporarily lists
+         * all options until you type (so you can switch to a different choice without clearing the field first).
          * @default 'filter'
          */
         this.mode = 'filter';
@@ -148,8 +150,15 @@ export class PdsCombobox {
         this.optionEls = [];
         this.allItems = [];
         this.isUpdatingFromSelection = false;
+        /**
+         * In filter mode, after choosing an option the input still shows the label and would
+         * otherwise filter the list to matching substrings only. While this flag is true,
+         * the list shows every option until the user types (then normal filtering applies).
+         */
+        this.expandFilterListWhileOpen = false;
         this.handleInput = (e) => {
             const target = e.target;
+            this.clearExpandFilterList();
             this.displayText = target.value;
             this.isOpen = true;
             this.filterOptions();
@@ -165,19 +174,26 @@ export class PdsCombobox {
             // Open dropdown when input is clicked (but not when tabbed into)
             if (!this.isOpen) {
                 this.isOpen = true;
+                this.prepareExpandFilterListOnOpen();
                 this.filterOptions();
                 // Trigger initial fetch if async and no options loaded yet
                 if (this.asyncUrl && this.internalOptions.length === 0) {
                     this.debouncedFetchAsyncOptions(this.displayText, 1);
                 }
                 this.setInitialHighlightedIndex();
-                setTimeout(() => this.openDropdownPositioning(), 0);
+                setTimeout(() => {
+                    this.openDropdownPositioning();
+                    if (this.trigger === 'input' && this.expandFilterListWhileOpen && this.inputEl) {
+                        this.inputEl.select();
+                    }
+                }, 0);
             }
         };
         this.handleKeyDown = (e) => {
             if (!this.isOpen && (e.key === 'ArrowDown' || e.key === 'ArrowUp' || (e.altKey && e.key === 'ArrowDown'))) {
                 e.preventDefault();
                 this.isOpen = true;
+                this.prepareExpandFilterListOnOpen();
                 this.filterOptions();
                 // Set highlighted index immediately for testing
                 this.setInitialHighlightedIndex();
@@ -270,6 +286,7 @@ export class PdsCombobox {
                     e.preventDefault();
                     this.isOpen = false;
                     this.highlightedIndex = -1;
+                    this.clearExpandFilterList();
                     this.isArrowKeyNavigationMode = false; // Reset arrow-key navigation mode
                     this.restoreFocusToTrigger();
                     break;
@@ -277,6 +294,7 @@ export class PdsCombobox {
                     // Allow normal tab behavior to close dropdown and move focus
                     this.isOpen = false;
                     this.highlightedIndex = -1;
+                    this.clearExpandFilterList();
                     this.isArrowKeyNavigationMode = false; // Reset arrow-key navigation mode
                     break;
             }
@@ -308,6 +326,7 @@ export class PdsCombobox {
         this.onButtonTriggerClick = () => {
             this.isOpen = !this.isOpen;
             if (this.isOpen) {
+                this.prepareExpandFilterListOnOpen();
                 this.filterOptions();
                 // Trigger initial fetch if async and no options loaded yet
                 if (this.asyncUrl && this.internalOptions.length === 0) {
@@ -321,6 +340,7 @@ export class PdsCombobox {
             }
             else {
                 // Reset navigation mode when closing
+                this.clearExpandFilterList();
                 this.isArrowKeyNavigationMode = false;
             }
         };
@@ -330,6 +350,7 @@ export class PdsCombobox {
                 e.preventDefault();
                 e.stopPropagation(); // Prevent the event from bubbling and triggering click
                 this.isOpen = true;
+                this.prepareExpandFilterListOnOpen();
                 this.filterOptions();
                 // Set highlighted index immediately
                 this.setInitialHighlightedIndex();
@@ -344,6 +365,7 @@ export class PdsCombobox {
                 if (this.isOpen) {
                     this.isOpen = false;
                     this.highlightedIndex = -1;
+                    this.clearExpandFilterList();
                     this.updateAriaActiveDescendant(); // Clear aria-activedescendant
                     this.restoreFocusToTrigger();
                 }
@@ -371,6 +393,7 @@ export class PdsCombobox {
             if (!isRelatedTargetInCombobox && !isRelatedTargetInListbox) {
                 this.isOpen = false;
                 this.highlightedIndex = -1;
+                this.clearExpandFilterList();
                 this.isArrowKeyNavigationMode = false; // Reset arrow-key navigation mode
                 this.updateAriaActiveDescendant(); // Clear aria-activedescendant
                 // If there's a selected option but the display text doesn't match, restore the selected option's display text
@@ -768,7 +791,7 @@ export class PdsCombobox {
         if (this.allItems.length === 0 && this.optionEls.length > 0) {
             this.allItems = [...this.optionEls];
         }
-        if (this.mode === 'select-only') {
+        if (this.mode === 'select-only' || this.expandFilterListWhileOpen) {
             this.filteredItems = [...this.allItems];
         }
         else {
@@ -809,6 +832,23 @@ export class PdsCombobox {
         }
         this.highlightedIndex = -1;
     }
+    clearExpandFilterList() {
+        this.expandFilterListWhileOpen = false;
+    }
+    /**
+     * When reopening the dropdown in filter mode with the input still showing the
+     * committed selection label, show the full option list until the user edits the query.
+     */
+    prepareExpandFilterListOnOpen() {
+        if (this.mode === 'filter' &&
+            this.selectedOption &&
+            this.displayText === this.getOptionLabel(this.selectedOption)) {
+            this.expandFilterListWhileOpen = true;
+        }
+        else {
+            this.expandFilterListWhileOpen = false;
+        }
+    }
     openDropdownPositioning() {
         if (this.triggerEl && this.listboxEl) {
             // Apply width and max-height BEFORE positioning calculations
@@ -1086,6 +1126,7 @@ export class PdsCombobox {
         // The @Watch('selectedOption') will handle displayText, value, and form internals
         this.setSelectedOption(option);
         this.isOpen = false;
+        this.clearExpandFilterList();
         this.pdsComboboxChange.emit({ value: option.value });
     }
     renderDropdown() {
@@ -1244,10 +1285,10 @@ export class PdsCombobox {
         ]
             .filter(Boolean)
             .join(' ');
-        return (h(Host, { key: '6a8f372c89a896d2d7e67661e84053c4c95b93c9' }, h("div", { key: '7b4747885bfa9aaa6e698bf13b6cdf9d4e77b3b1', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.label && !this.hideLabel && (h("label", { key: '46acd60080458de682516becc6144b38675a3f2d', htmlFor: this.componentId, class: "pds-combobox__label" }, this.label)), this.trigger === 'input' ? (h("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, h("input", { ref: el => {
+        return (h(Host, { key: '28c9653028e7fd67ccd8361a84108fbe11b1303f' }, h("div", { key: 'd9a3d6c4d3ca1c6135501e702be8beeffcafdf0d', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.label && !this.hideLabel && (h("label", { key: '8832180ca4ee60506d464115aff2503d3aeb6c52', htmlFor: this.componentId, class: "pds-combobox__label" }, this.label)), this.trigger === 'input' ? (h("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, h("input", { ref: el => {
                 this.inputEl = el;
                 this.triggerEl = el;
-            }, class: "pds-combobox__input", type: "text", role: "combobox", "aria-autocomplete": "list", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), h("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (h("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (h("div", { class: triggerClass, style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), h("div", { key: '4e4bd7cb7139416f3f59b1c9736a1fad85c09c24', style: { display: 'none' } }, h("slot", { key: '79e4c181d161a56acba68e1f7ca932369e938e10', onSlotchange: () => this.updateOptions() })), this.renderDropdown())));
+            }, class: "pds-combobox__input", type: "text", role: "combobox", "aria-autocomplete": "list", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), h("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (h("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (h("div", { class: triggerClass, style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), h("div", { key: '3f2ac580f226fc9a0bf72539804d0b514a93f5b8', style: { display: 'none' } }, h("slot", { key: '075205fb4fed8d0e4aec43531593444c1ab8e1cd', onSlotchange: () => this.updateOptions() })), this.renderDropdown())));
     }
     static get is() { return "pds-combobox"; }
     static get encapsulation() { return "shadow"; }
@@ -1487,7 +1528,7 @@ export class PdsCombobox {
                             "name": "default",
                             "text": "'filter'"
                         }],
-                    "text": "Determines the combobox mode: 'filter' (filter options as you type) or 'select-only' (show all options)."
+                    "text": "Determines the combobox mode: 'filter' (filter options as you type) or 'select-only' (show all options).\nIn filter mode, reopening the menu while the input still shows the label of the selected option temporarily lists\nall options until you type (so you can switch to a different choice without clearing the field first)."
                 },
                 "getter": false,
                 "setter": false,