diff --git a/.changeset/fast-grapes-care.md b/.changeset/fast-grapes-care.md new file mode 100644 index 000000000..af58f8080 --- /dev/null +++ b/.changeset/fast-grapes-care.md @@ -0,0 +1,5 @@ +--- +'@lion/input-tel-dropdown': patch +--- + +add fix for edge cases onDropdownValueChange diff --git a/packages/input-tel-dropdown/src/LionInputTelDropdown.js b/packages/input-tel-dropdown/src/LionInputTelDropdown.js index a64d6b7d9..9a3daa87d 100644 --- a/packages/input-tel-dropdown/src/LionInputTelDropdown.js +++ b/packages/input-tel-dropdown/src/LionInputTelDropdown.js @@ -316,7 +316,7 @@ export class LionInputTelDropdown extends LionInputTel { const isInitializing = event.detail?.initialize || !this._phoneUtil; const dropdownValue = /** @type {RegionCode} */ (event.target.modelValue || event.target.value); - if (isInitializing || (this.activeRegion && this.activeRegion === dropdownValue)) { + if (isInitializing || this.activeRegion === dropdownValue) { return; } @@ -328,9 +328,15 @@ export class LionInputTelDropdown extends LionInputTel { if (prevActiveRegion !== this.activeRegion && !this.focused && this._phoneUtil) { const prevCountryCode = this._phoneUtil.getCountryCodeForRegionCode(prevActiveRegion); const countryCode = this._phoneUtil.getCountryCodeForRegionCode(this.activeRegion); - this.modelValue = this._callParser( - this.value.replace(`+${prevCountryCode}`, `+${countryCode}`), - ); + if (this.value.includes(`+${prevCountryCode}`)) { + this.modelValue = this._callParser( + this.value.replace(`+${prevCountryCode}`, `+${countryCode}`), + ); + } else { + // In case of dropdown has +31, and input has only +3 + const valueObj = this.value.split(' '); + this.modelValue = this._callParser(this.value.replace(valueObj[0], `+${countryCode}`)); + } } // Put focus on text box diff --git a/packages/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js b/packages/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js index 5dbe669ff..2a28e836f 100644 --- a/packages/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js +++ b/packages/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js @@ -272,6 +272,56 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo expect(el.value).to.equal('+32612345678'); }); + it('changes the currently active country code in the textbox when empty', async () => { + const el = await fixture(html` <${tag} .allowedRegions="${['NL', 'BE']}"> `); + el.value = ''; + // @ts-ignore + mimicUserChangingDropdown(el.refs.dropdown.value, 'BE'); + await el.updateComplete; + await el.updateComplete; + expect(el.value).to.equal('+32'); + }); + + it('changes the currently active country code in the textbox when invalid', async () => { + const el = await fixture(html` <${tag} .allowedRegions="${['NL', 'BE']}"> `); + el.value = '+3'; + // @ts-ignore + mimicUserChangingDropdown(el.refs.dropdown.value, 'BE'); + await el.updateComplete; + await el.updateComplete; + expect(el.value).to.equal('+32'); + }); + + it('changes the currently active country code in the textbox when invalid and small part of phone number', async () => { + const el = await fixture(html` <${tag} .allowedRegions="${['NL', 'BE']}"> `); + el.value = '+3 2'; + // @ts-ignore + mimicUserChangingDropdown(el.refs.dropdown.value, 'BE'); + await el.updateComplete; + await el.updateComplete; + expect(el.value).to.equal('+32 2'); + }); + + it('changes the currently active country code in the textbox when invalid and bigger part of phone number', async () => { + const el = await fixture(html` <${tag} .allowedRegions="${['NL', 'BE']}"> `); + el.value = '+3 612345678'; + // @ts-ignore + mimicUserChangingDropdown(el.refs.dropdown.value, 'BE'); + await el.updateComplete; + await el.updateComplete; + expect(el.value).to.equal('+32 612345678'); + }); + + it('changes the currently phonenumber completely in the textbox when not sure what to replace', async () => { + const el = await fixture(html` <${tag} .allowedRegions="${['NL', 'BE']}""> `); + el.value = '+9912345678'; + // @ts-ignore + mimicUserChangingDropdown(el.refs.dropdown.value, 'BE'); + await el.updateComplete; + await el.updateComplete; + expect(el.value).to.equal('+32'); + }); + it('focuses the textbox right after selection if selected via opened dropdown', async () => { const el = await fixture( html` <${tag} .allowedRegions="${[ @@ -306,17 +356,6 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo // @ts-expect-error [allow-protected-in-tests] expect(el._inputNode).to.not.equal(document.activeElement); }); - - it('prefills country code when textbox is empty', async () => { - const el = await fixture( - html` <${tag} .allowedRegions="${['NL', 'BE']}" .modelValue="${''}"> `, - ); - // @ts-ignore - mimicUserChangingDropdown(el.refs.dropdown.value, 'BE'); - await el.updateComplete; - await el.updateComplete; - expect(el.value).to.equal('+32'); - }); }); describe('On activeRegion change', () => {