From a256f737c057c1d166671bd2facce2f3d2171507 Mon Sep 17 00:00:00 2001 From: gerjanvangeest Date: Thu, 19 Dec 2024 09:15:02 +0100 Subject: [PATCH] fix(input-tel): remove the country telephone code from the modelValue on init (#2432) --- .changeset/plenty-poets-drop.md | 5 ++ .../test/form-integrations.test.js | 4 +- .../src/LionInputTelDropdown.js | 13 ++--- .../test/LionInputTelDropdown.test.js | 50 +++++++++++++++++++ 4 files changed, 64 insertions(+), 8 deletions(-) create mode 100644 .changeset/plenty-poets-drop.md 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']); + }); + }); });