diff --git a/.changeset/plenty-poets-drop.md b/.changeset/plenty-poets-drop.md
new file mode 100644
index 000000000..b5f86cd59
--- /dev/null
+++ b/.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
diff --git a/packages/ui/components/form-integrations/test/form-integrations.test.js b/packages/ui/components/form-integrations/test/form-integrations.test.js
index 8739192e6..9be269bd8 100644
--- a/packages/ui/components/form-integrations/test/form-integrations.test.js
+++ b/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: '',
});
});
diff --git a/packages/ui/components/input-tel-dropdown/src/LionInputTelDropdown.js b/packages/ui/components/input-tel-dropdown/src/LionInputTelDropdown.js
index c1dc16e4c..603382a49 100644
--- a/packages/ui/components/input-tel-dropdown/src/LionInputTelDropdown.js
+++ b/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 target the HTMLDivElement (render wrapper from SlotMixin) here. Its child,
- * [data-ref=dropdown], recieves a 100% height as well via inline styles (since we
- * can't target from shadow styles).
- */
+ * 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,
+ * [data-ref=dropdown], receives a 100% height as well via inline styles (since we
+ * 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();
}
diff --git a/packages/ui/components/input-tel-dropdown/test/LionInputTelDropdown.test.js b/packages/ui/components/input-tel-dropdown/test/LionInputTelDropdown.test.js
index 3ec5629ab..0321e430c 100644
--- a/packages/ui/components/input-tel-dropdown/test/LionInputTelDropdown.test.js
+++ b/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`
+
+ `)
+ );
+
+ // @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`
+
+ `)
+ );
+ resolveLoaded(undefined);
+ await aTimeout(0);
+ expect(el.hasFeedbackFor).to.deep.equal([]);
+ });
+
+ it('with interaction are called', async () => {
+ const el = /** @type {LionInputTelDropdown} */ (
+ await fixture(html`
+
+ `)
+ );
+ el.modelValue = '+31 6';
+
+ resolveLoaded(undefined);
+ await aTimeout(0);
+ expect(el.hasFeedbackFor).to.deep.equal(['error']);
+ });
+ });
});