carbon-react 142.11.5 → 142.11.6

package/esm/components/date/date.component.js

@@ -10,7 +10,6 @@ import StyledDateInput from "./date.style";
 import Textbox from "../textbox";
 import DatePicker from "./__internal__/date-picker";
 import DateRangeContext from "../date-range/__internal__/date-range.context";
-import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 import guid from "../../__internal__/utils/helpers/guid";
 const DateInput = /*#__PURE__*/React.forwardRef(({
@@ -48,6 +47,7 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
   const alreadyFocused = useRef(false);
   const isBlurBlocked = useRef(false);
   const focusedViaPicker = useRef(false);
+  const blockClose = useRef(false);
   const locale = useLocale();
   const {
     dateFnsLocale
@@ -89,17 +89,30 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
     };
     return customEvent;
   };
-  const handleClickAway = () => {
-    if (open) {
-      alreadyFocused.current = true;
-      internalInputRef.current?.focus();
-      isBlurBlocked.current = false;
-      internalInputRef.current?.blur();
-      setOpen(false);
-      alreadyFocused.current = false;
-    }
-  };
-  const handleClickInside = useClickAwayListener(handleClickAway, "mousedown");
+
+  // Add  custom listener to prevent issues with regards to double calls within the Date component
+  // This is a temporary fix until the Date component is refactored more info can be found:
+  // TODO: FE-6757
+  useEffect(() => {
+    const handleClick = () => {
+      if (!blockClose.current) {
+        if (open) {
+          alreadyFocused.current = true;
+          internalInputRef.current?.focus();
+          isBlurBlocked.current = false;
+          internalInputRef.current?.blur();
+          setOpen(false);
+          alreadyFocused.current = false;
+        }
+      } else {
+        blockClose.current = false;
+      }
+    };
+    document.addEventListener("mousedown", handleClick);
+    return function cleanup() {
+      document.removeEventListener("mousedown", handleClick);
+    };
+  }, [open]);
   const handleChange = ev => {
     isInitialValue.current = false;
     onChange(buildCustomEvent(ev));
@@ -165,7 +178,9 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
     }
     isBlurBlocked.current = false;
     if (!open && !alreadyFocused.current) {
-      setOpen(true);
+      setTimeout(() => {
+        setOpen(true);
+      }, 0);
     } else {
       alreadyFocused.current = false;
     }
@@ -200,7 +215,7 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
     }
   };
   const handleMouseDown = ev => {
-    handleClickInside();
+    blockClose.current = true;
     if (setInputRefMap) {
       isBlurBlocked.current = true;
     }
@@ -209,9 +224,13 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
     } = ev.target;
     if (type !== "text") {
       alreadyFocused.current = true;
-      setOpen(prev => !prev);
+      setTimeout(() => {
+        setOpen(prev => !prev);
+      }, 0);
     } else if (!open) {
-      setOpen(true);
+      setTimeout(() => {
+        setOpen(true);
+      }, 0);
     }
   };
   const handleIconMouseDown = ev => {
@@ -220,7 +239,7 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
   };
   const handlePickerMouseDown = () => {
     isBlurBlocked.current = true;
-    handleClickInside();
+    blockClose.current = true;
   };
   const assignInput = useCallback(inputElement => {
     internalInputRef.current = inputElement;

package/lib/components/date/date.component.js

@@ -15,7 +15,6 @@ var _date = _interopRequireDefault(require("./date.style"));
 var _textbox = _interopRequireDefault(require("../textbox"));
 var _datePicker = _interopRequireDefault(require("./__internal__/date-picker"));
 var _dateRange = _interopRequireDefault(require("../date-range/__internal__/date-range.context"));
-var _useClickAwayListener = _interopRequireDefault(require("../../hooks/__internal__/useClickAwayListener"));
 var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -57,6 +56,7 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
   const alreadyFocused = (0, _react.useRef)(false);
   const isBlurBlocked = (0, _react.useRef)(false);
   const focusedViaPicker = (0, _react.useRef)(false);
+  const blockClose = (0, _react.useRef)(false);
   const locale = (0, _useLocale.default)();
   const {
     dateFnsLocale
@@ -98,17 +98,30 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
     };
     return customEvent;
   };
-  const handleClickAway = () => {
-    if (open) {
-      alreadyFocused.current = true;
-      internalInputRef.current?.focus();
-      isBlurBlocked.current = false;
-      internalInputRef.current?.blur();
-      setOpen(false);
-      alreadyFocused.current = false;
-    }
-  };
-  const handleClickInside = (0, _useClickAwayListener.default)(handleClickAway, "mousedown");
+
+  // Add  custom listener to prevent issues with regards to double calls within the Date component
+  // This is a temporary fix until the Date component is refactored more info can be found:
+  // TODO: FE-6757
+  (0, _react.useEffect)(() => {
+    const handleClick = () => {
+      if (!blockClose.current) {
+        if (open) {
+          alreadyFocused.current = true;
+          internalInputRef.current?.focus();
+          isBlurBlocked.current = false;
+          internalInputRef.current?.blur();
+          setOpen(false);
+          alreadyFocused.current = false;
+        }
+      } else {
+        blockClose.current = false;
+      }
+    };
+    document.addEventListener("mousedown", handleClick);
+    return function cleanup() {
+      document.removeEventListener("mousedown", handleClick);
+    };
+  }, [open]);
   const handleChange = ev => {
     isInitialValue.current = false;
     onChange(buildCustomEvent(ev));
@@ -174,7 +187,9 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
     }
     isBlurBlocked.current = false;
     if (!open && !alreadyFocused.current) {
-      setOpen(true);
+      setTimeout(() => {
+        setOpen(true);
+      }, 0);
     } else {
       alreadyFocused.current = false;
     }
@@ -209,7 +224,7 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
     }
   };
   const handleMouseDown = ev => {
-    handleClickInside();
+    blockClose.current = true;
     if (setInputRefMap) {
       isBlurBlocked.current = true;
     }
@@ -218,9 +233,13 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
     } = ev.target;
     if (type !== "text") {
       alreadyFocused.current = true;
-      setOpen(prev => !prev);
+      setTimeout(() => {
+        setOpen(prev => !prev);
+      }, 0);
     } else if (!open) {
-      setOpen(true);
+      setTimeout(() => {
+        setOpen(true);
+      }, 0);
     }
   };
   const handleIconMouseDown = ev => {
@@ -229,7 +248,7 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
   };
   const handlePickerMouseDown = () => {
     isBlurBlocked.current = true;
-    handleClickInside();
+    blockClose.current = true;
   };
   const assignInput = (0, _react.useCallback)(inputElement => {
     internalInputRef.current = inputElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "142.11.5",
+  "version": "142.11.6",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",