@7shifts/sous-chef 3.31.1-beta2 → 3.31.1-beta4

package/dist/index.js

@@ -6457,7 +6457,8 @@ var Calendar = function Calendar(_ref) {
     disabledDays = _ref.disabledDays,
     anchorRef = _ref.anchorRef,
     testId = _ref.testId,
-    onMonthChange = _ref.onMonthChange;
+    onMonthChange = _ref.onMonthChange,
+    id = _ref.id;
   var _useState = React.useState(null),
     calendarRef = _useState[0],
     setCalendarRef = _useState[1];
@@ -6520,7 +6521,9 @@ var Calendar = function Calendar(_ref) {
     }
   };
   return React__default.createElement(Portal, null, React__default.createElement("div", {
-    className: styles$G['calendar']
+    className: styles$G['calendar'],
+    id: id,
+    tabIndex: 1
   }, React__default.createElement("div", {
     className: styles$G['calendar__overlay'],
     ref: function ref(_ref2) {
@@ -9082,6 +9085,7 @@ var DateField = function DateField(_ref) {
     onMonthChange = _ref.onMonthChange,
     testId = _ref.testId,
     weekStart = _ref.weekStart;
+  var calendarId = name + "-calendar";
   var maskfy = useFieldMask(format);
   var inputRef = React.useRef(null);
   var _useState = React.useState(false),
@@ -9146,9 +9150,6 @@ var DateField = function DateField(_ref) {
     onFocus: function onFocus(e) {
       setShowCalendar(true);
       maskfy(e.target);
-      setTimeout(function () {
-        e.target.setSelectionRange(0, 0);
-      }, 10);
     },
     onClick: function onClick() {
       return setShowCalendar(true);
@@ -9161,7 +9162,20 @@ var DateField = function DateField(_ref) {
         controllers.onChange(parsedDate);
       }
     },
-    onBlur: controllers.onBlur,
+    onBlur: function onBlur(event) {
+      setTimeout(function () {
+        var calendar = document.getElementById(calendarId);
+        if (!calendar || calendar.contains(document.activeElement)) {
+          return;
+        }
+        var parsedDate = parseDate(event.target.value, format);
+        if (!parsedDate) {
+          controllers.onChange(undefined);
+        }
+        controllers.onBlur();
+        setShowCalendar(false);
+      }, 100);
+    },
     defaultValue: getDefaultValue()
   })), showCalendar && React__default.createElement(Calendar, {
     onSelect: function onSelect(date) {
@@ -9184,7 +9198,8 @@ var DateField = function DateField(_ref) {
     initialMonth: initialMonth,
     onMonthChange: onMonthChange,
     weekStart: weekStart,
-    key: selectedDate ? formatDate(selectedDate, format) : ''
+    key: selectedDate ? formatDate(selectedDate, format) : '',
+    id: calendarId
   }));
 };