Repository: ionic-team/ionic-framework
File: core/src/components/picker/test/keyboard-entry/picker.e2e.ts (TypeScript)

Code before:

            column.appendChild(option);
          });
        </script>
      `,
        config
      );

      const column = page.locator('ion-picker-column');
      const ionChange = await page.spyOnEvent('ionChange');
      await column.evaluate((el: HTMLIonPickerColumnElement) => el.setFocus());

      await page.keyboard.press('Digit0');

      await expect(ionChange).toHaveReceivedEventDetail({ value: 12 });
      await expect(column).toHaveJSProperty('value', 12);
    });

    test('should allow typing 22 in a column where the max value is 23 and not just set it to 2', async ({ page }) => {
      await page.setContent(
        `
    <ion-picker>
      <ion-picker-column></ion-picker-column>
    </ion-picker>

    <script>
      const column = document.querySelector('ion-picker-column');
      column.numericInput = true;
      const items = [
        { text: '01', value: 1 },
        { text: '02', value: 2},
        { text: '20', value: 20 },
        { text: '21', value: 21 },
        { text: '22', value: 22 },
        { text: '23', value: 23 }
      ];

      items.forEach((item) => {
        const option = document.createElement('ion-picker-column-option');
        option.value = item.value;
        option.textContent = item.text;

        column.appendChild(option);
      });
    </script>
  `,
        config
      );

      const column = page.locator('ion-picker-column');
      const ionChange = await page.spyOnEvent('ionChange');

Review comment (suggestion):
Since these tests are related to an issue, we add an annotation to make sure we don't forgot why we added them in in the first place.

```suggestion
      testInfo.annotations.push({
         type: 'issue',
         description: 'https://github.com/ionic-team/ionic-framework/issues/28877',
      });
      await page.setContent(
```

Code after:

            column.appendChild(option);
          });
        </script>
      `,
        config
      );

      const column = page.locator('ion-picker-column');
      const ionChange = await page.spyOnEvent('ionChange');
      await column.evaluate((el: HTMLIonPickerColumnElement) => el.setFocus());

      await page.keyboard.press('Digit0');

      await expect(ionChange).toHaveReceivedEventDetail({ value: 12 });
      await expect(column).toHaveJSProperty('value', 12);
    });

    test('should allow typing 22 in a column where the max value is 23 and not just set it to 2', async ({
      page,
    }, testInfo) => {
      testInfo.annotations.push({
        type: 'issue',
        description: 'https://github.com/ionic-team/ionic-framework/issues/28877',
      });
      await page.setContent(
        `
    <ion-picker>
      <ion-picker-column id="hours"></ion-picker-column>
      <ion-picker-column id="minutes"></ion-picker-column>
    </ion-picker>

    <script>
      const hoursColumn = document.querySelector('ion-picker-column#hours');
      hoursColumn.numericInput = true;
      const hourItems = [
        { text: '01', value: 1 },
        { text: '02', value: 2},
        { text: '20', value: 20 },
        { text: '21', value: 21 },
        { text: '22', value: 22 },
        { text: '23', value: 23 }
      ];

      hourItems.forEach((item) => {
        const option = document.createElement('ion-picker-column-option');
        option.value = item.value;
        option.textContent = item.text;

        hoursColumn.appendChild(option);
      });