[@mantine/dates] TimeInput: Fix am/pm input not working with keyboard…

… events with React 18 (#1322)

src/mantine-dates/src/components/TimeInputBase/AmPmInput/AmPmInput.test.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { AmPmInput } from './AmPmInput';
+
+describe('@mantine/dates/TimeInputBase/AmPmInput', () => {
+  it.each([['a'], ['p'], ['{arrowdown}']])('triggers onChange once for %s', (value) => {
+    const spy = jest.fn();
+    const { container } = render(<AmPmInput onChange={spy} size="md" />);
+    userEvent.type(container.querySelector('input'), value);
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+});

src/mantine-dates/src/components/TimeInputBase/AmPmInput/AmPmInput.tsx

@@ -34,11 +34,13 @@ export const AmPmInput = forwardRef<HTMLInputElement, AmPmSelectProps>(
       }
 
       if (event.key === 'p' || event.nativeEvent.code === 'KeyP') {
-        onChange('pm', false);
+        event.preventDefault();
+        onChange('pm', true);
       }
 
       if (event.key === 'a' || event.nativeEvent.code === 'KeyA') {
-        onChange('am', false);
+        event.preventDefault();
+        onChange('am', true);
       }
     };
 

src/mantine-demos/src/demos/dates/TimeRangeInput/TimeRangeInput.demo.format.tsx

@@ -0,0 +1,37 @@
+import dayjs from 'dayjs';
+import React from 'react';
+import { Container } from '@mantine/core';
+import { TimeRangeInput } from '@mantine/dates';
+
+const code = `
+import dayjs from 'dayjs';
+import { TimeRangeInput } from '@mantine/dates';
+
+function Demo() {
+  return (
+    <TimeRangeInput
+      label="Appointment time"
+      format="12"
+      defaultValue={[new Date(), dayjs(new Date()).add(30, 'minutes').toDate()]}
+    />
+  );
+}
+`;
+
+function Demo() {
+  return (
+    <Container size={340}>
+      <TimeRangeInput
+        label="Appointment time"
+        format="12"
+        defaultValue={[new Date(), dayjs(new Date()).add(30, 'minutes').toDate()]}
+      />
+    </Container>
+  );
+}
+
+export const format: MantineDemo = {
+  type: 'demo',
+  code,
+  component: Demo,
+};

src/mantine-demos/src/demos/dates/TimeRangeInput/index.ts

@@ -1,2 +1,3 @@
 export { usage } from './TimeRangeInput.demo.usage';
 export { withSeconds } from './TimeRangeInput.demo.withSeconds';
+export { format } from './TimeRangeInput.demo.format';