javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(picker): keyboard entry works with options

Browse Source
This commit is contained in:
Liam DeBeasi
2023-12-06 11:58:53 -05:00
parent ca1b51938d
commit f88b74dcda
2 changed files with 52 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
core/src/components/picker/picker.tsx
View File

@@ -323,7 +323,9 @@ export class Picker implements ComponentInterface {
return;
}
const values = inputModeColumn.items.filter((item) => item.disabled !== true);
const options = Array.from(inputModeColumn.querySelectorAll('ion-picker-column-option')).filter(
(el) => el.disabled !== true
);
/**
* If users pause for a bit, the search
@@ -368,8 +370,8 @@ export class Picker implements ComponentInterface {
* 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 }) => {
const parsedText = text.replace(/^0+(?=[1-9])|0+(?=0$)/, '');
const findItemFromCompleteValue = options.find(({ textContent }) => {
const parsedText = textContent!.replace(/^0+(?=[1-9])|0+(?=0$)/, '');
return parsedText === inputEl.value;
});
@@ -401,10 +403,12 @@ export class Picker implements ComponentInterface {
zeroBehavior: 'start' | 'end' = 'start'
) => {
const behavior = zeroBehavior === 'start' ? /^0+/ : /0$/;
const item = colEl.items.find(({ text, disabled }) => disabled !== true && text.replace(behavior, '') === value);
const option = Array.from(colEl.querySelectorAll('ion-picker-column-option')).find((el) => {
return el.disabled !== true && el.textContent!.replace(behavior, '') === value;
});
if (item) {
colEl.setValue(item.value);
if (option) {
colEl.setValue(option.value);
}
};

55
core/src/components/picker/test/keyboard-entry/picker.e2e.ts
View File

@@ -5,9 +5,8 @@ import type { E2ELocator } from '@utils/test/playwright/page/utils/locator';
/**
* This behavior does not vary across modes/directions.
*/
// TODO FW-5580 fix this functionality
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
test.describe.skip(title('picker: keyboard entry'), () => {
test.describe(title('picker: keyboard entry'), () => {
test('should scroll to and update the value prop for a single column', async ({ page }) => {
await page.setContent(
`
@@ -17,15 +16,22 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
<script>
const column = document.querySelector('ion-picker-column');
column.items = [
column.numericInput = true;
const items = [
{ 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;
items.forEach((item) => {
const option = document.createElement('ion-picker-column-option');
option.value = item.value;
option.textContent = item.text;
column.appendChild(option);
});
</script>
`,
config
@@ -37,7 +43,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
await page.keyboard.press('Digit2');
await expect(ionChange).toHaveReceivedEventDetail({ text: '02', value: 2 });
await expect(ionChange).toHaveReceivedEventDetail({ value: 2 });
await expect(column).toHaveJSProperty('value', 2);
});
@@ -51,7 +57,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
<script>
const firstColumn = document.querySelector('ion-picker-column#first');
firstColumn.items = [
const firstItems = [
{ text: '01', value: 1 },
{ text: '02', value: 2 },
{ text: '03', value: 3 },
@@ -61,8 +67,16 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
firstColumn.value = 5;
firstColumn.numericInput = true;
firstItems.forEach((item) => {
const option = document.createElement('ion-picker-column-option');
option.value = item.value;
option.textContent = item.text;
firstColumn.appendChild(option);
});
const secondColumn = document.querySelector('ion-picker-column#second');
secondColumn.items = [
const secondItems = [
{ text: '20', value: 20 },
{ text: '21', value: 21 },
{ text: '22', value: 22 },
@@ -71,11 +85,18 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
];
secondColumn.value = 22;
secondColumn.numericInput = true;
secondItems.forEach((item) => {
const option = document.createElement('ion-picker-column-option');
option.value = item.value;
option.textContent = item.text;
secondColumn.appendChild(option);
});
</script>
`,
config
);
const firstColumn = page.locator('ion-picker-column#first');
const secondColumn = page.locator('ion-picker-column#second');
const highlight = page.locator('ion-picker .picker-highlight');
@@ -92,12 +113,12 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
await page.keyboard.press('Digit2');
await expect(firstIonChange).toHaveReceivedEventDetail({ text: '02', value: 2 });
await expect(firstIonChange).toHaveReceivedEventDetail({ value: 2 });
await expect(firstColumn).toHaveJSProperty('value', 2);
await page.keyboard.press('Digit2+Digit4');
await expect(secondIonChange).toHaveReceivedEventDetail({ text: '24', value: 24 });
await expect(secondIonChange).toHaveReceivedEventDetail({ value: 24 });
await expect(secondColumn).toHaveJSProperty('value', 24);
});
@@ -110,7 +131,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
<script>
const column = document.querySelector('ion-picker-column');
column.items = [
const items = [
{ text: '00', value: 12 },
{ text: '01', value: 1 },
{ text: '02', value: 2 },
@@ -120,6 +141,14 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
];
column.value = 5;
column.numericInput = true;
items.forEach((item) => {
const option = document.createElement('ion-picker-column-option');
option.value = item.value;
option.textContent = item.text;
column.appendChild(option);
});
</script>
`,
config
@@ -131,7 +160,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
await page.keyboard.press('Digit0');
await expect(ionChange).toHaveReceivedEventDetail({ text: '00', value: 12 });
await expect(ionChange).toHaveReceivedEventDetail({ value: 12 });
await expect(column).toHaveJSProperty('value', 12);
});
});