npm - @triptease/tt-combobox - Versions diffs - 5.6.0 → 5.6.2 - Mend

@triptease/tt-combobox 5.6.0 → 5.6.2

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 (7) hide show

package/CHANGELOG.md +12 -0
package/dist/src/TtCombobox.js +10 -3
package/dist/src/TtCombobox.js.map +1 -1
package/dist/src/types.d.ts +1 -1
package/dist/src/types.js.map +1 -1
package/package.json +1 -1
package/test/tt-combobox.test.ts +79 -0

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,17 @@
 # @triptease/tt-combobox
+## 5.6.2
+### Patch Changes
+- 9497296: Update the placeholder correctly after selecting filtered options
+## 5.6.1
+### Patch Changes
+- Fix types for `style` attribute in React to only accept React.CSSProperties object
 ## 5.6.0
 ### Minor Changes

package/dist/src/TtCombobox.js CHANGED Viewed

@@ -302,7 +302,7 @@ export class TtCombobox extends LitElement {
         return this.internals.validity.valid && !this.invalid;
     }
     _renderCombobox() {
-        const placeHolderValue = guard([this.placeholder, this.disabled, this.value, this.activeOptions.length, this.selectAllPlaceholder], () => {
+        const placeHolderValue = guard([this.placeholder, this.disabled, this.value, this.activeOptions.length, this.selectAllPlaceholder, this._filter], () => {
             if (this.placeholder) {
                 return this.placeholder;
             }
@@ -317,10 +317,17 @@ export class TtCombobox extends LitElement {
                     .find((option) => option.value === this.value[0])
                     ?.textContent?.trim();
             }
-            if (this._isAllSelected) {
+            // Count all selected values, excluding only those that correspond to permanently hidden options
+            const permanentlyHiddenValues = Array.from(this.options)
+                .filter((option) => option.hidden)
+                .map((option) => option.value);
+            const selectedCount = this.value.filter((val) => !permanentlyHiddenValues.includes(val)).length;
+            // Only show "All options selected" when truly all non-hidden options are selected
+            const totalSelectableCount = this.options.length - permanentlyHiddenValues.length;
+            if (this._filter === '' && selectedCount === totalSelectableCount && totalSelectableCount > 0) {
                 return this.selectAllPlaceholder || 'All options selected';
             }
-            return `${this._selectedVisibleOptions.length} options selected`;
+            return `${selectedCount} options selected`;
         });
         return html ` <input
       type="text"

package/dist/src/TtCombobox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TtCombobox.js","sourceRoot":"","sources":["../../src/TtCombobox.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, PropertyValues } from 'lit';\nimport { property, query, queryAll, queryAssignedElements, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { guard } from 'lit/directives/guard.js';\nimport { alert, chevronDown } from '@triptease/icons';\nimport { styles } from './styles.js';\nimport { TtOption } from './tt-option/TtOption.js';\n\nexport class TtCombobox extends LitElement {\n static styles = styles;\n\n static formAssociated = true;\n\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n @property({ type: Boolean })\n multiselect = false;\n\n @property({ type: Boolean })\n disabled = false;\n\n @property({ type: Boolean })\n invalid = false;\n\n @property({ type: Boolean, attribute: 'display-select-all' })\n displaySelectAll = false;\n\n @property({ type: Boolean })\n required = false;\n\n @property({ type: String })\n name = '';\n\n @property({ type: String, attribute: 'aria-labelledby' })\n ariaLabelledby = nothing;\n\n @property({ type: Boolean, attribute: 'hide-caret' })\n hideCaret = false;\n\n @property({ type: String })\n placeholder?: string;\n\n @property({ type: String, attribute: 'select-all-placeholder' })\n selectAllPlaceholder?: string;\n\n @property({ type: Boolean, attribute: 'open-upward' })\n openUpward = false;\n\n get form(): HTMLFormElement \| null {\n return this.internals.form;\n }\n\n @state()\n protected _activeOption: number = -1;\n\n @state()\n protected _expanded = false;\n\n @state()\n protected _filter: string = '';\n\n @queryAssignedElements({ slot: 'option', selector: 'option' })\n options!: Array<HTMLOptionElement>;\n\n @queryAssignedElements({ slot: 'option', selector: 'tt-option:not([disabled])' })\n activeOptions!: Array<HTMLOptionElement>;\n\n @queryAssignedElements({ slot: 'error' })\n protected errorElements!: Array<HTMLElement>;\n\n @queryAll('tt-option:not([hidden], [disabled])')\n protected _visibleOptions!: Array<TtOption>;\n\n @queryAll('tt-option:not([hidden], .select-all)')\n protected _visibleOptionsNotSelectAll!: Array<TtOption>;\n\n @queryAll('tt-option:not([disabled], .select-all)')\n protected _selectableOptions!: NodeListOf<TtOption>;\n\n @queryAll('tt-option:not([disabled], [hidden], .select-all)')\n protected _selectableVisibleOptions!: NodeListOf<TtOption>;\n\n @query('input[role=\"combobox\"]')\n protected _comboboxInput!: HTMLInputElement;\n\n @query('button:has(svg)')\n protected _chevronButton!: HTMLButtonElement;\n\n public internals: ReturnType<typeof this.attachInternals>;\n\n @property({ type: Array<string>, attribute: 'value' })\n public value: string[] = [];\n\n private get _isAllSelected(): boolean {\n return (\n Boolean(this._visibleOptionsNotSelectAll.length) &&\n Array.from(this._visibleOptionsNotSelectAll).every((option) => this.value.includes(option.value))\n );\n }\n\n protected get _selectedVisibleOptions(): Array<TtOption> {\n return Array.from(this._visibleOptions).filter((option) => this.value.includes(option.value));\n }\n\n protected get _selectedOptions(): Array<TtOption> {\n return Array.from(this._visibleOptionsNotSelectAll).filter((option) => this.value.includes(option.value));\n }\n\n private _slotObserver: MutationObserver = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (mutation.type === 'attributes') {\n this.requestUpdate('options');\n }\n });\n });\n\n constructor() {\n super();\n this.internals = this.attachInternals();\n }\n\n private _handleFocusOut(e: FocusEvent) {\n if (!this.shadowRoot!.contains(e.relatedTarget as Node \| null)) {\n this._expanded = false;\n }\n }\n\n private _onFocus() {\n this._comboboxInput.focus();\n }\n\n public connectedCallback() {\n super.connectedCallback();\n\n this.addEventListener('focus', this._onFocus);\n }\n\n public disconnectedCallback() {\n super.disconnectedCallback();\n\n this.removeEventListener('focus', this._onFocus);\n }\n\n protected firstUpdated(changedProperties: PropertyValues) {\n this.internals.setFormValue(JSON.stringify(this.value));\n\n this._reportValidity();\n this._listenForOptionChange();\n\n super.firstUpdated(changedProperties);\n }\n\n protected update(changedProperties: PropertyValues) {\n if (changedProperties.has('value')) {\n this._valueChanged();\n\n if (\n changedProperties.get('value') !== undefined &&\n JSON.stringify(changedProperties.get('value')) !== JSON.stringify(this.value)\n ) {\n this._dispatchSelectedOptions();\n this._reportValidity();\n }\n }\n\n if (changedProperties.has('_expanded') && changedProperties.get('_expanded') && !this._expanded) {\n this.internals.states.add('interacted');\n }\n\n if (changedProperties.has('options')) {\n this.updateComplete.then(() => {\n const selectedAssignedOptions = Array.from(this.options).filter((option) => option.selected);\n this.value = Array.from(new Set([...this.value, ...selectedAssignedOptions.map((option) => option.value!)]));\n this._listenForOptionChange();\n });\n }\n super.update(changedProperties);\n }\n\n private _valueChanged = () => {\n this._selectableOptions.forEach((option) => {\n if (this.value.includes(option.value!)) {\n this._checkOption(option);\n } else {\n this._uncheckOption(option);\n }\n });\n\n this.internals.setFormValue(JSON.stringify(this.value));\n };\n\n private _listenForOptionChange = () => {\n this.options.forEach((option) => {\n this._slotObserver.observe(option, { attributes: true, attributeFilter: ['selected', 'disabled', 'hidden'] });\n });\n };\n\n private _reportValidity() {\n if (this.required && !this.value.length) {\n const errorMessage = this.multiselect ? 'Please select at least one tt-option' : 'Please select an tt-option';\n\n this.internals.setValidity(\n {\n valueMissing: true,\n },\n errorMessage,\n this._comboboxInput\n );\n this.internals.states.add('--invalid');\n } else if (!this.internals.validity.valid) {\n this.internals.setValidity({});\n\n if (this.internals.states.has('--invalid')) {\n this.internals.states.delete('--invalid');\n }\n }\n }\n\n private get labels(): Array<HTMLElement> {\n return <Array<HTMLElement>>[...this.internals.labels];\n }\n\n private get labelContent(): string {\n if (this.ariaLabel !== null) {\n return this.ariaLabel;\n }\n\n return this.labels.map((label) => label.innerText).join(', ');\n }\n\n private _onKeyUp(event: KeyboardEvent) {\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n if (!this._expanded) {\n this._expanded = true;\n this._activeOption = -1;\n } else {\n this._activeOption = Math.min(this._visibleOptions.length - 1, this._activeOption + 1);\n }\n break;\n case 'ArrowUp':\n event.preventDefault();\n if (this._expanded) {\n this._activeOption = Math.max(0, this._activeOption - 1);\n }\n break;\n case 'Escape':\n event.preventDefault();\n if (this._expanded) {\n this._expanded = false;\n } else if (this._filter !== '') {\n this._filter = '';\n }\n break;\n case 'Enter':\n event.preventDefault();\n if (this._expanded) {\n this._visibleOptions[this._activeOption].click();\n }\n break;\n default:\n break;\n }\n }\n\n private _uncheckOption(option: HTMLElement) {\n if (option.dataset.deselectable !== 'true') return;\n\n option.setAttribute('aria-selected', 'false');\n const checkbox = <HTMLInputElement>option.querySelector('input[type=\"checkbox\"]');\n if (checkbox) {\n checkbox.checked = false;\n }\n }\n\n private _checkOption(option: HTMLElement) {\n if (!this.multiselect) {\n this._selectableOptions.forEach((opt) => {\n this._uncheckOption(opt);\n });\n }\n\n option.setAttribute('aria-selected', 'true');\n const checkbox = <HTMLInputElement>option.querySelector('input[type=\"checkbox\"]');\n if (checkbox) {\n checkbox.checked = true;\n }\n }\n\n private _getActiveOptionId(): string \| undefined {\n if (this._activeOption === -1 \|\| this._visibleOptions.length === 0) {\n return undefined;\n }\n\n const option = this._visibleOptions[this._activeOption];\n return option.id;\n }\n\n private _onClick() {\n this._expanded = !this._expanded;\n\n if (this._expanded) {\n (<HTMLElement>this.shadowRoot?.querySelector('input[role=\"combobox\"]'))?.focus();\n }\n }\n\n private _onChevronClick() {\n (<HTMLElement>this.shadowRoot?.querySelector('input[role=\"combobox\"]'))?.focus();\n }\n\n private _onClickOption(event: MouseEvent) {\n event.preventDefault();\n event.stopPropagation();\n\n const option = event.currentTarget as TtOption;\n if (option.disabled) return;\n\n const selectedValue = option.value as string;\n\n if (this.multiselect) {\n if (this.value.includes(selectedValue)) {\n this.value = this.value.filter((value) => value !== selectedValue);\n } else {\n this.value = [...this.value, selectedValue];\n }\n } else {\n this.value = [selectedValue];\n this._expanded = false;\n }\n }\n\n private _onInput(event: Event) {\n const input = event.target as HTMLInputElement;\n const filter = input.value;\n if (filter !== '' && !this._expanded) {\n this._expanded = true;\n }\n this._activeOption = -1;\n this._filter = filter;\n }\n\n private _dispatchSelectedOptions() {\n this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n })\n );\n }\n\n private _selectAll = (event: MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n // If filtering, and all visible options are selected, deselect only visible options\n // Else if filtering, select all visible options\n\n if (this._filter !== '' && this._isAllSelected) {\n const selectedVisibleValues = this._selectedVisibleOptions.map((option) => option.value);\n this.value = this.value.filter((value) => !selectedVisibleValues.includes(value));\n } else if (this._filter !== '') {\n this.value = Array.from(\n new Set([...this.value, ...Array.from(this._selectableVisibleOptions).map((option) => option.value)])\n );\n } else if (this.value.length === this._selectableOptions.length) {\n this.value = [];\n } else {\n this.value = Array.from(this._selectableOptions).map((option) => option.value);\n }\n };\n\n private get _isValid(): boolean {\n return this.internals.validity.valid && !this.invalid;\n }\n\n private _renderCombobox() {\n const placeHolderValue = guard(\n [this.placeholder, this.disabled, this.value, this.activeOptions.length, this.selectAllPlaceholder],\n () => {\n if (this.placeholder) {\n return this.placeholder;\n }\n\n if (this.disabled) {\n return 'Disabled';\n }\n if (!this.value.length) {\n return 'No options selected';\n }\n if (this.value.length === 1) {\n return Array.from(this._selectableVisibleOptions)\n .find((option) => option.value === this.value[0])\n ?.textContent?.trim();\n }\n\n if (this._isAllSelected) {\n return this.selectAllPlaceholder \|\| 'All options selected';\n }\n\n return `${this._selectedVisibleOptions.length} options selected`;\n }\n );\n\n return html` <input\n type=\"text\"\n id=\"${this.id}\"\n name=\"${this.name}\"\n autocomplete=\"off\"\n aria-label=\"${this.labelContent}\"\n aria-labelledby=\"${this.ariaLabelledby}\"\n role=\"combobox\"\n aria-controls=\"${this.id}-list\"\n aria-expanded=\"${this._expanded}\"\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n aria-disabled=\"${this.disabled}\"\n aria-invalid=\"${!this._isValid}\"\n aria-errormessage=\"${!this._isValid ? `error-msg-${this.id}` : nothing}\"\n aria-required=\"${this.required}\"\n ?disabled=${this.disabled}\n aria-activedescendant=\"${ifDefined(this._getActiveOptionId())}\"\n @input=\"${this._onInput}\"\n .value=\"${this._filter}\"\n .placeholder=\"${placeHolderValue}\"\n @focusout=\"${this._handleFocusOut}\"\n part=\"input\"\n class=${this.hideCaret ? 'hide-caret' : ''}\n />`;\n }\n\n private _renderSelectAll = () => {\n if (!this.multiselect \|\| !this.displaySelectAll) {\n return nothing;\n }\n const id = `${this.id}-option-select-all`;\n const active = this._getActiveOptionId() === id;\n const selected = this._isAllSelected;\n\n return html`\n <tt-option\n id=\"${id}\"\n class=\"select-all\"\n ?selected=${selected}\n ?active=${active}\n include-checkbox\n @click=\"${this._selectAll}\"\n exportparts=\"option, checkbox\"\n part=\"option\"\n value=\"select-all\"\n >Select all</tt-option\n >\n `;\n };\n\n private _renderOption(option: HTMLOptionElement) {\n const hidden = Boolean(\n (this._filter !== '' &&\n !option.value.toLowerCase().includes(this._filter.toLowerCase()) &&\n !option.innerText.toLowerCase().includes(this._filter.toLowerCase())) \|\|\n option.hidden\n );\n\n const id = `${this.id}-option-${option.value}`;\n const active = this._getActiveOptionId() === id;\n const selected = this.value.includes(option.value);\n\n return html`\n <tt-option\n id=\"${id}\"\n value=\"${option.value}\"\n ?selected=${selected}\n ?disabled=${option.disabled}\n ?active=${active}\n ?include-checkbox=${this.multiselect}\n ?hidden=${hidden}\n @click=\"${this._onClickOption}\"\n >\n ${unsafeHTML(option.innerHTML)}\n </tt-option>\n `;\n }\n\n private _renderChevron = () => html`\n <button\n type=\"button\"\n aria-label=\"Expand\"\n @click=\"${this._onChevronClick}\"\n aria-expanded=\"${this._expanded}\"\n aria-controls=\"${this.id}-list\"\n tabindex=\"-1\"\n ?disabled=${this.disabled}\n part=\"arrow\"\n >\n ${unsafeSVG(chevronDown)}\n </button>\n `;\n\n private _hasErrorContent(): boolean {\n return this.errorElements?.length > 0;\n }\n\n render() {\n return html`\n <div\n class=\"tt-combobox-container\"\n @focus=\"${this._onFocus}\"\n @keydown=\"${this._onKeyUp}\"\n @click=\"${this._onClick}\"\n aria-disabled=\"${this.disabled}\"\n part=\"container\"\n >\n <slot name=\"icon\" part=\"icon\"></slot>\n ${this._renderCombobox()} ${this._renderChevron()}\n <ul\n id=\"${this.id}-list\"\n role=\"listbox\"\n aria-multiselectable=\"${this.multiselect}\"\n aria-label=\"${this.labelContent}\"\n part=\"listbox\"\n ?data-open-upward=\"${this.openUpward}\"\n >\n ${this._renderSelectAll()} ${repeat(this.options, (opt) => opt.value, this._renderOption.bind(this))}\n\n <li part=\"no-results\" class=\"no-results\">No results</li>\n </ul>\n </div>\n <slot name=\"option\" @slotchange=${() => this.requestUpdate('options')}></slot>\n <div\n class=\"errormessage\"\n id=\"error-msg-${this.id}\"\n role=\"alert\"\n aria-atomic=\"true\"\n ?data-hidden=\"${!this._hasErrorContent()}\"\n part=\"error\"\n >\n ${unsafeSVG(alert)}\n <slot name=\"error\"></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tt-combobox': TtCombobox;\n }\n}\n"]}
1	+ {"version":3,"file":"TtCombobox.js","sourceRoot":"","sources":["../../src/TtCombobox.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing, PropertyValues } from 'lit';\nimport { property, query, queryAll, queryAssignedElements, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { guard } from 'lit/directives/guard.js';\nimport { alert, chevronDown } from '@triptease/icons';\nimport { styles } from './styles.js';\nimport { TtOption } from './tt-option/TtOption.js';\n\nexport class TtCombobox extends LitElement {\n static styles = styles;\n\n static formAssociated = true;\n\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n @property({ type: Boolean })\n multiselect = false;\n\n @property({ type: Boolean })\n disabled = false;\n\n @property({ type: Boolean })\n invalid = false;\n\n @property({ type: Boolean, attribute: 'display-select-all' })\n displaySelectAll = false;\n\n @property({ type: Boolean })\n required = false;\n\n @property({ type: String })\n name = '';\n\n @property({ type: String, attribute: 'aria-labelledby' })\n ariaLabelledby = nothing;\n\n @property({ type: Boolean, attribute: 'hide-caret' })\n hideCaret = false;\n\n @property({ type: String })\n placeholder?: string;\n\n @property({ type: String, attribute: 'select-all-placeholder' })\n selectAllPlaceholder?: string;\n\n @property({ type: Boolean, attribute: 'open-upward' })\n openUpward = false;\n\n get form(): HTMLFormElement \| null {\n return this.internals.form;\n }\n\n @state()\n protected _activeOption: number = -1;\n\n @state()\n protected _expanded = false;\n\n @state()\n protected _filter: string = '';\n\n @queryAssignedElements({ slot: 'option', selector: 'option' })\n options!: Array<HTMLOptionElement>;\n\n @queryAssignedElements({ slot: 'option', selector: 'tt-option:not([disabled])' })\n activeOptions!: Array<HTMLOptionElement>;\n\n @queryAssignedElements({ slot: 'error' })\n protected errorElements!: Array<HTMLElement>;\n\n @queryAll('tt-option:not([hidden], [disabled])')\n protected _visibleOptions!: Array<TtOption>;\n\n @queryAll('tt-option:not([hidden], .select-all)')\n protected _visibleOptionsNotSelectAll!: Array<TtOption>;\n\n @queryAll('tt-option:not([disabled], .select-all)')\n protected _selectableOptions!: NodeListOf<TtOption>;\n\n @queryAll('tt-option:not([disabled], [hidden], .select-all)')\n protected _selectableVisibleOptions!: NodeListOf<TtOption>;\n\n @query('input[role=\"combobox\"]')\n protected _comboboxInput!: HTMLInputElement;\n\n @query('button:has(svg)')\n protected _chevronButton!: HTMLButtonElement;\n\n public internals: ReturnType<typeof this.attachInternals>;\n\n @property({ type: Array<string>, attribute: 'value' })\n public value: string[] = [];\n\n private get _isAllSelected(): boolean {\n return (\n Boolean(this._visibleOptionsNotSelectAll.length) &&\n Array.from(this._visibleOptionsNotSelectAll).every((option) => this.value.includes(option.value))\n );\n }\n\n protected get _selectedVisibleOptions(): Array<TtOption> {\n return Array.from(this._visibleOptions).filter((option) => this.value.includes(option.value));\n }\n\n protected get _selectedOptions(): Array<TtOption> {\n return Array.from(this._visibleOptionsNotSelectAll).filter((option) => this.value.includes(option.value));\n }\n\n private _slotObserver: MutationObserver = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (mutation.type === 'attributes') {\n this.requestUpdate('options');\n }\n });\n });\n\n constructor() {\n super();\n this.internals = this.attachInternals();\n }\n\n private _handleFocusOut(e: FocusEvent) {\n if (!this.shadowRoot!.contains(e.relatedTarget as Node \| null)) {\n this._expanded = false;\n }\n }\n\n private _onFocus() {\n this._comboboxInput.focus();\n }\n\n public connectedCallback() {\n super.connectedCallback();\n\n this.addEventListener('focus', this._onFocus);\n }\n\n public disconnectedCallback() {\n super.disconnectedCallback();\n\n this.removeEventListener('focus', this._onFocus);\n }\n\n protected firstUpdated(changedProperties: PropertyValues) {\n this.internals.setFormValue(JSON.stringify(this.value));\n\n this._reportValidity();\n this._listenForOptionChange();\n\n super.firstUpdated(changedProperties);\n }\n\n protected update(changedProperties: PropertyValues) {\n if (changedProperties.has('value')) {\n this._valueChanged();\n\n if (\n changedProperties.get('value') !== undefined &&\n JSON.stringify(changedProperties.get('value')) !== JSON.stringify(this.value)\n ) {\n this._dispatchSelectedOptions();\n this._reportValidity();\n }\n }\n\n if (changedProperties.has('_expanded') && changedProperties.get('_expanded') && !this._expanded) {\n this.internals.states.add('interacted');\n }\n\n if (changedProperties.has('options')) {\n this.updateComplete.then(() => {\n const selectedAssignedOptions = Array.from(this.options).filter((option) => option.selected);\n this.value = Array.from(new Set([...this.value, ...selectedAssignedOptions.map((option) => option.value!)]));\n this._listenForOptionChange();\n });\n }\n super.update(changedProperties);\n }\n\n private _valueChanged = () => {\n this._selectableOptions.forEach((option) => {\n if (this.value.includes(option.value!)) {\n this._checkOption(option);\n } else {\n this._uncheckOption(option);\n }\n });\n\n this.internals.setFormValue(JSON.stringify(this.value));\n };\n\n private _listenForOptionChange = () => {\n this.options.forEach((option) => {\n this._slotObserver.observe(option, { attributes: true, attributeFilter: ['selected', 'disabled', 'hidden'] });\n });\n };\n\n private _reportValidity() {\n if (this.required && !this.value.length) {\n const errorMessage = this.multiselect ? 'Please select at least one tt-option' : 'Please select an tt-option';\n\n this.internals.setValidity(\n {\n valueMissing: true,\n },\n errorMessage,\n this._comboboxInput\n );\n this.internals.states.add('--invalid');\n } else if (!this.internals.validity.valid) {\n this.internals.setValidity({});\n\n if (this.internals.states.has('--invalid')) {\n this.internals.states.delete('--invalid');\n }\n }\n }\n\n private get labels(): Array<HTMLElement> {\n return <Array<HTMLElement>>[...this.internals.labels];\n }\n\n private get labelContent(): string {\n if (this.ariaLabel !== null) {\n return this.ariaLabel;\n }\n\n return this.labels.map((label) => label.innerText).join(', ');\n }\n\n private _onKeyUp(event: KeyboardEvent) {\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n if (!this._expanded) {\n this._expanded = true;\n this._activeOption = -1;\n } else {\n this._activeOption = Math.min(this._visibleOptions.length - 1, this._activeOption + 1);\n }\n break;\n case 'ArrowUp':\n event.preventDefault();\n if (this._expanded) {\n this._activeOption = Math.max(0, this._activeOption - 1);\n }\n break;\n case 'Escape':\n event.preventDefault();\n if (this._expanded) {\n this._expanded = false;\n } else if (this._filter !== '') {\n this._filter = '';\n }\n break;\n case 'Enter':\n event.preventDefault();\n if (this._expanded) {\n this._visibleOptions[this._activeOption].click();\n }\n break;\n default:\n break;\n }\n }\n\n private _uncheckOption(option: HTMLElement) {\n if (option.dataset.deselectable !== 'true') return;\n\n option.setAttribute('aria-selected', 'false');\n const checkbox = <HTMLInputElement>option.querySelector('input[type=\"checkbox\"]');\n if (checkbox) {\n checkbox.checked = false;\n }\n }\n\n private _checkOption(option: HTMLElement) {\n if (!this.multiselect) {\n this._selectableOptions.forEach((opt) => {\n this._uncheckOption(opt);\n });\n }\n\n option.setAttribute('aria-selected', 'true');\n const checkbox = <HTMLInputElement>option.querySelector('input[type=\"checkbox\"]');\n if (checkbox) {\n checkbox.checked = true;\n }\n }\n\n private _getActiveOptionId(): string \| undefined {\n if (this._activeOption === -1 \|\| this._visibleOptions.length === 0) {\n return undefined;\n }\n\n const option = this._visibleOptions[this._activeOption];\n return option.id;\n }\n\n private _onClick() {\n this._expanded = !this._expanded;\n\n if (this._expanded) {\n (<HTMLElement>this.shadowRoot?.querySelector('input[role=\"combobox\"]'))?.focus();\n }\n }\n\n private _onChevronClick() {\n (<HTMLElement>this.shadowRoot?.querySelector('input[role=\"combobox\"]'))?.focus();\n }\n\n private _onClickOption(event: MouseEvent) {\n event.preventDefault();\n event.stopPropagation();\n\n const option = event.currentTarget as TtOption;\n if (option.disabled) return;\n\n const selectedValue = option.value as string;\n\n if (this.multiselect) {\n if (this.value.includes(selectedValue)) {\n this.value = this.value.filter((value) => value !== selectedValue);\n } else {\n this.value = [...this.value, selectedValue];\n }\n } else {\n this.value = [selectedValue];\n this._expanded = false;\n }\n }\n\n private _onInput(event: Event) {\n const input = event.target as HTMLInputElement;\n const filter = input.value;\n if (filter !== '' && !this._expanded) {\n this._expanded = true;\n }\n this._activeOption = -1;\n this._filter = filter;\n }\n\n private _dispatchSelectedOptions() {\n this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n })\n );\n }\n\n private _selectAll = (event: MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n // If filtering, and all visible options are selected, deselect only visible options\n // Else if filtering, select all visible options\n\n if (this._filter !== '' && this._isAllSelected) {\n const selectedVisibleValues = this._selectedVisibleOptions.map((option) => option.value);\n this.value = this.value.filter((value) => !selectedVisibleValues.includes(value));\n } else if (this._filter !== '') {\n this.value = Array.from(\n new Set([...this.value, ...Array.from(this._selectableVisibleOptions).map((option) => option.value)])\n );\n } else if (this.value.length === this._selectableOptions.length) {\n this.value = [];\n } else {\n this.value = Array.from(this._selectableOptions).map((option) => option.value);\n }\n };\n\n private get _isValid(): boolean {\n return this.internals.validity.valid && !this.invalid;\n }\n\n private _renderCombobox() {\n const placeHolderValue = guard(\n [this.placeholder, this.disabled, this.value, this.activeOptions.length, this.selectAllPlaceholder, this._filter],\n () => {\n if (this.placeholder) {\n return this.placeholder;\n }\n\n if (this.disabled) {\n return 'Disabled';\n }\n if (!this.value.length) {\n return 'No options selected';\n }\n if (this.value.length === 1) {\n return Array.from(this._selectableVisibleOptions)\n .find((option) => option.value === this.value[0])\n ?.textContent?.trim();\n }\n\n // Count all selected values, excluding only those that correspond to permanently hidden options\n const permanentlyHiddenValues = Array.from(this.options)\n .filter((option) => option.hidden)\n .map((option) => option.value);\n\n const selectedCount = this.value.filter(\n (val) => !permanentlyHiddenValues.includes(val)\n ).length;\n\n // Only show \"All options selected\" when truly all non-hidden options are selected\n const totalSelectableCount = this.options.length - permanentlyHiddenValues.length;\n if (this._filter === '' && selectedCount === totalSelectableCount && totalSelectableCount > 0) {\n return this.selectAllPlaceholder \|\| 'All options selected';\n }\n\n return `${selectedCount} options selected`;\n }\n );\n\n return html` <input\n type=\"text\"\n id=\"${this.id}\"\n name=\"${this.name}\"\n autocomplete=\"off\"\n aria-label=\"${this.labelContent}\"\n aria-labelledby=\"${this.ariaLabelledby}\"\n role=\"combobox\"\n aria-controls=\"${this.id}-list\"\n aria-expanded=\"${this._expanded}\"\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n aria-disabled=\"${this.disabled}\"\n aria-invalid=\"${!this._isValid}\"\n aria-errormessage=\"${!this._isValid ? `error-msg-${this.id}` : nothing}\"\n aria-required=\"${this.required}\"\n ?disabled=${this.disabled}\n aria-activedescendant=\"${ifDefined(this._getActiveOptionId())}\"\n @input=\"${this._onInput}\"\n .value=\"${this._filter}\"\n .placeholder=\"${placeHolderValue}\"\n @focusout=\"${this._handleFocusOut}\"\n part=\"input\"\n class=${this.hideCaret ? 'hide-caret' : ''}\n />`;\n }\n\n private _renderSelectAll = () => {\n if (!this.multiselect \|\| !this.displaySelectAll) {\n return nothing;\n }\n const id = `${this.id}-option-select-all`;\n const active = this._getActiveOptionId() === id;\n const selected = this._isAllSelected;\n\n return html`\n <tt-option\n id=\"${id}\"\n class=\"select-all\"\n ?selected=${selected}\n ?active=${active}\n include-checkbox\n @click=\"${this._selectAll}\"\n exportparts=\"option, checkbox\"\n part=\"option\"\n value=\"select-all\"\n >Select all</tt-option\n >\n `;\n };\n\n private _renderOption(option: HTMLOptionElement) {\n const hidden = Boolean(\n (this._filter !== '' &&\n !option.value.toLowerCase().includes(this._filter.toLowerCase()) &&\n !option.innerText.toLowerCase().includes(this._filter.toLowerCase())) \|\|\n option.hidden\n );\n\n const id = `${this.id}-option-${option.value}`;\n const active = this._getActiveOptionId() === id;\n const selected = this.value.includes(option.value);\n\n return html`\n <tt-option\n id=\"${id}\"\n value=\"${option.value}\"\n ?selected=${selected}\n ?disabled=${option.disabled}\n ?active=${active}\n ?include-checkbox=${this.multiselect}\n ?hidden=${hidden}\n @click=\"${this._onClickOption}\"\n >\n ${unsafeHTML(option.innerHTML)}\n </tt-option>\n `;\n }\n\n private _renderChevron = () => html`\n <button\n type=\"button\"\n aria-label=\"Expand\"\n @click=\"${this._onChevronClick}\"\n aria-expanded=\"${this._expanded}\"\n aria-controls=\"${this.id}-list\"\n tabindex=\"-1\"\n ?disabled=${this.disabled}\n part=\"arrow\"\n >\n ${unsafeSVG(chevronDown)}\n </button>\n `;\n\n private _hasErrorContent(): boolean {\n return this.errorElements?.length > 0;\n }\n\n render() {\n return html`\n <div\n class=\"tt-combobox-container\"\n @focus=\"${this._onFocus}\"\n @keydown=\"${this._onKeyUp}\"\n @click=\"${this._onClick}\"\n aria-disabled=\"${this.disabled}\"\n part=\"container\"\n >\n <slot name=\"icon\" part=\"icon\"></slot>\n ${this._renderCombobox()} ${this._renderChevron()}\n <ul\n id=\"${this.id}-list\"\n role=\"listbox\"\n aria-multiselectable=\"${this.multiselect}\"\n aria-label=\"${this.labelContent}\"\n part=\"listbox\"\n ?data-open-upward=\"${this.openUpward}\"\n >\n ${this._renderSelectAll()} ${repeat(this.options, (opt) => opt.value, this._renderOption.bind(this))}\n\n <li part=\"no-results\" class=\"no-results\">No results</li>\n </ul>\n </div>\n <slot name=\"option\" @slotchange=${() => this.requestUpdate('options')}></slot>\n <div\n class=\"errormessage\"\n id=\"error-msg-${this.id}\"\n role=\"alert\"\n aria-atomic=\"true\"\n ?data-hidden=\"${!this._hasErrorContent()}\"\n part=\"error\"\n >\n ${unsafeSVG(alert)}\n <slot name=\"error\"></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tt-combobox': TtCombobox;\n }\n}\n"]}

package/dist/src/types.d.ts CHANGED Viewed

@@ -29,7 +29,7 @@ declare global {
                 'tt-combobox': TtComboboxExternalAttributes & {
                     ref?: React.Ref<unknown>;
                     children?: React.ReactNode;
-                    style?: React.CSSProperties | string;
+                    style?: React.CSSProperties;
                 };
             }
         }

package/dist/src/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TtCombobox } from './TtCombobox.js';\n\ninterface TtComboboxExternalAttributes {\n id?: string;\n placeholder?: string;\n disabled?: boolean;\n multiselect?: boolean;\n 'display-select-all'?: boolean;\n invalid?: boolean;\n 'open-upward'?: boolean;\n name?: string;\n required?: boolean;\n 'aria-labelledby'?: string;\n class?: string;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tt-combobox': TtCombobox;\n }\n\n namespace JSX {\n interface IntrinsicElements {\n 'tt-combobox': TtComboboxExternalAttributes & { style?: string };\n }\n }\n\n namespace React {\n namespace JSX {\n interface IntrinsicElements {\n 'tt-combobox': TtComboboxExternalAttributes & {\n ref?: React.Ref<unknown>;\n children?: React.ReactNode;\n style?: React.CSSProperties ~~\| string~~;\n };\n }\n }\n }\n}\n"]}
1	+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { TtCombobox } from './TtCombobox.js';\n\ninterface TtComboboxExternalAttributes {\n id?: string;\n placeholder?: string;\n disabled?: boolean;\n multiselect?: boolean;\n 'display-select-all'?: boolean;\n invalid?: boolean;\n 'open-upward'?: boolean;\n name?: string;\n required?: boolean;\n 'aria-labelledby'?: string;\n class?: string;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tt-combobox': TtCombobox;\n }\n\n namespace JSX {\n interface IntrinsicElements {\n 'tt-combobox': TtComboboxExternalAttributes & { style?: string };\n }\n }\n\n namespace React {\n namespace JSX {\n interface IntrinsicElements {\n 'tt-combobox': TtComboboxExternalAttributes & {\n ref?: React.Ref<unknown>;\n children?: React.ReactNode;\n style?: React.CSSProperties;\n };\n }\n }\n }\n}\n"]}

package/package.json CHANGED Viewed

@@ -3,7 +3,7 @@
   "description": "Webcomponent tt-combobox following open-wc recommendations",
   "license": "MIT",
   "author": "@triptease",
-  "version": "5.6.0",
+  "version": "5.6.2",
   "type": "module",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",

package/test/tt-combobox.test.ts CHANGED Viewed

@@ -109,6 +109,85 @@ describe('TtCombobox', () => {
     });
   });
