Fix Clock opening behind AM/PM dropdown

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}

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();
     }
   }

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', () => {