ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(input-tel-dropdown): fix edge cases onDropdownValueChanged (#1723)

Browse source
This commit is contained in:
gerjanvangeest 2022-06-01 15:34:38 +02:00 committed by GitHub
parent 20436115c3
commit 3dee788fb5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 65 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/fast-grapes-care.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/input-tel-dropdown': patch
---
add fix for edge cases onDropdownValueChange

14
packages/input-tel-dropdown/src/LionInputTelDropdown.js
View file

@ -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

61
packages/input-tel-dropdown/test-suites/LionInputTelDropdown.suite.js
View file

@ -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']}"></${tag}> `);
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']}"></${tag}> `);
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']}"></${tag}> `);
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']}"></${tag}> `);
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']}""></${tag}> `);
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="${''}"></${tag}> `,
);
// @ts-ignore
mimicUserChangingDropdown(el.refs.dropdown.value, 'BE');
await el.updateComplete;
await el.updateComplete;
expect(el.value).to.equal('+32');
});
});
describe('On activeRegion change', () => {