+  it('should display total selected count after filtering when options were selected before filtering', async () => {
+    const el = await fixture<TtCombobox>(
+      html` <tt-combobox id="combobox" multiselect>
+        <span slot="label">Test combobox</span>
+        <option slot="option" value="1">Option 1</option>
+        <option slot="option" value="2">Option 2</option>
+        <option slot="option" value="3">Option 3</option>
+      </tt-combobox>`
+    );
+    const combobox = getCombobox(el);
+    combobox.click();
+    await elementUpdated(el);
+    // Select options 1, 2, and 3 (all of them)
+    const option1 = el.shadowRoot!.querySelector('tt-option[value="1"]') as HTMLLIElement;
+    option1.click();
+    await elementUpdated(el);
+    const option2 = el.shadowRoot!.querySelector('tt-option[value="2"]') as HTMLLIElement;
+    option2.click();
+    await elementUpdated(el);
+    const option3 = el.shadowRoot!.querySelector('tt-option[value="3"]') as HTMLLIElement;
+    option3.click();
+    await elementUpdated(el);
+    // Should show 3 options selected
+    expect(comboboxPlaceholderText(combobox)).to.equal('All options selected');
+    // Now filter to show only "Option 1"
+    filterCombobox(combobox, 'Option 1');
+    await elementUpdated(el);
+    // Should still show 3 options selected (not 1)
+    expect(comboboxPlaceholderText(combobox)).to.equal('3 options selected');
+  });
+  it('should show correct count after clearing filter when only filtered options were selected', async () => {
+    const el = await fixture<TtCombobox>(
+      html` <tt-combobox id="combobox" multiselect>
+        <span slot="label">Test combobox</span>
+        <option slot="option" value="1">Option 1</option>
+        <option slot="option" value="11">Option 11</option>
+        <option slot="option" value="2">Option 2</option>
+        <option slot="option" value="3">Option 3</option>
+        <option slot="option" value="4">Option 4</option>
+        <option slot="option" value="5">Option 5</option>
+      </tt-combobox>`
+    );
+    const combobox = getCombobox(el);
+    combobox.click();
+    await elementUpdated(el);
+    // Filter to show only 2 options (Option 1 and Option 11 match "1")
+    filterCombobox(combobox, '1');
+    await elementUpdated(el);
+    // Select both visible filtered options
+    const option1 = el.shadowRoot!.querySelector('tt-option[value="1"]') as HTMLLIElement;
+    option1.click();
+    await elementUpdated(el);
+    const option11 = el.shadowRoot!.querySelector('tt-option[value="11"]') as HTMLLIElement;
+    option11.click();
+    await elementUpdated(el);
+    // Verify 2 options selected while filter is active
+    expect(comboboxPlaceholderText(combobox)).to.equal('2 options selected');
+    // Clear the filter
+    filterCombobox(combobox, '');
+    await elementUpdated(el);
+    // Should show "2 options selected", NOT "All options selected"
+    // This is the critical test - when filter is cleared, it should count
+    // all selected options (2), not say "all" just because all visible options
+    // during filtering were selected
+    expect(comboboxPlaceholderText(combobox)).to.equal('2 options selected');
+  });
   it('should not allow a disabled option to be selected', async () => {
     const el = await fixture<TtCombobox>(
       html` <tt-combobox id="combobox">