@datarobot/design-system 28.2.2 → 28.3.0

package/cjs/inline-edit/inline-edit.js

@@ -79,18 +79,7 @@ function InlineEdit({
   const [touched, setTouched] = (0, _react.useState)(false);
   const [inputValue, setInputValue] = (0, _react.useState)(value);
   const [componentId] = (0, _react.useState)(() => (0, _uniqueId.default)());
-
-  // check if 2 elements have autofocus and render in same time
-  const [isEditMode, setIsEditMode] = (0, _react.useState)(() => {
-    if (isSomeOneOpen() || readOnly || isLoading) {
-      return false;
-    }
-    if (autoFocus) {
-      openState.set(componentId, true);
-      return true;
-    }
-    return false;
-  });
+  const [isEditMode, setIsEditMode] = (0, _react.useState)(false);
   const container = (0, _react.useRef)(null);
   const handleCancel = () => {
     setInputValue(value);
@@ -119,6 +108,18 @@ function InlineEdit({
   (0, _react.useEffect)(() => () => {
     openState.delete(componentId);
   }, []);
+  (0, _react.useLayoutEffect)(() => {
+    // If the component is mounted, autoFocus is true, and there are no other inline edits in edit mode -
+    // set the open state and edit mode to true
+    // previously it was set in state initialization function but since react 18 that initialization function
+    // can be called twice without unmount if 2+ components rendering inline edit are wrapped in Suspense and lazy loaded
+    // it results in inline edits being locked up because first id is set to true, however latest render would use different id
+    // it turns out to be common react thing: https://stackoverflow.com/questions/73325723/suspense-as-a-root-element-causes-two-instances-of-component-in-production-and
+    if (autoFocus && !(isSomeOneOpen() || readOnly || isLoading)) {
+      openState.set(componentId, true);
+      setIsEditMode(true);
+    }
+  }, []);
   const onTextClick = e => {
     e.preventDefault();
     if (!isSomeOneOpen() && !readOnly && !isLoading) {

package/esm/inline-edit/inline-edit.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo, useRef } from 'react';
+import React, { useState, useEffect, useMemo, useRef, useLayoutEffect } from 'react';
 import cls from 'classnames';
 import uniqueId from 'lodash-es/uniqueId';
 import { faPen } from '@fortawesome/free-solid-svg-icons/faPen';
@@ -71,18 +71,7 @@ export default function InlineEdit({
   const [touched, setTouched] = useState(false);
   const [inputValue, setInputValue] = useState(value);
   const [componentId] = useState(() => uniqueId());
-
-  // check if 2 elements have autofocus and render in same time
-  const [isEditMode, setIsEditMode] = useState(() => {
-    if (isSomeOneOpen() || readOnly || isLoading) {
-      return false;
-    }
-    if (autoFocus) {
-      openState.set(componentId, true);
-      return true;
-    }
-    return false;
-  });
+  const [isEditMode, setIsEditMode] = useState(false);
   const container = useRef(null);
   const handleCancel = () => {
     setInputValue(value);
@@ -111,6 +100,18 @@ export default function InlineEdit({
   useEffect(() => () => {
     openState.delete(componentId);
   }, []);
+  useLayoutEffect(() => {
+    // If the component is mounted, autoFocus is true, and there are no other inline edits in edit mode -
+    // set the open state and edit mode to true
+    // previously it was set in state initialization function but since react 18 that initialization function
+    // can be called twice without unmount if 2+ components rendering inline edit are wrapped in Suspense and lazy loaded
+    // it results in inline edits being locked up because first id is set to true, however latest render would use different id
+    // it turns out to be common react thing: https://stackoverflow.com/questions/73325723/suspense-as-a-root-element-causes-two-instances-of-component-in-production-and
+    if (autoFocus && !(isSomeOneOpen() || readOnly || isLoading)) {
+      openState.set(componentId, true);
+      setIsEditMode(true);
+    }
+  }, []);
   const onTextClick = e => {
     e.preventDefault();
     if (!isSomeOneOpen() && !readOnly && !isLoading) {

package/js/bundle/bundle.js

@@ -64526,18 +64526,7 @@ function InlineEdit(_ref) {
     }),
     _useState6 = _slicedToArray(_useState5, 1),
     componentId = _useState6[0];
-
-  // check if 2 elements have autofocus and render in same time
-  var _useState7 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(function () {
-      if (isSomeOneOpen() || readOnly || isLoading) {
-        return false;
-      }
-      if (autoFocus) {
-        openState.set(componentId, true);
-        return true;
-      }
-      return false;
-    }),
+  var _useState7 = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false),
     _useState8 = _slicedToArray(_useState7, 2),
     isEditMode = _useState8[0],
     setIsEditMode = _useState8[1];
@@ -64574,6 +64563,18 @@ function InlineEdit(_ref) {
       openState["delete"](componentId);
     };
   }, []);
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect)(function () {
+    // If the component is mounted, autoFocus is true, and there are no other inline edits in edit mode -
+    // set the open state and edit mode to true
+    // previously it was set in state initialization function but since react 18 that initialization function
+    // can be called twice without unmount if 2+ components rendering inline edit are wrapped in Suspense and lazy loaded
+    // it results in inline edits being locked up because first id is set to true, however latest render would use different id
+    // it turns out to be common react thing: https://stackoverflow.com/questions/73325723/suspense-as-a-root-element-causes-two-instances-of-component-in-production-and
+    if (autoFocus && !(isSomeOneOpen() || readOnly || isLoading)) {
+      openState.set(componentId, true);
+      setIsEditMode(true);
+    }
+  }, []);
   var onTextClick = function onTextClick(e) {
     e.preventDefault();
     if (!isSomeOneOpen() && !readOnly && !isLoading) {