diff --git a/.changeset/cool-peaches-burn.md b/.changeset/cool-peaches-burn.md new file mode 100644 index 000000000..6bc06d2aa --- /dev/null +++ b/.changeset/cool-peaches-burn.md @@ -0,0 +1,11 @@ +--- +'@lion/combobox': minor +'@lion/form-core': patch +'@lion/form-integrations': patch +--- + +Allow Subclassers of LionCombobox to set '\_syncToTextboxCondition' in closing phase of overlay + +## Fixes + +Allow an extra microtask in registration phase to make forms inside dialogs compatible. diff --git a/docs/components/inputs/combobox/features.md b/docs/components/inputs/combobox/features.md index 801d06bef..5a8cdd9a5 100644 --- a/docs/components/inputs/combobox/features.md +++ b/docs/components/inputs/combobox/features.md @@ -215,7 +215,10 @@ This will: ```js preview-story export const multipleChoice = () => html` - + ${lazyRender( listboxData.map( (entry, i) => diff --git a/packages/combobox/src/LionCombobox.js b/packages/combobox/src/LionCombobox.js index 0d4b394e7..b377bbf76 100644 --- a/packages/combobox/src/LionCombobox.js +++ b/packages/combobox/src/LionCombobox.js @@ -440,7 +440,12 @@ export class LionCombobox extends OverlayMixin(LionListbox) { __onOverlayClose() { if (!this.multipleChoice) { - if (this.checkedIndex !== -1) { + if ( + this.checkedIndex !== -1 && + this._syncToTextboxCondition(this.modelValue, this.__oldModelValue, { + phase: 'overlay-close', + }) + ) { this._inputNode.value = this.formElements[ /** @type {number} */ (this.checkedIndex) ].choiceValue; @@ -739,12 +744,15 @@ export class LionCombobox extends OverlayMixin(LionListbox) { } /** + * @overridable * @param {string|string[]} modelValue * @param {string|string[]} oldModelValue */ // eslint-disable-next-line no-unused-vars - _syncToTextboxCondition(modelValue, oldModelValue) { - return this.autocomplete === 'inline' || this.autocomplete === 'both'; + _syncToTextboxCondition(modelValue, oldModelValue, { phase } = {}) { + return ( + this.autocomplete === 'inline' || this.autocomplete === 'both' || phase === 'overlay-close' + ); } /** diff --git a/packages/combobox/test/lion-combobox.test.js b/packages/combobox/test/lion-combobox.test.js index f95242c75..4870f59b7 100644 --- a/packages/combobox/test/lion-combobox.test.js +++ b/packages/combobox/test/lion-combobox.test.js @@ -936,6 +936,46 @@ describe('lion-combobox', () => { await performChecks('both', [0, 1], ''); }); + it('is possible to adjust textbox synchronize condition on overlay close', async () => { + const el = /** @type {LionCombobox} */ (await fixture(html` + + Artichoke + Chard + Chicory + Victoria Plum + + `)); + expect(el._inputNode.value).to.equal(''); + + /** + * @param {'none' | 'list' | 'inline' | 'both'} autocomplete + * @param {number|number[]} index + * @param {string} valueOnClose + */ + async function performChecks(autocomplete, index, valueOnClose) { + await el.updateComplete; + el.opened = true; + el.setCheckedIndex(-1); + await el.updateComplete; + el.autocomplete = autocomplete; + el.setCheckedIndex(index); + el.opened = false; + await el.updateComplete; + expect(el._inputNode.value).to.equal(valueOnClose); + } + + await performChecks('none', 0, ''); + await performChecks('list', 0, ''); + await performChecks('inline', 0, ''); + await performChecks('both', 0, ''); + + el.multipleChoice = true; + await performChecks('none', [0, 1], ''); + await performChecks('list', [0, 1], ''); + await performChecks('inline', [0, 1], ''); + await performChecks('both', [0, 1], ''); + }); + it('does inline autocompletion when adding chars', async () => { const el = /** @type {LionCombobox} */ (await fixture(html`