fix(datetime): keyboard can select hour 00 (#26423)

resolves #26409
This commit is contained in:
Liam DeBeasi
2022-12-07 15:09:27 -05:00
committed by GitHub
parent 409d813103
commit 2fc96b7714
2 changed files with 40 additions and 2 deletions

View File

@ -356,9 +356,16 @@ export class PickerInternal implements ComponentInterface {
* is "1" and we entered "2", then the complete value * is "1" and we entered "2", then the complete value
* is "12" and we should select hour 12. * is "12" and we should select hour 12.
* *
* Regex removes any leading zeros from values like "02". * Regex removes any leading zeros from values like "02",
* but it keeps a single zero if there are only zeros in the string.
* 0+(?=[1-9]) --> Match 1 or more zeros that are followed by 1-9
* 0+(?=0$) --> Match 1 or more zeros that must be followed by one 0 and end.
*/ */
const findItemFromCompleteValue = values.find(({ text }) => text.replace(/^0+/, '') === inputEl.value); const findItemFromCompleteValue = values.find(({ text }) => {
const parsedText = text.replace(/^0+(?=[1-9])|0+(?=0$)/, '');
return parsedText === inputEl.value;
});
if (findItemFromCompleteValue) { if (findItemFromCompleteValue) {
inputModeColumn.setValue(findItemFromCompleteValue.value); inputModeColumn.setValue(findItemFromCompleteValue.value);
return; return;

View File

@ -89,4 +89,35 @@ test.describe('picker-internal: keyboard entry', () => {
await expect(secondIonChange).toHaveReceivedEventDetail({ text: '24', value: 24 }); await expect(secondIonChange).toHaveReceivedEventDetail({ text: '24', value: 24 });
await expect(secondColumn).toHaveJSProperty('value', 24); await expect(secondColumn).toHaveJSProperty('value', 24);
}); });
test('should select 00', async ({ page }) => {
await page.setContent(`
<ion-picker-internal>
<ion-picker-column-internal></ion-picker-column-internal>
</ion-picker-internal>
<script>
const column = document.querySelector('ion-picker-column-internal');
column.items = [
{ text: '00', value: 12 },
{ text: '01', value: 1 },
{ text: '02', value: 2 },
{ text: '03', value: 3 },
{ text: '04', value: 4 },
{ text: '05', value: 5 }
];
column.value = 5;
column.numericInput = true;
</script>
`);
const column = page.locator('ion-picker-column-internal');
const ionChange = await page.spyOnEvent('ionChange');
await column.focus();
await page.keyboard.press('Digit0');
await expect(ionChange).toHaveReceivedEventDetail({ text: '00', value: 12 });
await expect(column).toHaveJSProperty('value', 12);
});
}); });