@longline/aqua-ui 1.0.334 → 1.0.335

package/inputs/DateInput/Selector.js

@@ -23,18 +23,25 @@ var Selector = function (props) {
             setYear(props.value ? props.value.getFullYear().toString() : "");
         }
     }, [props.value]);
-    // Callback when day, month or year changes.
-    React.useEffect(function () {
-        var numYear = parseInt(year);
-        var numMonth = parseInt(month);
-        var numDay = parseInt(day);
-        if (isNaN(numYear) || isNaN(numMonth) || isNaN(numYear))
+    // Emit synchronously from the onChange handler rather than via a useEffect
+    // on [day, month, year]. Passive effects don't run until after paint, so
+    // an effect-based emit can be skipped if the next browser event (e.g. a
+    // click on Save) arrives before React's effect phase — losing the
+    // most-recent keystroke.
+    var emit = function (d, m, y) {
+        var numDay = parseInt(d);
+        var numMonth = parseInt(m);
+        var numYear = parseInt(y);
+        if (isNaN(numDay) || isNaN(numMonth) || isNaN(numYear))
             return;
         var date = new Date(numYear, numMonth - 1, numDay);
         // Overwrite year, because Date.new converts 0-99 to 1900-1999.
         date.setFullYear(numYear);
         props.onChange(date);
-    }, [day, month, year]);
+    };
+    var handleDayChange = function (v) { setDay(v); emit(v, month, year); };
+    var handleMonthChange = function (v) { setMonth(v); emit(day, v, year); };
+    var handleYearChange = function (v) { setYear(v); emit(day, month, v); };
     // Move focus to month input.
     var focusMonth = function () {
         monthRef.current.focus();
@@ -46,10 +53,10 @@ var Selector = function (props) {
         yearRef.current.select();
     };
     return (React.createElement(InputWrapper, { fluid: true, error: props.error, disabled: props.disabled, ghost: props.ghost, transparent: props.transparent, onClear: (props.clearable && props.value) ? props.onClear : null, icon: { url: SVG.Icons.Calendar, color: theme.colors.primary[3], onClick: props.onCalendar }, iconPosition: 'right' },
-        React.createElement(NumericInput, { disabled: props.disabled, width: 38, maxLength: 2, placeholder: "dd", value: day, onChange: setDay, onBlur: focusMonth }),
+        React.createElement(NumericInput, { disabled: props.disabled, width: 38, maxLength: 2, placeholder: "dd", value: day, onChange: handleDayChange, onBlur: focusMonth }),
         "/",
-        React.createElement(NumericInput, { disabled: props.disabled, width: 38, maxLength: 2, placeholder: "mm", value: month, onChange: setMonth, ref: monthRef, onBlur: focusYear }),
+        React.createElement(NumericInput, { disabled: props.disabled, width: 38, maxLength: 2, placeholder: "mm", value: month, onChange: handleMonthChange, ref: monthRef, onBlur: focusYear }),
         "/",
-        React.createElement(NumericInput, { disabled: props.disabled, width: 44, maxLength: 4, placeholder: "yyyy", value: year, onChange: setYear, ref: yearRef })));
+        React.createElement(NumericInput, { disabled: props.disabled, width: 44, maxLength: 4, placeholder: "yyyy", value: year, onChange: handleYearChange, ref: yearRef })));
 };
 export { Selector };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@longline/aqua-ui",
-  "version": "1.0.334",
+  "version": "1.0.335",
   "description": "AquaUI",
   "author": "Alexander van Oostenrijk / Longline Environment",
   "license": "Commercial",