@lion/ui 0.9.0 → 0.10.0

package/components/combobox/src/LionCombobox.js

@@ -663,7 +663,11 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
     ) {
       return false;
     }
-    if (this.filled || this.showAllOnEmpty) {
+    if (
+      this.filled ||
+      this.showAllOnEmpty ||
+      (!this.filled && this.multipleChoice && this.__prevCboxValueNonSelected)
+    ) {
       return true;
     }
     // when no keyboard action involved (on focused change), return current opened state
@@ -705,7 +709,7 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMi
   // eslint-disable-next-line no-unused-vars
   _textboxOnInput(ev) {
     this.__shouldAutocompleteNextUpdate = true;
-    this.opened = true;
+    this.opened = this._showOverlayCondition({});
   }
 
   /**

package/components/combobox/test/lion-combobox.test.js

@@ -229,6 +229,8 @@ describe('lion-combobox', () => {
             </lion-combobox>
           `)
         );
+        await el.updateComplete;
+
         const { _inputNode } = getComboboxMembers(el);
 
         _inputNode.dispatchEvent(new KeyboardEvent('keyup', { key: 'Escape' }));
@@ -931,6 +933,50 @@ describe('lion-combobox', () => {
       expect(el.opened).to.equal(false);
     });
 
+    it('does not flash the menu when _showOverlayCondition returns "false"', async () => {
+      class ComplexCombobox extends LionCombobox {
+        _showOverlayCondition() {
+          return false;
+        }
+      }
+
+      const tagName = defineCE(ComplexCombobox);
+      const tag = unsafeStatic(tagName);
+
+      const el = /** @type {LionCombobox} */ (
+        await fixture(html` 
+          <${tag} name="combo" label="Display only the label once selected">
+            <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+            <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+            <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+            <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+          </${tag}>
+        `)
+      );
+
+      const dialog = el.shadowRoot?.querySelector('dialog');
+      /**
+       * hasDropdownFlashed is `true` if the menu was shown for a short period of time and then got closed
+       */
+      let hasDropdownFlashed = false;
+      const observer = new MutationObserver(mutationList => {
+        // eslint-disable-next-line no-unused-vars
+        for (const mutation of mutationList) {
+          if (dialog?.style.display === '') {
+            hasDropdownFlashed = true;
+          }
+        }
+      });
+      observer.observe(/** @type {Node} */ (dialog), { attributeFilter: ['style'] });
+
+      const { _inputNode } = getComboboxMembers(el);
+      _inputNode.focus();
+      await sendKeys({
+        type: 'art',
+      });
+      expect(hasDropdownFlashed).to.be.false;
+    });
+
     it('shows overlay on click when filled', async () => {
       const el = /** @type {LionCombobox} */ (
         await fixture(html`
@@ -1157,7 +1203,10 @@ describe('lion-combobox', () => {
         class ShowOverlayConditionCombobox extends LionCombobox {
           /** @param {{ currentValue: string, lastKey:string }} options */
           _showOverlayCondition(options) {
-            return options.currentValue.length > 3 && super._showOverlayCondition(options);
+            return (
+              // @ts-ignore
+              this.__prevCboxValueNonSelected.length > 3 && super._showOverlayCondition(options)
+            );
           }
         }
         const tagName = defineCE(ShowOverlayConditionCombobox);
@@ -1182,7 +1231,10 @@ describe('lion-combobox', () => {
         class ShowOverlayConditionCombobox extends LionCombobox {
           /** @param {{ currentValue: string, lastKey:string }} options */
           _showOverlayCondition(options) {
-            return options.currentValue.length > 3 && super._showOverlayCondition(options);
+            return (
+              // @ts-ignore
+              this.__prevCboxValueNonSelected.length > 3 && super._showOverlayCondition(options)
+            );
           }
         }
         const tagName = defineCE(ShowOverlayConditionCombobox);
@@ -1207,7 +1259,10 @@ describe('lion-combobox', () => {
         class ShowOverlayConditionCombobox extends LionCombobox {
           /** @param {{ currentValue: string, lastKey:string }} options */
           _showOverlayCondition(options) {
-            return options.currentValue.length > 3 && super._showOverlayCondition(options);
+            return (
+              // @ts-ignore
+              this.__prevCboxValueNonSelected.length > 3 && super._showOverlayCondition(options)
+            );
           }
         }
         const tagName = defineCE(ShowOverlayConditionCombobox);

package/components/core/test/ScopedElementsMixin.test.js

@@ -140,7 +140,7 @@ describe('ScopedElementsMixin', () => {
       }
       customElements.define('scoped-elements-host-no-reg-2', ScopedElementsHostNoReg2);
 
-      const errorSpy = sinon.spy(console, 'error');
+      const errorStub = sinon.stub(console, 'error');
       /** @type {ScopedElementsHostNoReg2} */ (
         await fixture(html`<scoped-elements-host-no-reg></scoped-elements-host-no-reg>`)
       );
@@ -148,7 +148,7 @@ describe('ScopedElementsMixin', () => {
         await fixture(html`<scoped-elements-host-no-reg-2></scoped-elements-host-no-reg-2>`)
       );
 
-      expect(errorSpy.args[0][0]).to.equal(
+      expect(errorStub.args[0][0]).to.equal(
         [
           'You are trying to re-register the "scoped-elements-child-no-reg" custom element with a different class via ScopedElementsMixin.',
           'This is only possible with a CustomElementRegistry.',
@@ -158,7 +158,7 @@ describe('ScopedElementsMixin', () => {
           'For more details you can visit https://open-wc.org/docs/development/scoped-elements/',
         ].join('\n'),
       );
-      errorSpy.restore();
+      errorStub.restore();
     });
   });
 });

package/components/dialog/test/lion-dialog.test.js

@@ -2,6 +2,7 @@
 import { expect, fixture as _fixture, html, unsafeStatic, aTimeout } from '@open-wc/testing';
 import { runOverlayMixinSuite } from '../../overlays/test-suites/OverlayMixin.suite.js';
 import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
+import '../test-helpers/test-router.js';
 import '@lion/ui/define/lion-dialog.js';
 
 /**
@@ -187,4 +188,57 @@ describe('lion-dialog', () => {
       expect(invokerButton.getAttribute('aria-expanded')).to.equal(null);
     });
   });
+
+  describe('Edge cases', () => {
+    it('does not lose click event handler when was detached and reattached', async () => {
+      const el = await fixture(html`
+        <test-router
+          .routingMap="${{
+            a: html`
+              <lion-dialog>
+                <div slot="content" class="dialog">Hey there</div>
+                <button slot="invoker">Popup button</button>
+              </lion-dialog>
+            `,
+            b: html` <div>B</div> `,
+          }}"
+          path="a"
+        ></test-router>
+      `);
+
+      const getDialog = () =>
+        /** @type {LionDialog} */ (el.shadowRoot?.querySelector('lion-dialog'));
+      const getInvoker = () =>
+        /** @type {HTMLElement} */ (getDialog().querySelector('[slot="invoker"]'));
+
+      getInvoker().click();
+      const dialog = getDialog();
+      // @ts-expect-error [allow-protected-in-tests]
+      await dialog._overlayCtrl._showComplete;
+      expect(dialog.opened).to.be.true;
+
+      dialog.close();
+      // @ts-expect-error [allow-protected-in-tests]
+      await dialog._overlayCtrl._hideComplete;
+      expect(dialog.opened).to.be.false;
+
+      const buttonA = /** @type {HTMLElement} */ (el.shadowRoot?.querySelector('#path-a'));
+      const buttonB = /** @type {HTMLElement} */ (el.shadowRoot?.querySelector('#path-b'));
+
+      buttonB.click();
+      await el.updateComplete;
+      buttonA.click();
+      await el.updateComplete;
+      await el.updateComplete;
+
+      getInvoker().click();
+
+      const dialogAfterRouteChange = getDialog();
+      // @ts-expect-error [allow-protected-in-tests]
+      expect(dialogAfterRouteChange._overlayCtrl).not.to.be.undefined;
+      // @ts-expect-error [allow-protected-in-tests]
+      await dialogAfterRouteChange._overlayCtrl._showComplete;
+      expect(dialogAfterRouteChange.opened).to.be.true;
+    });
+  });
 });

package/components/dialog/test-helpers/test-router.js

@@ -0,0 +1,43 @@
+import { html, LitElement } from 'lit';
+
+class TestRouter extends LitElement {
+  static properties = {
+    routingMap: {
+      type: Object,
+      attribute: false,
+    },
+    path: { type: String },
+  };
+
+  constructor() {
+    super();
+
+    /** @type {{ [path: string]: HTMLElement }} */
+    this.routingMap = {};
+    /** @type {string} */
+    this.path = '';
+  }
+
+  render() {
+    return html`
+      <div>
+        <div id="selector">
+          ${Object.keys(this.routingMap).map(
+            path =>
+              html`<button
+                id="path-${path}"
+                @click="${() => {
+                  this.path = path;
+                }}"
+              >
+                ${path}
+              </button>`,
+          )}
+        </div>
+        <div id="view">${this.routingMap[this.path]}</div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('test-router', TestRouter);

package/components/form-core/src/FormatMixin.js

@@ -1,14 +1,15 @@
 /* eslint-disable class-methods-use-this */
 
 import { dedupeMixin } from '@open-wc/dedupe-mixin';
+
+import { ValidateMixin } from './validate/ValidateMixin.js';
 import { FormControlMixin } from './FormControlMixin.js';
 import { Unparseable } from './validate/Unparseable.js';
-import { ValidateMixin } from './validate/ValidateMixin.js';
 
 /**
- * @typedef {import('../types/FormatMixinTypes.js').FormatMixin} FormatMixin
- * @typedef {import('../types/FormatMixinTypes.js').FormatOptions} FormatOptions
  * @typedef {import('../types/FormControlMixinTypes.js').ModelValueEventDetails} ModelValueEventDetails
+ * @typedef {import('../types/FormatMixinTypes.js').FormatOptions} FormatOptions
+ * @typedef {import('../types/FormatMixinTypes.js').FormatMixin} FormatMixin
  */
 
 // For a future breaking release:
@@ -69,6 +70,16 @@ const FormatMixinImplementation = superclass =>
       };
     }
 
