fix(input-tel): remove the country telephone code from the modelValue on init (#2432)

.changeset/plenty-poets-drop.md

@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+[input-tel-dropdown] remove the country telephone code from the modelValue on init, only have it as viewValue

packages/ui/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: '',
     });
   });

packages/ui/components/input-tel-dropdown/src/LionInputTelDropdown.js

@@ -158,11 +158,11 @@ export class LionInputTelDropdown extends LionInputTel {
     super.styles,
     css`
       /**
-           * We need to align the height of the dropdown with the height of the text field.
+       * We need to align the height of the dropdown with the height of the text field.
-           * We target the HTMLDivElement (render wrapper from SlotMixin) here. Its child,
+       * We target the HTMLDivElement (render wrapper from SlotMixin) here. Its child,
-           * [data-ref=dropdown], recieves a 100% height as well via inline styles (since we
+       * [data-ref=dropdown], receives a 100% height as well via inline styles (since we
-           * can't target from shadow styles).
+       * can't target from shadow styles).
-           */
+       */
       ::slotted([slot='prefix']) {
         height: 100%;
       }
@@ -301,7 +301,8 @@ export class LionInputTelDropdown extends LionInputTel {
       } else {
         this.__initializedRegionCode = `+${countryCode}`;
       }
-      this.modelValue = this.__initializedRegionCode;
+      // on init we set the value to the _inputNode and not the modelValue to prevent validation
+      this._inputNode.value = this.__initializedRegionCode;
       this._initialModelValue = this.__initializedRegionCode;
       this.initInteractionState();
     }

packages/ui/components/input-tel-dropdown/test/LionInputTelDropdown.test.js

@@ -9,8 +9,10 @@ import { LionOption } from '@lion/ui/listbox.js';
 import { ref } from 'lit/directives/ref.js';
 import { html } from 'lit';
 
+import { mockPhoneUtilManager, restorePhoneUtilManager } from '@lion/ui/input-tel-test-helpers.js';
 import { isActiveElement } from '../../core/test-helpers/isActiveElement.js';
 import { ScopedElementsMixin } from '../../core/src/ScopedElementsMixin.js';
+import '@lion/ui/define/lion-input-tel-dropdown.js';
 
 /**
  * @typedef {import('../types/index.js').TemplateDataForDropdownInputTel} TemplateDataForDropdownInputTel
@@ -67,6 +69,18 @@ describe('WithFormControlInputTelDropdown', () => {
   // Runs it for LionSelectRich, which uses .modelValue/@model-value-changed instead of .value/@change
   runInputTelDropdownSuite({ klass: WithFormControlInputTelDropdown });
 
+  it("it doesn't set the country as modelValue, only as viewValue", async () => {
+    const el = /** @type {LionInputTelDropdown} */ (
+      await fixture(html`
+        <lion-input-tel-dropdown .allowedRegions="${['NL']}"></lion-input-tel-dropdown>
+      `)
+    );
+
+    // @ts-expect-error [allow-protected-in-tests]
+    expect(el._inputNode.value).to.equal('+31');
+    expect(el.modelValue).to.equal('');
+  });
+
   it('focuses the textbox right after selection if selected via opened dropdown if interaction-mode is mac', async () => {
     class InputTelDropdownMac extends LionInputTelDropdown {
       static templates = {
@@ -172,4 +186,40 @@ describe('WithFormControlInputTelDropdown', () => {
       expect(isActiveElement(el._inputNode)).to.be.false;
     }
   });
+
+  describe('defaultValidators', () => {
+    /** @type {(value:any) => void} */
+    let resolveLoaded;
+    beforeEach(() => {
+      ({ resolveLoaded } = mockPhoneUtilManager());
+    });
+
+    afterEach(() => {
+      restorePhoneUtilManager();
+    });
+
+    it('without interaction are not called', async () => {
+      const el = /** @type {LionInputTelDropdown} */ (
+        await fixture(html`
+          <lion-input-tel-dropdown .allowedRegions="${['NL']}"></lion-input-tel-dropdown>
+        `)
+      );
+      resolveLoaded(undefined);
+      await aTimeout(0);
+      expect(el.hasFeedbackFor).to.deep.equal([]);
+    });
+
+    it('with interaction are called', async () => {
+      const el = /** @type {LionInputTelDropdown} */ (
+        await fixture(html`
+          <lion-input-tel-dropdown .allowedRegions="${['NL']}"></lion-input-tel-dropdown>
+        `)
+      );
+      el.modelValue = '+31 6';
+
+      resolveLoaded(undefined);
+      await aTimeout(0);
+      expect(el.hasFeedbackFor).to.deep.equal(['error']);
+    });
+  });
 });