Fix widgets opening behind dropdowns

Author: wojtekmaj

package.json

@@ -39,9 +39,9 @@
     "prop-types": "^15.6.0",
     "react-calendar": "^3.3.1",
     "react-clock": "^3.0.0",
-    "react-date-picker": "^8.3.2",
+    "react-date-picker": "^8.3.3",
     "react-fit": "^1.0.3",
-    "react-time-picker": "^4.4.1"
+    "react-time-picker": "^4.4.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.15.0",

src/DateTimePicker.jsx

@@ -129,6 +129,10 @@ export default class DateTimePicker extends PureComponent {
     }
 
     if (openWidgetsOnFocus) {
+      if (event.target.getAttribute('data-select') === 'true') {
+        return;
+      }
+
       switch (event.target.name) {
         case 'day':
         case 'month':

src/DateTimePicker.spec.jsx

@@ -371,6 +371,24 @@ describe('DateTimePicker', () => {
 
       expect(calendar2).toHaveLength(0);
     });
+
+    it('does not open Calendar component when focusing on a select element', () => {
+      const component = mount(
+        <DateTimePicker format="dd.MMMM.yyyy hh:mm:ss a" />,
+      );
+
+      const calendar = component.find('Calendar');
+      const select = component.find('select[name="month"]');
+
+      expect(calendar).toHaveLength(0);
+
+      select.simulate('focus');
+      component.update();
+
+      const calendar2 = component.find('Calendar');
+
+      expect(calendar2).toHaveLength(0);
+    });
   });
 
   describe('handles opening Clock component when focusing on an input inside properly', () => {
@@ -427,6 +445,24 @@ describe('DateTimePicker', () => {
 
       expect(clock2).toHaveLength(0);
     });
+
+    it('does not open Clock component when focusing on a select element', () => {
+      const component = mount(
+        <DateTimePicker format="dd.MMMM.yyyy 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 Calendar component when clicked outside', () => {

yarn.lock

@@ -5885,9 +5885,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-date-picker@npm:^8.3.2":
-  version: 8.3.2
-  resolution: "react-date-picker@npm:8.3.2"
+"react-date-picker@npm:^8.3.3":
+  version: 8.3.3
+  resolution: "react-date-picker@npm:8.3.3"
   dependencies:
     "@types/react-calendar": ^3.0.0
     "@wojtekmaj/date-utils": ^1.0.3
@@ -5902,7 +5902,7 @@ __metadata:
   peerDependencies:
     react: ^16.3.0 || ^17.0.0-0
     react-dom: ^16.3.0 || ^17.0.0-0
-  checksum: 545d6ccd5a78a3b77e94481dfd9b7c8eb87c72dcd56acb003921f4090d09ac4cd83fcffd547c2c9baf927b6f8723598cf1fb79afa8b4de0a1b51500bf2e4307b
+  checksum: a0cc3d725ed2baca58062157add6bc40c38b67625bd0826d90e79277e98753ce7d6e496efdee223a9ec3f956bf4ebf4ce1e89e444cdcb815080c61c0f654bf56
   languageName: node
   linkType: hard
 
@@ -5929,10 +5929,10 @@ __metadata:
     react: ^17.0.0
     react-calendar: ^3.3.1
     react-clock: ^3.0.0
-    react-date-picker: ^8.3.2
+    react-date-picker: ^8.3.3
     react-dom: ^17.0.0
     react-fit: ^1.0.3
-    react-time-picker: ^4.4.1
+    react-time-picker: ^4.4.2
     rimraf: ^3.0.0
   peerDependencies:
     react: ^16.3.0 || ^17.0.0-0
@@ -6006,9 +6006,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-time-picker@npm:^4.4.1":
-  version: 4.4.1
-  resolution: "react-time-picker@npm:4.4.1"
+"react-time-picker@npm:^4.4.2":
+  version: 4.4.2
+  resolution: "react-time-picker@npm:4.4.2"
   dependencies:
     "@wojtekmaj/date-utils": ^1.0.0
     get-user-locale: ^1.2.0
@@ -6022,7 +6022,7 @@ __metadata:
   peerDependencies:
     react: ^16.3.0 || ^17.0.0-0
     react-dom: ^16.3.0 || ^17.0.0-0
-  checksum: 6d9658b6b2673baeab014d62257d0e65d00fe14571e27dd1b9b5fbfa03b7dc7d7d10d1965ce850896cca9414157e0bccacae4f868efdf7a95da93c63dc2a9b29
+  checksum: 9d7efbc6a4e7e2607992459bb54d7444992f4375e06cc0f071b56000de8d70c4eac99ee6fa12a757008451ac29539745edee75ea4751cf600d7a1e8d13f5b392
   languageName: node
   linkType: hard