+    /**
+     * During format/parse, we sometimes need to know how the current viewValue the user
+     * interacts with "came to be". Was it already formatted before for instance?
+     * If so, in case of an amount input, we might want to stick to the curent interpretation of separators.
+     */
+    #viewValueState = {
+      didFormatterOutputSyncToView: false,
+      didFormatterRun: false,
+    };
+
     /**
      * @param {string} [name]
      * @param {unknown} [oldValue]
@@ -93,7 +104,7 @@ const FormatMixinImplementation = superclass =>
      * The view value. Will be delegated to `._inputNode.value`
      */
     get value() {
-      return (this._inputNode && this._inputNode.value) || this.__value || '';
+      return this._inputNode?.value || this.__value || '';
     }
 
     /** @param {string} value */
@@ -249,7 +260,11 @@ const FormatMixinImplementation = superclass =>
       // Apparently, the parser was not able to produce a satisfactory output for the desired
       // modelValue type, based on the current viewValue. Unparseable allows to restore all
       // states (for instance from a lost user session), since it saves the current viewValue.
-      const result = this.parser(value, this.formatOptions);
+      const result = this.parser(value, {
+        ...this.formatOptions,
+        mode: this.#getFormatOptionsMode(),
+        viewValueStates: this.#getFormatOptionsViewValueStates(),
+      });
       return result !== undefined ? result : new Unparseable(value);
     }
 
