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

fix(input-tel-dropdown): do not sync regionCode if countryCode is the same

Browse source
This commit is contained in:
gvangeest 2022-05-04 11:35:53 +02:00 committed by Thijs Louisse
parent 5a68c3fff5
commit 710e7c3d9e
4 changed files with 61 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/old-ties-relax.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/input-tel-dropdown': patch
---
Do not sync regionCode from input to dropdown if the countryCode didn't change

5
.changeset/poor-mugs-bow.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/input-tel-dropdown': patch
---
Only focus input on dropdownValue change if dropdown was opened. Otherwise it blocks user from use type ahead on the dropdown.

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

@ -300,9 +300,6 @@ export class LionInputTelDropdown extends LionInputTel {
setTimeout(() => {
this._inputNode.focus();
});
} else {
// For native select
this._inputNode.focus();
}
}
@ -333,9 +330,23 @@ export class LionInputTelDropdown extends LionInputTel {
if (!dropdownElement || !regionCode) {
return;
}
const inputCountryCode = this._phoneUtil?.getCountryCodeForRegionCode(regionCode);
if ('modelValue' in dropdownElement) {
const dropdownCountryCode = this._phoneUtil?.getCountryCodeForRegionCode(
dropdownElement.modelValue,
);
if (dropdownCountryCode === inputCountryCode) {
return;
}
/** @type {* & FormatHost} */ (dropdownElement).modelValue = regionCode;
} else {
const dropdownCountryCode = this._phoneUtil?.getCountryCodeForRegionCode(
dropdownElement.value,
);
if (dropdownCountryCode === inputCountryCode) {
return;
}
/** @type {HTMLSelectElement} */ (dropdownElement).value = regionCode;
}
}

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

@ -28,7 +28,7 @@ const fixtureSync = /** @type {(arg: string | TemplateResult) => LionInputTelDro
);
/**
* @param {DropdownElement} dropdownEl
* @param {DropdownElement | HTMLSelectElement} dropdownEl
* @returns {string}
*/
function getDropdownValue(dropdownEl) {
@ -183,18 +183,39 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo
expect(el.value).to.equal('+32612345678');
});
it('focuses the textbox right after selection', async () => {
it('focuses the textbox right after selection if selected via opened dropdown', async () => {
const el = await fixture(
html` <${tag} .allowedRegions="${[
'NL',
'BE',
]}" .modelValue="${'+31612345678'}"></${tag}> `,
);
const dropdownElement = el.refs.dropdown.value;
// @ts-expect-error [allow-protected-in-tests]
if (dropdownElement?._overlayCtrl) {
// @ts-expect-error [allow-protected-in-tests]
dropdownElement._overlayCtrl.show();
mimicUserChangingDropdown(dropdownElement, 'BE');
await el.updateComplete;
await aTimeout(0);
// @ts-expect-error [allow-protected-in-tests]
expect(el._inputNode).to.equal(document.activeElement);
}
});
it('keeps focus on dropdownElement after selection if selected via unopened dropdown', async () => {
const el = await fixture(
html` <${tag} .allowedRegions="${[
'NL',
'BE',
]}" .modelValue="${'+31612345678'}"></${tag}> `,
);
const dropdownElement = el.refs.dropdown.value;
// @ts-ignore
mimicUserChangingDropdown(el.refs.dropdown.value, 'BE');
mimicUserChangingDropdown(dropdownElement, 'BE');
await el.updateComplete;
// @ts-expect-error
expect(el._inputNode).to.equal(document.activeElement);
// @ts-expect-error [allow-protected-in-tests]
expect(el._inputNode).to.not.equal(document.activeElement);
});
it('prefills country code when textbox is empty', async () => {
@ -218,6 +239,17 @@ export function runInputTelDropdownSuite({ klass } = { klass: LionInputTelDropdo
'BE',
);
});
it('keeps dropdown value if countryCode is the same', async () => {
const el = await fixture(html` <${tag} .modelValue="${'+12345678901'}"></${tag}> `);
expect(el.activeRegion).to.equal('US');
// @ts-expect-error [allow-protected-in test]
el._setActiveRegion('AG'); // Also +1
await el.updateComplete;
expect(getDropdownValue(/** @type {DropdownElement} */ (el.refs.dropdown.value))).to.equal(
'US',
);
});
});
});
}