@thecb/components 10.9.0-beta.6 → 10.9.0-beta.7

package/dist/index.esm.js

@@ -26831,6 +26831,7 @@ var FormattedInput = function FormattedInput(_ref) {
       _onChange = _ref.onChange,
       props = _objectWithoutProperties$1(_ref, ["value", "formatter", "onChange"]);
 
+  console.log("🚀 ~ FormattedInput ~ props:", props);
   var inputEl = useRef(null);
 
   var _useState = useState({
@@ -26852,9 +26853,26 @@ var FormattedInput = function FormattedInput(_ref) {
   });
   return React.createElement("input", _extends$2({}, props, {
     ref: inputEl,
-    value: format$1(formatter)(value),
-    onKeyDown: function onKeyDown(event) {
-      // Keep track of the state of the input before onChange, including if user is hitting delete
+    value: format$1(formatter)(value) // onKeyDown={event => {
+    //   if (event.isTrusted && event.key === 'Unidentified') {
+    //     // Possibly an autofill event
+    //     console.log('autofill event')
+    //   } else {
+    //     console.log('regular user input')
+    //     // Regular user input
+    //     // Keep track of the state of the input before onChange, including if user is hitting delete
+    //     setState({
+    //       rawValue: value,
+    //       selectionStart: event.target.selectionStart,
+    //       selectionEnd: event.target.selectionEnd,
+    //       delete: event.key === "Backspace" || event.key === "Delete",
+    //       formattedValue: event.target.value
+    //     });
+    //   }
+    //   console.log('on key down fired')
+    // }}
+    ,
+    onChange: function onChange(event) {
       setState({
         rawValue: value,
         selectionStart: event.target.selectionStart,
@@ -26862,14 +26880,13 @@ var FormattedInput = function FormattedInput(_ref) {
         "delete": event.key === "Backspace" || event.key === "Delete",
         formattedValue: event.target.value
       });
-    },
-    onChange: function onChange(event) {
       /* At the beginning of onChange, event.target.value is a concat of the previous formatted value
        * and an unformatted injection at the start, end, or in the middle (maybe a deletion). To prepare 
        * the unformatted value for the user's onChange, the formatted string and unformatted injection need
-       * to be separated, then unformat the formatted string, then insert (or delete) the injection from the
+       * to be separated, then unformat the formatted string, then in sert (or delete) the injection from the
        * old unformatted value.
        */
+
       var injectionLength = event.target.value.length - state.formattedValue.length;
       var end = state.selectionStart === state.selectionEnd ? state.selectionStart + injectionLength : state.selectionEnd - 1;
       var injection = event.target.value.substring(state.selectionStart, end); // Injection is the new unformatted piece of the input
@@ -27151,14 +27168,14 @@ var FormInput = function FormInput(_ref15) {
     autoComplete: autocompleteValue,
     required: isRequired
     // Additional handler to detect autofilled values
-    // {...(autocompleteValue && {
-    //   onFocus: e => {
-    //     if (!isFocused) {
-    //       setValue(e.target?.value);
-    //       setIsFocused(true);
-    //     }
-    //   }
-    // })}
+  }, autocompleteValue && {
+    onFocus: function onFocus(e) {
+      if (!isFocused) {
+        var _e$target;
+        setValue((_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value);
+        setIsFocused(true);
+      }
+    }
   }, props)) : /*#__PURE__*/React.createElement(InputField, _extends({
     "aria-labelledby": createIdFromString(labelTextWhenNoError),
     "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),