@@ -258,6 +273,8 @@ const FormatMixinImplementation = superclass =>
      * @private
      */
     _callFormatter() {
+      this.#viewValueState.didFormatterRun = false;
+
       // - Why check for this.hasError?
       // We only want to format values that are considered valid. For best UX,
       // we only 'reward' valid inputs.
@@ -269,13 +286,8 @@ const FormatMixinImplementation = superclass =>
       // imperatively, we DO want to format a value (it is the only way to get meaningful
       // input into `._inputNode` with modelValue as input)
 
-      if (
-        this._isHandlingUserInput &&
-        this.hasFeedbackFor?.length &&
-        this.hasFeedbackFor.includes('error') &&
-        this._inputNode
-      ) {
-        return this._inputNode ? this.value : undefined;
+      if (this._isHandlingUserInput && this.hasFeedbackFor?.includes('error') && this._inputNode) {
+        return this.value;
       }
 
       if (this.modelValue instanceof Unparseable) {
@@ -285,7 +297,13 @@ const FormatMixinImplementation = superclass =>
         return this.modelValue.viewValue;
       }
 
-      return this.formatter(this.modelValue, this.formatOptions);
+      this.#viewValueState.didFormatterRun = true;
+
+      return this.formatter(this.modelValue, {
+        ...this.formatOptions,
+        mode: this.#getFormatOptionsMode(),
+        viewValueStates: this.#getFormatOptionsViewValueStates(),
+      });
     }
 
     /**
@@ -348,7 +366,6 @@ const FormatMixinImplementation = superclass =>
      * @private
      */
     __handlePreprocessor() {
-      const unprocessedValue = this.value;
       let currentCaretIndex = this.value.length;
       // Be gentle with Safari
       if (
@@ -364,7 +381,6 @@ const FormatMixinImplementation = superclass =>
         prevViewValue: this.__prevViewValue,
       });
 
-      this.__prevViewValue = unprocessedValue;
       if (preprocessedValue === undefined) {
         // Make sure we do no set back original value, so we preserve
         // caret index (== selectionStart/selectionEnd)
@@ -393,6 +409,8 @@ const FormatMixinImplementation = superclass =>
       if (this._reflectBackOn()) {
         // Text 'undefined' should not end up in <input>
         this.value = typeof this.formattedValue !== 'undefined' ? this.formattedValue : '';
+        this.#viewValueState.didFormatterOutputSyncToView =
+          Boolean(this.formattedValue) && this.#viewValueState.didFormatterRun;
       }
     }
 
@@ -459,7 +477,7 @@ const FormatMixinImplementation = superclass =>
       /**
        * Configuration object that will be available inside the formatter function
        */
-      this.formatOptions = /** @type {FormatOptions} */ ({});
+      this.formatOptions = /** @type {FormatOptions} */ ({ mode: 'auto' });
 
       /**
        * The view value is the result of the formatter function (when available).
@@ -543,10 +561,8 @@ const FormatMixinImplementation = superclass =>
      */
     __onPaste() {
       this._isPasting = true;
-      this.formatOptions.mode = 'pasted';
       setTimeout(() => {
         this._isPasting = false;
-        this.formatOptions.mode = 'auto';
       });
     }
 
@@ -588,6 +604,38 @@ const FormatMixinImplementation = superclass =>
         this._inputNode.removeEventListener('compositionend', this.__onCompositionEvent);
       }
     }
