From f9081c804531c7a87762446918909d482552617d Mon Sep 17 00:00:00 2001
From: Wojciech Maj <kontakt@wojtekmaj.pl>
Date: Mon, 27 Sep 2021 11:11:34 +0200
Subject: [PATCH] Fix Clock opening behind AM/PM dropdown

---
 src/TimeInput/AmPm.jsx  |  1 +
 src/TimePicker.jsx      |  4 ++++
 src/TimePicker.spec.jsx | 18 ++++++++++++++++++
 3 files changed, 23 insertions(+)

diff --git a/src/TimeInput/AmPm.jsx b/src/TimeInput/AmPm.jsx
index dd95c665..ee0d6561 100644
--- a/src/TimeInput/AmPm.jsx
+++ b/src/TimeInput/AmPm.jsx
@@ -33,6 +33,7 @@ export default function AmPm({
         `${className}__${name}`,
       )}
       data-input="true"
+      data-select="true"
       disabled={disabled}
       name={name}
       onChange={onChange}
diff --git a/src/TimePicker.jsx b/src/TimePicker.jsx
index d3685feb..4fa8ce7a 100644
--- a/src/TimePicker.jsx
+++ b/src/TimePicker.jsx
@@ -85,6 +85,10 @@ export default class TimePicker extends PureComponent {
     }
 
     if (openClockOnFocus) {
+      if (event.target.getAttribute('data-select') === 'true') {
+        return;
+      }
+
       this.openClock();
     }
   }
diff --git a/src/TimePicker.spec.jsx b/src/TimePicker.spec.jsx
index b314291e..2d9b0ff6 100644
--- a/src/TimePicker.spec.jsx
+++ b/src/TimePicker.spec.jsx
@@ -302,6 +302,24 @@ describe('TimePicker', () => {
 
       expect(clock2).toHaveLength(0);
     });
+
+    it('does not open Clock component when focusing on a select element', () => {
+      const component = mount(
+        <TimePicker format="hh:mm:ss a" />,
+      );
+
+      const clock = component.find('Clock');
+      const select = component.find('select[name="amPm"]');
+
+      expect(clock).toHaveLength(0);
+
+      select.simulate('focus');
+      component.update();
+
+      const clock2 = component.find('Clock');
+
+      expect(clock2).toHaveLength(0);
+    });
   });
 
   it('closes Clock component when clicked outside', () => {