@linzjs/step-ag-grid 8.3.1 → 8.3.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "8.3.1",
+  "version": "8.3.2",
   "keywords": [
     "aggrid",
     "ag-grid",

package/src/components/GridPopoverHook.tsx

@@ -16,6 +16,7 @@ export interface GridPopoverHookProps<RowType> {
     | null
     | undefined;
   save?: (selectedRows: RowType[]) => Promise<boolean>;
+  dontSaveOnExternalClick?: boolean;
 }
 
 export const useGridPopoverHook = <RowType extends GridBaseRow>(props: GridPopoverHookProps<RowType>) => {
@@ -96,7 +97,11 @@ export const useGridPopoverHook = <RowType extends GridBaseRow>(props: GridPopov
                 ref={saveButtonRef}
                 data-reason={""}
                 onClick={(e) => {
-                  triggerSave(e.currentTarget.getAttribute("data-reason") ?? undefined).then();
+                  let reason = e.currentTarget.getAttribute("data-reason") ?? undefined;
+                  if (props.dontSaveOnExternalClick && reason === CloseReason.BLUR) {
+                    reason = CloseReason.CANCEL;
+                  }
+                  triggerSave(reason).then();
                 }}
                 style={{ display: "none" }}
               />
@@ -105,7 +110,7 @@ export const useGridPopoverHook = <RowType extends GridBaseRow>(props: GridPopov
         </>
       );
     },
-    [anchorRef, isOpen, props.className, saving, triggerSave],
+    [anchorRef, isOpen, props.className, props.dontSaveOnExternalClick, saving, triggerSave],
   );
 
   return {

package/src/components/gridForm/GridFormDropDown.tsx

@@ -1,5 +1,5 @@
 import { FocusableItem, MenuDivider, MenuHeader, MenuItem } from "../../react-menu3";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { GridBaseRow } from "../Grid";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
 import { isEmpty } from "lodash-es";
@@ -188,27 +188,11 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormDro
     return true;
   }, [filter, filteredValues, options, props, selectItemHandler, selectedItem, selectedRows, subSelectedValue]);
 
-  const onMouseEnterFocus = useCallback((item: FinalSelectOption) => {
-    setSelectedItem(item);
-    if (item.subComponent) {
-      subComponentIsValid.current = true;
-      subComponentInitialValue.current = null;
-    } else {
-      setSubSelectedValue(null);
-      subComponentIsValid.current = true;
-    }
-  }, []);
-
-  const onMouseLeaveFocus = useCallback(() => {
-    setSelectedItem(null);
-    setSubSelectedValue(null);
-    subComponentIsValid.current = true;
-  }, []);
-
   const { popoverWrapper } = useGridPopoverHook({
     className: props.className,
     invalid: () => !!(selectedItem && !subComponentIsValid.current),
     save,
+    dontSaveOnExternalClick: true,
   });
 
   let lastHeader: JSX.Element | null = null;
@@ -277,7 +261,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormDro
             }
             return (
               (!filteredValues || filteredValues.includes(item)) && (
-                <>
+                <Fragment key={`${index}`}>
                   {showHeader}
                   <div key={`menu-wrapper-${index}`}>
                     <MenuItem
@@ -285,9 +269,16 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormDro
                       disabled={!!item.disabled}
                       title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
                       value={item.value}
-                      onFocus={() => onMouseEnterFocus(item)}
-                      onMouseEnter={() => onMouseEnterFocus(item)}
-                      onMouseLeave={onMouseLeaveFocus}
+                      onFocus={() => {
+                        setSelectedItem(item);
+                        if (item.subComponent) {
+                          subComponentIsValid.current = true;
+                          subComponentInitialValue.current = null;
+                        } else {
+                          setSubSelectedValue(null);
+                          subComponentIsValid.current = true;
+                        }
+                      }}
                       onClick={(e: ClickEvent) => {
                         if (item.subComponent) {
                           e.keepOpen = true;
@@ -331,7 +322,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormDro
                       </FocusableItem>
                     )}
                   </div>
-                </>
+                </Fragment>
               )
             );
           })}

package/src/stories/grid/GridReadOnly.stories.tsx

@@ -100,7 +100,7 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
         headerName: "Custom edit",
         maxWidth: 100,
         editable: true,
-        valueFormatter: () => "Double click me!",
+        valueFormatter: () => "Press E",
         cellRendererParams: {
           rightHoverElement: (
             <GridIcon icon={"ic_launch_modal"} title={"Title text"} className={"GridCell-editableIcon"} />