+
+    /**
+     * This method will be called right before a parser or formatter gets called and computes
+     * the formatOptions.mode. In short, it gives meta info about how the user interacted with
+     * the form control, as these user interactions can influence the formatting/parsing behavior.
+     *
+     * It's important that the behavior of these can be different during a paste or user edit,
+     * but not during programmatic setting of values (like setting modelValue).
+     * @returns {'auto'|'pasted'|'user-edited'}
+     */
+    #getFormatOptionsMode() {
+      if (this._isPasting) {
+        return 'pasted';
+      }
+      const isUserEditing = this._isHandlingUserInput && this.__prevViewValue;
+      if (isUserEditing) {
+        return 'user-edited';
+      }
+      return 'auto';
+    }
+
+    /**
+     * @returns {FormatOptions['viewValueStates']}
+     */
+    #getFormatOptionsViewValueStates() {
+      /** @type {FormatOptions['viewValueStates']}} */
+      const states = [];
+      if (this.#viewValueState.didFormatterOutputSyncToView) {
+        states.push('formatted');
+      }
+      return states;
+    }
   };
 
 export const FormatMixin = dedupeMixin(FormatMixinImplementation);

package/components/form-core/test-suites/FormatMixin.suite.js

@@ -5,6 +5,8 @@ import sinon from 'sinon';
 import { Unparseable, Validator, FormatMixin } from '@lion/ui/form-core.js';
 import { getFormControlMembers, mimicUserInput } from '@lion/ui/form-core-test-helpers.js';
 
+const isLionInputStepper = (/** @type {FormatClass} */ el) => 'valueTextMapping' in el;
+
 /**
  * @typedef {import('../types/FormControlMixinTypes.js').FormControlHost} FormControlHost
  * @typedef {ArrayConstructor | ObjectConstructor | NumberConstructor | BooleanConstructor | StringConstructor | DateConstructor | 'iban' | 'email'} modelValueType
@@ -480,7 +482,7 @@ export function runFormatMixinSuite(customConfig) {
           /**
            * @param {FormatClass} el
            */
