@bpmn-io/properties-panel 1.6.0 → 1.6.2

package/dist/index.esm.js

@@ -974,6 +974,9 @@ function ListGroup(props) {
   const onShow = useCallback(() => setOpen(true), [setOpen]);
   const [ordering, setOrdering] = useState([]);
   const [newItemAdded, setNewItemAdded] = useState(false);
+
+  // Flag to mark that add button was clicked in the last render cycle
+  const [addTriggered, setAddTriggered] = useState(false);
   const prevItems = usePrevious(items);
   const prevElement = usePrevious(element);
   const elementChanged = element !== prevElement;
@@ -995,6 +998,8 @@ function ListGroup(props) {
 
   // (1) items were added
   useEffect(() => {
+    // reset addTriggered flag
+    setAddTriggered(false);
     if (shouldHandleEffects && prevItems && items.length > prevItems.length) {
       let add = [];
       items.forEach(item => {
@@ -1004,14 +1009,18 @@ function ListGroup(props) {
       });
       let newOrdering = ordering;
 
-      // open if not open and configured
-      if (!open && shouldOpen) {
+      // open if not open, configured and triggered by add button
+      //
+      // TODO(marstamm): remove once we refactor layout handling for listGroups.
+      // Ideally, opening should be handled as part of the `add` callback and
+      // not be a concern for the ListGroup component.
+      if (addTriggered && !open && shouldOpen) {
         toggleOpen();
+      }
 
-        // if I opened and I should sort, then sort items
-        if (shouldSort) {
-          newOrdering = createOrdering(sortItems(items));
-        }
+      // filter when not open and configured
+      if (!open && shouldSort) {
+        newOrdering = createOrdering(sortItems(items));
       }
 
       // add new items on top or bottom depending on sorting behavior
@@ -1022,11 +1031,11 @@ function ListGroup(props) {
         newOrdering.push(...add);
       }
       setOrdering(newOrdering);
-      setNewItemAdded(true);
+      setNewItemAdded(addTriggered);
     } else {
       setNewItemAdded(false);
     }
-  }, [items, open, shouldHandleEffects]);
+  }, [items, open, shouldHandleEffects, addTriggered]);
 
   // (2) sort items on open if shouldSort is set
   useEffect(() => {
@@ -1056,6 +1065,10 @@ function ListGroup(props) {
     ...useContext(LayoutContext),
     onShow
   };
+  const handleAddClick = e => {
+    setAddTriggered(true);
+    add(e);
+  };
   return jsxs("div", {
     class: "bio-properties-panel-group",
     "data-group-id": 'group-' + id,
@@ -1072,7 +1085,7 @@ function ListGroup(props) {
         children: [add ? jsxs("button", {
           title: "Create new list item",
           class: "bio-properties-panel-group-header-button bio-properties-panel-add-entry",
-          onClick: add,
+          onClick: handleAddClick,
           children: [jsx(CreateIcon, {}), !hasItems ? jsx("span", {
             class: "bio-properties-panel-add-entry-label",
             children: "Create"
@@ -1102,8 +1115,9 @@ function ListGroup(props) {
             id
           } = item;
 
-          // if item was added, open first or last item based on ordering
-          const autoOpen = newItemAdded && (shouldSort ? index === 0 : index === ordering.length - 1);
+          // if item was added, open it
+          // Existing items will not be affected as autoOpen is only applied on first render
+          const autoOpen = newItemAdded;
           return createElement(ListItem, {
             ...item,
             autoOpen: autoOpen,