@triptease/tt-combobox 5.3.0 → 5.3.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.
- package/dist/src/TtCombobox.js +15 -5
- package/dist/src/TtCombobox.js.map +1 -1
- package/package.json +1 -1
- package/test/tt-combobox.test.ts +118 -3
package/dist/src/TtCombobox.js
CHANGED
|
@@ -57,7 +57,16 @@ export class TtCombobox extends LitElement {
|
|
|
57
57
|
this._selectAll = (event) => {
|
|
58
58
|
event.preventDefault();
|
|
59
59
|
event.stopPropagation();
|
|
60
|
-
|
|
60
|
+
// If filtering, and all visible options are selected, deselect only visible options
|
|
61
|
+
// Else if filtering, select all visible options
|
|
62
|
+
if (this._filter !== '' && this._isAllSelected) {
|
|
63
|
+
const selectedVisibleValues = Array.from(this._selectedVisibleOptions).map(option => option.dataset.value);
|
|
64
|
+
this.value = this.value.filter(value => !selectedVisibleValues.includes(value));
|
|
65
|
+
}
|
|
66
|
+
else if (this._filter !== '') {
|
|
67
|
+
this.value = Array.from(new Set([...this.value, ...Array.from(this._selectableVisibleOptions).map(option => option.dataset.value)]));
|
|
68
|
+
}
|
|
69
|
+
else if (this.value.length === this._selectableOptions.length) {
|
|
61
70
|
this.value = [];
|
|
62
71
|
}
|
|
63
72
|
else {
|
|
@@ -318,9 +327,10 @@ export class TtCombobox extends LitElement {
|
|
|
318
327
|
/>`;
|
|
319
328
|
}
|
|
320
329
|
_renderOption(option) {
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
330
|
+
const hidden = Boolean((this._filter !== '' && !option.value.toLowerCase().includes(this._filter) && !option.innerText.toLowerCase().includes(this._filter)) || option.hidden);
|
|
331
|
+
// if (this._filter !== '' && !option.value.toLowerCase().includes(this._filter) && !option.innerText.toLowerCase().includes(this._filter)) {
|
|
332
|
+
// return nothing;
|
|
333
|
+
// }
|
|
324
334
|
const id = `${this.id}-option-${option.value}`;
|
|
325
335
|
const active = this._getActiveOptionId() === id;
|
|
326
336
|
const selected = Boolean(this.multiselect && option.selected);
|
|
@@ -334,7 +344,7 @@ export class TtCombobox extends LitElement {
|
|
|
334
344
|
@mousedown="${(event) => event.preventDefault()}"
|
|
335
345
|
data-value="${option.value}"
|
|
336
346
|
aria-disabled=${option.disabled}
|
|
337
|
-
aria-hidden=${
|
|
347
|
+
aria-hidden=${hidden || nothing}
|
|
338
348
|
data-deselectable=${!option.selected}
|
|
339
349
|
part="option"
|
|
340
350
|
>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TtCombobox.js","sourceRoot":"","sources":["../../src/TtCombobox.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { 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';\n\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: 'option:not([disabled])' })\n activeOptions!: Array<HTMLOptionElement>;\n\n @queryAssignedElements({ slot: 'error' })\n protected errorElements!: Array<HTMLElement>;\n\n @queryAll('li[role=\"option\"]:not([aria-disabled=\"true\"], [aria-hidden=\"true\"])')\n protected _visibleOptions!: Array<HTMLOptionElement>;\n\n @queryAll('li[role=\"option\"]:not([aria-disabled=\"true\"], [data-value=\"select-all\"])')\n protected _selectableOptions!: NodeListOf<HTMLOptionElement>;\n\n @queryAll('li[role=\"option\"]:not([aria-disabled=\"true\"], [data-value=\"select-all\"], [aria-hidden=\"true\"])')\n protected _selectableVisibleOptions!: NodeListOf<HTMLOptionElement>;\n\n @queryAll('li[role=\"option\"]:not([data-value=\"select-all\"])[aria-selected=\"true\"]')\n protected _selectedOptions!: NodeListOf<HTMLOptionElement>;\n\n @queryAll('li[role=\"option\"]:not([data-value=\"select-all\"], [aria-hidden=\"true\"])[aria-selected=\"true\"]')\n protected _selectedVisibleOptions!: NodeListOf<HTMLOptionElement>;\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 Array.from(this._selectableVisibleOptions).every(option => Array.from(this._selectedVisibleOptions).includes(option));\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 (changedProperties.get('value') !== undefined && JSON.stringify(changedProperties.get('value')) !== JSON.stringify(this.value)) {\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 this.value = Array.from(new Set([...this.value, ...Array.from(this._selectedOptions).map(option => option.dataset.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.dataset.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 option' : 'Please select an option';\n\n this.internals.setValidity({\n valueMissing: true\n }, errorMessage, this._comboboxInput);\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 const option = event.currentTarget as HTMLElement;\n const selectedValue = option.dataset.value as string;\n\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.toLowerCase();\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(new Event('change', {\n bubbles: true,\n composed: true\n }));\n }\n\n private _selectAll = (event: MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n if (this.value.length === this._selectableOptions.length) {\n this.value = [];\n } else {\n this.value = Array.from(this._selectableOptions).map(option => option.dataset.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._selectedVisibleOptions.length) {\n return 'No options selected';\n }\n if (this._selectedVisibleOptions.length === 1) {\n return this._selectedVisibleOptions[0].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 return html`\n <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 // eslint-disable-next-line lit-a11y/click-events-have-key-events\n return html`\n <li\n class=\"select-all\"\n role=\"option\"\n id=\"${this.id}-option-select-all\"\n aria-selected=\"${selected}\"\n data-active=${active}\n @click=\"${this._selectAll}\"\n @mousedown=\"${(evt: MouseEvent) => evt.preventDefault()}\"\n data-value=\"select-all\"\n part=\"option\"\n >\n <input type=\"checkbox\" ?checked=${selected} role=\"presentation\" tabindex=\"-1\" part=\"checkbox\">\n Select all\n </li>`;\n };\n\n private _renderOption(option: HTMLOptionElement) {\n if (this._filter !== '' && !option.value.toLowerCase().includes(this._filter) && !option.innerText.toLowerCase().includes(this._filter)) {\n return nothing;\n }\n\n const id = `${this.id}-option-${option.value}`;\n const active = this._getActiveOptionId() === id;\n const selected = Boolean(this.multiselect && option.selected);\n return html`\n <li\n role=\"option\"\n id=\"${this.id}-option-${option.value}\"\n aria-selected=${this.multiselect && option.selected}\n data-active=${active}\n @click=\"${this._onClickOption}\"\n @mousedown=\"${(event: MouseEvent) => event.preventDefault()}\"\n data-value=\"${option.value}\"\n aria-disabled=${option.disabled}\n aria-hidden=${option.hidden || nothing}\n data-deselectable=${!option.selected}\n part=\"option\"\n >\n ${this.multiselect ? html`<input type=\"checkbox\" ?checked=${selected}\n role=\"presentation\" tabindex=\"-1\" part=\"checkbox\">` : nothing}\n <span>${unsafeHTML(option.innerHTML)}</span>\n </li>`;\n }\n\n private _renderChevron = () => html`\n <button type=\"button\" aria-label=\"Expand\" @click=\"${this._onChevronClick}\" aria-expanded=\"${this._expanded}\"\n aria-controls=\"${this.id}-list\" tabindex=\"-1\" ?disabled=${this.disabled} part=\"arrow\">\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 class=\"tt-combobox-container\" @focus=\"${this._onFocus}\" @keydown=\"${this._onKeyUp}\" @click=\"${this._onClick}\"\n aria-disabled=\"${this.disabled}\" part=\"container\">\n <slot name=\"icon\" part=\"icon\"></slot>\n ${this._renderCombobox()}\n ${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()}\n\n ${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 class=\"errormessage\" id=\"error-msg-${this.id}\" role=\"alert\" aria-atomic=\"true\"\n ?data-hidden=\"${!this._hasErrorContent()}\" part=\"error\">\n ${unsafeSVG(alert)}\n <slot name=\"error\"></slot>\n </div>\n `;\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":["/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { 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';\n\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: 'option:not([disabled])' })\n activeOptions!: Array<HTMLOptionElement>;\n\n @queryAssignedElements({ slot: 'error' })\n protected errorElements!: Array<HTMLElement>;\n\n @queryAll('li[role=\"option\"]:not([aria-disabled=\"true\"], [aria-hidden=\"true\"])')\n protected _visibleOptions!: Array<HTMLOptionElement>;\n\n @queryAll('li[role=\"option\"]:not([aria-disabled=\"true\"], [data-value=\"select-all\"])')\n protected _selectableOptions!: NodeListOf<HTMLOptionElement>;\n\n @queryAll('li[role=\"option\"]:not([aria-disabled=\"true\"], [data-value=\"select-all\"], [aria-hidden=\"true\"])')\n protected _selectableVisibleOptions!: NodeListOf<HTMLOptionElement>;\n\n @queryAll('li[role=\"option\"]:not([data-value=\"select-all\"])[aria-selected=\"true\"]')\n protected _selectedOptions!: NodeListOf<HTMLOptionElement>;\n\n @queryAll('li[role=\"option\"]:not([data-value=\"select-all\"], [aria-hidden=\"true\"])[aria-selected=\"true\"]')\n protected _selectedVisibleOptions!: NodeListOf<HTMLOptionElement>;\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 Array.from(this._selectableVisibleOptions).every(option => Array.from(this._selectedVisibleOptions).includes(option));\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 (changedProperties.get('value') !== undefined && JSON.stringify(changedProperties.get('value')) !== JSON.stringify(this.value)) {\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 this.value = Array.from(new Set([...this.value, ...Array.from(this._selectedOptions).map(option => option.dataset.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.dataset.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 option' : 'Please select an option';\n\n this.internals.setValidity({\n valueMissing: true\n }, errorMessage, this._comboboxInput);\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 const option = event.currentTarget as HTMLElement;\n const selectedValue = option.dataset.value as string;\n\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.toLowerCase();\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(new Event('change', {\n bubbles: true,\n composed: true\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 = Array.from(this._selectedVisibleOptions).map(option => option.dataset.value!);\n this.value = this.value.filter(value => !selectedVisibleValues.includes(value));\n } else if (this._filter !== '') {\n this.value = Array.from(new Set([...this.value, ...Array.from(this._selectableVisibleOptions).map(option => option.dataset.value!)]));\n } else if (this.value.length === this._selectableOptions.length) {\n this.value = [];\n } else {\n this.value = Array.from(this._selectableOptions).map(option => option.dataset.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._selectedVisibleOptions.length) {\n return 'No options selected';\n }\n if (this._selectedVisibleOptions.length === 1) {\n return this._selectedVisibleOptions[0].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 return html`\n <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 // eslint-disable-next-line lit-a11y/click-events-have-key-events\n return html`\n <li\n class=\"select-all\"\n role=\"option\"\n id=\"${this.id}-option-select-all\"\n aria-selected=\"${selected}\"\n data-active=${active}\n @click=\"${this._selectAll}\"\n @mousedown=\"${(evt: MouseEvent) => evt.preventDefault()}\"\n data-value=\"select-all\"\n part=\"option\"\n >\n <input type=\"checkbox\" ?checked=${selected} role=\"presentation\" tabindex=\"-1\" part=\"checkbox\">\n Select all\n </li>`;\n };\n\n private _renderOption(option: HTMLOptionElement) {\n const hidden = Boolean((this._filter !== '' && !option.value.toLowerCase().includes(this._filter) && !option.innerText.toLowerCase().includes(this._filter)) || option.hidden);\n\n // if (this._filter !== '' && !option.value.toLowerCase().includes(this._filter) && !option.innerText.toLowerCase().includes(this._filter)) {\n // return nothing;\n // }\n\n const id = `${this.id}-option-${option.value}`;\n const active = this._getActiveOptionId() === id;\n const selected = Boolean(this.multiselect && option.selected);\n\n return html`\n <li\n role=\"option\"\n id=\"${this.id}-option-${option.value}\"\n aria-selected=${this.multiselect && option.selected}\n data-active=${active}\n @click=\"${this._onClickOption}\"\n @mousedown=\"${(event: MouseEvent) => event.preventDefault()}\"\n data-value=\"${option.value}\"\n aria-disabled=${option.disabled}\n aria-hidden=${hidden || nothing}\n data-deselectable=${!option.selected}\n part=\"option\"\n >\n ${this.multiselect ? html`<input type=\"checkbox\" ?checked=${selected}\n role=\"presentation\" tabindex=\"-1\" part=\"checkbox\">` : nothing}\n <span>${unsafeHTML(option.innerHTML)}</span>\n </li>`;\n }\n\n private _renderChevron = () => html`\n <button type=\"button\" aria-label=\"Expand\" @click=\"${this._onChevronClick}\" aria-expanded=\"${this._expanded}\"\n aria-controls=\"${this.id}-list\" tabindex=\"-1\" ?disabled=${this.disabled} part=\"arrow\">\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 class=\"tt-combobox-container\" @focus=\"${this._onFocus}\" @keydown=\"${this._onKeyUp}\" @click=\"${this._onClick}\"\n aria-disabled=\"${this.disabled}\" part=\"container\">\n <slot name=\"icon\" part=\"icon\"></slot>\n ${this._renderCombobox()}\n ${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()}\n\n ${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 class=\"errormessage\" id=\"error-msg-${this.id}\" role=\"alert\" aria-atomic=\"true\"\n ?data-hidden=\"${!this._hasErrorContent()}\" part=\"error\">\n ${unsafeSVG(alert)}\n <slot name=\"error\"></slot>\n </div>\n `;\n }\n}\n\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tt-combobox': TtCombobox;\n }\n}\n"]}
|
package/package.json
CHANGED
package/test/tt-combobox.test.ts
CHANGED
|
@@ -8,6 +8,12 @@ describe('TtCombobox', () => {
|
|
|
8
8
|
|
|
9
9
|
const comboboxPlaceholderText = (combobox: HTMLInputElement) => combobox.getAttribute('placeholder');
|
|
10
10
|
|
|
11
|
+
const filterCombobox = (combobox: HTMLInputElement, text: string) => {
|
|
12
|
+
// eslint-disable-next-line no-param-reassign
|
|
13
|
+
combobox.value = text;
|
|
14
|
+
combobox.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
|
|
15
|
+
}
|
|
16
|
+
|
|
11
17
|
it('Should render with the default placeholder text', async () => {
|
|
12
18
|
const el = await fixture<TtCombobox>(html`
|
|
13
19
|
<tt-combobox id="combobox">
|
|
@@ -353,7 +359,117 @@ describe('TtCombobox', () => {
|
|
|
353
359
|
await oneEvent(el, 'change');
|
|
354
360
|
|
|
355
361
|
expect(comboboxPlaceholderText(combobox)).to.equal('Everything');
|
|
356
|
-
})
|
|
362
|
+
});
|
|
363
|
+
|
|
364
|
+
it('should render selected options correctly after filtering and deselecting', async () => {
|
|
365
|
+
const el = await fixture<TtCombobox>(html`
|
|
366
|
+
<tt-combobox id="combobox" multiselect display-select-all select-all-placeholder="Everything">
|
|
367
|
+
<span slot="label">Test combobox</span>
|
|
368
|
+
<option slot="option" value="1">Option 1</option>
|
|
369
|
+
<option slot="option" value="2">Option 2</option>
|
|
370
|
+
<option slot="option" value="3">Option 3</option>
|
|
371
|
+
</tt-combobox>`);
|
|
372
|
+
|
|
373
|
+
const combobox = getCombobox(el);
|
|
374
|
+
combobox.click();
|
|
375
|
+
|
|
376
|
+
// Select all options
|
|
377
|
+
const selectAll = el.shadowRoot!.querySelector('[role="option"][data-value="select-all"]') as HTMLLIElement;
|
|
378
|
+
expect(selectAll).to.exist;
|
|
379
|
+
|
|
380
|
+
selectAll.click();
|
|
381
|
+
await elementUpdated(el);
|
|
382
|
+
|
|
383
|
+
// Filter options by typing "Option 1"
|
|
384
|
+
combobox.value = 'Option 1';
|
|
385
|
+
combobox.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
|
|
386
|
+
await elementUpdated(el);
|
|
387
|
+
|
|
388
|
+
// Deselect "Option 1"
|
|
389
|
+
const option1 = el.shadowRoot!.querySelector('[role="option"][data-value="1"]') as HTMLLIElement;
|
|
390
|
+
expect(option1).to.exist;
|
|
391
|
+
|
|
392
|
+
option1.click();
|
|
393
|
+
await elementUpdated(el);
|
|
394
|
+
|
|
395
|
+
// Clear the filter
|
|
396
|
+
combobox.value = '';
|
|
397
|
+
combobox.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
|
|
398
|
+
await elementUpdated(el);
|
|
399
|
+
|
|
400
|
+
// Verify selected options
|
|
401
|
+
const selectedOptions = el.shadowRoot!.querySelectorAll('li[role="option"][aria-selected="true"]');
|
|
402
|
+
expect(selectedOptions).to.have.lengthOf(2);
|
|
403
|
+
});
|
|
404
|
+
|
|
405
|
+
it('should only add the visible options to the value when select all is clicked after filtering', async () => {
|
|
406
|
+
const el = await fixture<TtCombobox>(html`
|
|
407
|
+
<tt-combobox id="combobox" multiselect display-select-all select-all-placeholder="Everything">
|
|
408
|
+
<span slot="label">Test combobox</span>
|
|
409
|
+
<option slot="option" value="1">Option 1</option>
|
|
410
|
+
<option slot="option" value="2">Option 2</option>
|
|
411
|
+
<option slot="option" value="3">Option 3</option>
|
|
412
|
+
</tt-combobox>`);
|
|
413
|
+
|
|
414
|
+
// Open the combobox
|
|
415
|
+
const combobox = getCombobox(el);
|
|
416
|
+
combobox.click();
|
|
417
|
+
|
|
418
|
+
// Filter options by typing "Option 1" to only show that option
|
|
419
|
+
filterCombobox(combobox, 'Option 1');
|
|
420
|
+
await elementUpdated(el);
|
|
421
|
+
|
|
422
|
+
// Only Option 1 should be visible
|
|
423
|
+
const visibleOptions = el.shadowRoot!.querySelectorAll('[role="option"]:not([data-value="select-all"]):not([aria-hidden="true"])');
|
|
424
|
+
await expect(visibleOptions.length).to.equal(1);
|
|
425
|
+
await expect(visibleOptions[0].getAttribute('data-value')).to.equal('1');
|
|
426
|
+
|
|
427
|
+
// Click "Select All"
|
|
428
|
+
const selectAll = el.shadowRoot!.querySelector('[role="option"][data-value="select-all"]') as HTMLLIElement;
|
|
429
|
+
selectAll.click();
|
|
430
|
+
await elementUpdated(el);
|
|
431
|
+
|
|
432
|
+
// Clear the filter
|
|
433
|
+
filterCombobox(combobox, '');
|
|
434
|
+
await elementUpdated(el);
|
|
435
|
+
|
|
436
|
+
// Verify that only "Option 1" is selected
|
|
437
|
+
await expect(el.value).to.deep.equal(['1']);
|
|
438
|
+
});
|
|
439
|
+
|
|
440
|
+
it('should only remove the visible options from the value when deselecting select all after filtering', async () => {
|
|
441
|
+
const el = await fixture<TtCombobox>(html`
|
|
442
|
+
<tt-combobox id="combobox" multiselect display-select-all select-all-placeholder="Everything">
|
|
443
|
+
<span slot="label">Test combobox</span>
|
|
444
|
+
<option slot="option" value="1">Option 1</option>
|
|
445
|
+
<option slot="option" value="2">Option 2</option>
|
|
446
|
+
<option slot="option" value="3">Option 3</option>
|
|
447
|
+
</tt-combobox>`);
|
|
448
|
+
|
|
449
|
+
// Open the combobox
|
|
450
|
+
const combobox = getCombobox(el);
|
|
451
|
+
combobox.click();
|
|
452
|
+
|
|
453
|
+
// Click "Select All"
|
|
454
|
+
const selectAll = el.shadowRoot!.querySelector('[role="option"][data-value="select-all"]') as HTMLLIElement;
|
|
455
|
+
selectAll.click();
|
|
456
|
+
await elementUpdated(el);
|
|
457
|
+
|
|
458
|
+
// Filter options by typing "Option 1" to only show that option
|
|
459
|
+
filterCombobox(combobox, 'Option 1');
|
|
460
|
+
await elementUpdated(el);
|
|
461
|
+
|
|
462
|
+
// Click "Select All" again to deselect visible options
|
|
463
|
+
selectAll.click();
|
|
464
|
+
await elementUpdated(el);
|
|
465
|
+
|
|
466
|
+
// Clear the filter
|
|
467
|
+
filterCombobox(combobox, '');
|
|
468
|
+
await elementUpdated(el);
|
|
469
|
+
|
|
470
|
+
// Verify that only "Option 1" is selected
|
|
471
|
+
await expect(el.value).to.deep.equal(['2', '3']);
|
|
472
|
+
});
|
|
357
473
|
|
|
358
474
|
describe('Form Integration', () => {
|
|
359
475
|
it('should include its values in FormData when submitted', async () => {
|
|
@@ -450,5 +566,4 @@ describe('TtCombobox', () => {
|
|
|
450
566
|
expect(value).to.deep.equal(['option2']);
|
|
451
567
|
});
|
|
452
568
|
});
|
|
453
|
-
})
|
|
454
|
-
;
|
|
569
|
+
});
|