From 6cc79d8303315133b94480fd2de633eb57a1f1fa Mon Sep 17 00:00:00 2001
From: Nicholas Rayburn <52075362+nrayburn-tech@users.noreply.github.com>
Date: Mon, 25 Apr 2022 09:01:40 -0500
Subject: [PATCH] [@mantine/dates] TimeInput: Fix am/pm input not working with
 keyboard events with React 18 (#1322)

---
 .../AmPmInput/AmPmInput.test.tsx              | 13 +++++++
 .../TimeInputBase/AmPmInput/AmPmInput.tsx     |  6 ++-
 .../TimeRangeInput.demo.format.tsx            | 37 +++++++++++++++++++
 .../src/demos/dates/TimeRangeInput/index.ts   |  1 +
 4 files changed, 55 insertions(+), 2 deletions(-)
 create mode 100644 src/mantine-dates/src/components/TimeInputBase/AmPmInput/AmPmInput.test.tsx
 create mode 100644 src/mantine-demos/src/demos/dates/TimeRangeInput/TimeRangeInput.demo.format.tsx

diff --git a/src/mantine-dates/src/components/TimeInputBase/AmPmInput/AmPmInput.test.tsx b/src/mantine-dates/src/components/TimeInputBase/AmPmInput/AmPmInput.test.tsx
new file mode 100644
index 00000000000..f8ed9a0db24
--- /dev/null
+++ b/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);
+  });
+});
diff --git a/src/mantine-dates/src/components/TimeInputBase/AmPmInput/AmPmInput.tsx b/src/mantine-dates/src/components/TimeInputBase/AmPmInput/AmPmInput.tsx
index 02228a43bc5..03a97aacef6 100644
--- a/src/mantine-dates/src/components/TimeInputBase/AmPmInput/AmPmInput.tsx
+++ b/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);
       }
     };
 
diff --git a/src/mantine-demos/src/demos/dates/TimeRangeInput/TimeRangeInput.demo.format.tsx b/src/mantine-demos/src/demos/dates/TimeRangeInput/TimeRangeInput.demo.format.tsx
new file mode 100644
index 00000000000..6007b1ff86d
--- /dev/null
+++ b/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,
+};
diff --git a/src/mantine-demos/src/demos/dates/TimeRangeInput/index.ts b/src/mantine-demos/src/demos/dates/TimeRangeInput/index.ts
index 2a2551c6b6a..1579187f725 100644
--- a/src/mantine-demos/src/demos/dates/TimeRangeInput/index.ts
+++ b/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';