-          function paste(el, val = 'lorem') {
+          function mimicPaste(el, val = 'lorem') {
             const { _inputNode } = getFormControlMembers(el);
             _inputNode.value = val;
             _inputNode.dispatchEvent(new ClipboardEvent('paste', { bubbles: true }));
@@ -494,12 +496,17 @@ export function runFormatMixinSuite(customConfig) {
           `)
             );
             const formatterSpy = sinon.spy(el, 'formatter');
-            paste(el);
+            mimicPaste(el);
             expect(formatterSpy).to.be.called;
-            expect(/** @type {{mode: string}} */ (formatterSpy.args[0][1]).mode).to.equal('pasted');
+            expect(/** @type {{mode: string}} */ (formatterSpy.lastCall.args[1]).mode).to.equal(
+              'pasted',
+            );
+            // give microtask of _isPasting chance to reset
             await aTimeout(0);
-            mimicUserInput(el, '');
-            expect(/** @type {{mode: string}} */ (formatterSpy.args[0][1]).mode).to.equal('auto');
+            el.modelValue = 'foo';
+            expect(/** @type {{mode: string}} */ (formatterSpy.lastCall.args[1]).mode).to.equal(
+              'auto',
+            );
           });
 
           it('sets protected value "_isPasting" for Subclassers', async () => {
@@ -509,7 +516,7 @@ export function runFormatMixinSuite(customConfig) {
           `)
             );
             const formatterSpy = sinon.spy(el, 'formatter');
-            paste(el);
+            mimicPaste(el);
             expect(formatterSpy).to.have.been.called;
             // @ts-ignore [allow-protected] in test
             expect(el._isPasting).to.be.true;
@@ -526,7 +533,7 @@ export function runFormatMixinSuite(customConfig) {
             );
             // @ts-ignore [allow-protected] in test
             const reflectBackSpy = sinon.spy(el, '_reflectBackOn');
-            paste(el);
+            mimicPaste(el);
             expect(reflectBackSpy).to.have.been.called;
           });
 
@@ -538,10 +545,65 @@ export function runFormatMixinSuite(customConfig) {
             );
             // @ts-ignore [allow-protected] in test
             const reflectBackSpy = sinon.spy(el, '_reflectBackOn');
-            paste(el);
+            mimicPaste(el);
             expect(reflectBackSpy).to.have.been.called;
           });
         });
