pcm-shared-components 2.1.391 → 2.1.392

package/dist/components/Reservation/AnimalVehicleDetailsEditor/index.js

@@ -54,6 +54,22 @@ const REQUIRED_ERROR_KEY_BY_TYPE = {
   yes_no: 'animal.required_error_yes_no'
 };
 
+// A native <input type="date"> only opens its calendar popup on its own when the browser's tiny
+// built-in icon is clicked -- clicking anywhere else in the field just places the text caret
+// (still lets someone type the year/month/day directly, which showPicker() doesn't change). Most
+// people expect clicking anywhere in the box to open the calendar. showPicker() is Chrome/Edge/
+// Firefox only as of this writing (not Safari) and throws if called on a disabled/read-only input
+// or outside a user gesture, so this fails silently rather than breaking the click -- on an
+// unsupported browser, the field just falls back to manual typing and the browser's own
+// icon-click affordance, exactly as before.
+const openNativeDatePicker = e => {
+  try {
+    e.target.showPicker?.();
+  } catch {
+    // ignore -- unsupported browser or transient DOM state, typing/icon-click still work
+  }
+};
+
 /**
  * Tab-per-item editor for a lot's animal or vehicle detail fields: one tab per item (green
  * check when every required field is answered, amber warning triangle otherwise), an "Add"
@@ -479,6 +495,9 @@ export const AnimalVehicleDetailsEditor = props => {
           fullWidth: true,
           InputLabelProps: {
             shrink: true
+          },
+          inputProps: {
+            onClick: openNativeDatePicker
           }
         });
       } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pcm-shared-components",
-  "version": "2.1.391",
+  "version": "2.1.392",
   "private": false,
   "main": "dist/index.js",
   "babel": {