+
+        describe('On user input', () => {
+          it('adjusts formatOptions.mode to "user-edited" for parser when user changes value', async () => {
+            const el = /** @type {FormatClass} */ (
+              await fixture(html`<${tag}><input slot="input"></${tag}>`)
+            );
+
+            const parserSpy = sinon.spy(el, 'parser');
+
+            // Here we get auto as we start from '' (so there was no value to edit)
+            mimicUserInput(el, 'some val');
+            expect(/** @type {{mode: string}} */ (parserSpy.lastCall.args[1]).mode).to.equal(
+              'auto',
+            );
+            await el.updateComplete;
+
+            mimicUserInput(el, 'some other val');
+            expect(/** @type {{mode: string}} */ (parserSpy.lastCall.args[1]).mode).to.equal(
+              'user-edited',
+            );
+          });
+
+          it('adjusts formatOptions.viewValueStates when user already formatted value', async () => {
+            const el = /** @type {FormatClass} */ (
+              await fixture(html`<${tag}><input slot="input"></${tag}>`)
+            );
+
+            // Neutralize config, so that we know for sure that the user has formatted the value
+            // when this suite is run on extended classes
+
+            // always reflect back formattedVlaue to view (instead of on blur or else)
+            // @ts-expect-error [allow-protected] in test
+            el._reflectBackOn = () => true;
+            // avoid non-formatted values due to validators in extended classes
+            el.defaultValidators = [];
+            // avoid Unparseable due to parsers in extended classes
+            el.parser = v => v;
+            // @ts-expect-error
+            el.formatter = v => v;
+
+            const parserSpy = sinon.spy(el, 'parser');
+            const formatterSpy = sinon.spy(el, 'formatter');
+
+            mimicUserInput(el, 'some val');
+            expect(parserSpy.lastCall.args[1].viewValueStates).to.not.include('formatted');
+            // @ts-expect-error
+            expect(formatterSpy.lastCall.args[1].viewValueStates).to.not.include('formatted');
+            await el.updateComplete;
+
+            mimicUserInput(el, 'some other val');
+            expect(parserSpy.lastCall.args[1].viewValueStates).to.include('formatted');
+            // @ts-expect-error
+            expect(formatterSpy.lastCall.args[1].viewValueStates).to.include('formatted');
+          });
+        });
       });
 
       describe('Parser', () => {
@@ -597,6 +659,43 @@ export function runFormatMixinSuite(customConfig) {
           expect(_inputNode.value).to.equal(val);
         });
 
+        it('does only calculate derived values as consequence of user input when preprocessed value is different from previous view value', async () => {
+          const val = generateValueBasedOnType({ viewValue: true }) || 'init-value';
+          if (typeof val !== 'string') return;
+
+          const preprocessorSpy = sinon.spy(v => v.replace(/\$$/g, ''));
+          const el = /** @type {FormatClass} */ (
+            await fixture(html`
+          <${tag} .preprocessor=${preprocessorSpy}>
+            <input slot="input" .value="${val}">
+          </${tag}>
+        `)
+          );
+
+          // TODO: find out why we need to skip this for lion-input-stepper
+          if (isLionInputStepper(el)) return;
+
+          /**
+           * The _calculateValues method is called inside _onUserInputChanged w/o providing args
+           * @param {sinon.SinonSpyCall} call
+           * @returns {boolean}
+           */
+          const isCalculateCallAfterUserInput = call => call.args[0]?.length === 0;
+
+          const didRecalculateAfterUserInput = (/** @type {sinon.SinonSpy<any[], any>} */ spy) =>
+            spy.callCount > 1 && !spy.getCalls().find(isCalculateCallAfterUserInput);
+
+          // @ts-expect-error [allow-protected] in test
+          const calcValuesSpy = sinon.spy(el, '_calculateValues');
+          // this value gets preprocessed to 'val'
+          mimicUserInput(el, `${val}$`);
+          expect(didRecalculateAfterUserInput(calcValuesSpy)).to.be.false;
+
+          // this value gets preprocessed to 'value' (and thus differs from previous)
+          mimicUserInput(el, `${val}ue$`);
+          expect(didRecalculateAfterUserInput(calcValuesSpy)).to.be.true;
+        });
+
         it('does not preprocess during composition', async () => {
           const el = /** @type {FormatClass} */ (
             await fixture(html`

package/components/form-core/types/FormatMixinTypes.ts

@@ -3,7 +3,10 @@ import { LitElement } from 'lit';
 import { ValidateHost } from './validate/ValidateMixinTypes.js';
 import { FormControlHost } from './FormControlMixinTypes.js';
 
-export type FormatOptions = { mode: 'pasted' | 'auto' } & object;
+export type FormatOptions = {
+  mode: 'pasted' | 'auto' | 'user-edited';
+  viewValueStates?: 'formatted'[];
+};
 export declare class FormatHost {
   /**
    * Converts viewValue to modelValue

package/components/form-integrations/test/dialog-integrations.test.js

@@ -9,6 +9,7 @@ import { html } from 'lit';
 import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
 import { getAllTagNames } from './helpers/helpers.js';
 import './helpers/umbrella-form.js';
+
 /**
  * @typedef {import('./helpers/umbrella-form.js').UmbrellaForm} UmbrellaForm
  * @typedef {import('../../dialog/src/LionDialog.js').LionDialog} LionDialog
@@ -25,10 +26,12 @@ describe('Form inside dialog Integrations', () => {
       </lion-dialog>`,
     );
 
-    // @ts-ignore
-    const formEl = /** @type {LionForm} */ (el._overlayCtrl.contentNode._lionFormNode);
+    // @ts-expect-error [allow-protected-in-tests]
+    const umbrellaEl = el._overlayCtrl.contentNode;
+    const formEl = /** @type {LionForm} */ (umbrellaEl._lionFormNode);
     await formEl.registrationComplete;
     const registeredEls = getAllTagNames(formEl);
+    await umbrellaEl.waitForAllChildrenUpdates();
 
     expect(registeredEls).to.eql([
       'lion-fieldset',
@@ -86,6 +89,7 @@ describe('Form inside dialog Integrations', () => {
         </div>
       </lion-dialog>
     `);
+
     // @ts-expect-error [allow-protected-in-tests]
     el._overlayInvokerNode.click();
     const lionInput = el.querySelector('[name="input"]');

package/components/form-integrations/test/form-integrations.test.js

@@ -48,7 +48,7 @@ describe('Form Integrations', () => {
       notifications: { value: '', checked: false },
       rsvp: '',
       tel: '',
-      'tel-dropdown': '+44',
+      'tel-dropdown': '',
       comments: '',
     });
   });
@@ -82,7 +82,7 @@ describe('Form Integrations', () => {
       notifications: '',
       rsvp: '',
       tel: '',
-      'tel-dropdown': '+44',
+      'tel-dropdown': '',
       comments: '',
     });
   });