@linzjs/step-ag-grid 7.0.1 → 7.0.3

package/package.json

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

package/src/components/GridCell.tsx

@@ -71,7 +71,7 @@ export const GridCell = <RowType extends GridBaseRow, Props extends CellEditorCo
     suppressKeyboardEvent: (e) => {
       // It's important that aggrid doesn't trigger edit on enter
       // as the incorrect selected rows will be returned
-      return e.event.key === "Enter";
+      return !["ArrowLeft", "ArrowRight", "ArrowDown", "ArrowUp", "Tab", " "].includes(e.event.key);
     },
     ...(custom?.editorParams && {
       cellEditorParams: { ...custom.editorParams, multiEdit: custom.multiEdit },

package/src/components/gridForm/GridFormDropDown.tsx

@@ -1,7 +1,7 @@
 import "../../styles/GridFormDropDown.scss";
 
 import { FocusableItem, MenuDivider, MenuHeader, MenuItem } from "../../react-menu3";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { KeyboardEvent, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { GridBaseRow } from "../Grid";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
 import { delay } from "lodash-es";
@@ -12,6 +12,9 @@ import { useGridPopoverContext } from "../../contexts/GridPopoverContext";
 import { GridSubComponentContext } from "contexts/GridSubComponentContext";
 import { ClickEvent, MenuInstance } from "../../react-menu3/types";
 import { CloseReason } from "../../react-menu3/utils";
+import { GridContext } from "../../contexts/GridContext";
+import { FormError } from "../../lui/FormError";
+import { isNotEmpty } from "../../utils/util";
 
 export interface GridPopoutEditDropDownSelectedItem<RowType> {
   // Note the row that was clicked on will be first
@@ -49,6 +52,7 @@ export interface GridFormPopoutDropDownProps<RowType extends GridBaseRow> extend
   // local means the filter won't change if it's reloaded, reload means it does change
   filtered?: "local" | "reload";
   filterPlaceholder?: string;
+  filterHelpText?: string;
   onSelectedItem?: (props: GridPopoutEditDropDownSelectedItem<RowType>) => Promise<void>;
   onSelectFilter?: (props: GridPopoutEditDropDownSelectedItem<RowType>) => Promise<void>;
   options: SelectOption[] | ((selectedRows: RowType[], filter?: string) => Promise<SelectOption[]> | SelectOption[]);
@@ -60,6 +64,7 @@ const fieldToString = (field: any) => {
 };
 
 export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPopoutDropDownProps<RowType>) => {
+  const { stopEditing } = useContext(GridContext);
   const { selectedRows, field, updateValue, data } = useGridPopoverContext<RowType>();
 
   // Save triggers during async action processing which triggers another selectItem(), this ref blocks that
@@ -103,11 +108,12 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
   );
 
   const selectFilterHandler = useCallback(
-    async (value: string) =>
-      updateValue(async (selectedRows) => {
+    async (value: string) => {
+      await updateValue(async (selectedRows) => {
         props.onSelectFilter && (await props.onSelectFilter({ selectedRows, value }));
         return true;
-      }, 0),
+      }, 0);
+    },
     [props, updateValue],
   );
 
@@ -155,7 +161,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
               return undefined;
             }
             const str = (option.label as string) || "";
-            return str.toLowerCase().indexOf(filter) === -1 ? option.value : undefined;
+            return str.toLowerCase().indexOf(filter.toLowerCase()) === -1 ? option.value : undefined;
           })
           .filter((r) => r !== undefined),
       );
@@ -186,28 +192,13 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
   const save = useCallback(async () => {
     if (!options) return true;
 
-    const activeOptions = options.filter((option) => !filteredValues.includes(option.value));
-    if (activeOptions.length === 1) {
-      await selectItemHandler(activeOptions[0].value);
-    } else if (activeOptions.length === 0 && props.onSelectFilter) {
-      await selectFilterHandler(filter);
-    } else {
-      // Handler for sub-selected value
-      if (!selectedSubComponent) return true;
-      if (selectedSubComponent.subComponent && !subComponentIsValid.current) return false;
-      await selectItemHandler(selectedSubComponent.value, subSelectedValue);
-    }
+    // Handler for sub-selected value
+    if (!selectedSubComponent) return true;
+    if (selectedSubComponent.subComponent && !subComponentIsValid.current) return false;
+    await selectItemHandler(selectedSubComponent.value, subSelectedValue);
+
     return true;
-  }, [
-    filter,
-    filteredValues,
-    options,
-    props.onSelectFilter,
-    selectFilterHandler,
-    selectItemHandler,
-    selectedSubComponent,
-    subSelectedValue,
-  ]);
+  }, [options, selectItemHandler, selectedSubComponent, subSelectedValue]);
 
   const { popoverWrapper } = useGridPopoverHook({
     className: props.className,
@@ -215,24 +206,55 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
     save,
   });
 
+  const enterKeyPressedRef = useRef(false);
+  const handleKeyDown = useCallback((e: KeyboardEvent) => {
+    if (e.key === "Enter") {
+      e.stopPropagation();
+      e.preventDefault();
+      enterKeyPressedRef.current = true;
+    }
+  }, []);
+
+  const handleKeyUp = useCallback(
+    async (e: KeyboardEvent) => {
+      if (!options) return;
+
+      if (e.key === "Enter") {
+        e.stopPropagation();
+        e.preventDefault();
+        if (!enterKeyPressedRef.current) return;
+
+        props.onSelectFilter && (await selectFilterHandler(filter));
+        stopEditing();
+      }
+    },
+    [filter, options, props.onSelectFilter, selectFilterHandler, stopEditing],
+  );
+
   return popoverWrapper(
     <>
       {props.filtered && (
         <div className={"GridFormDropDown-filter"}>
           <FocusableItem className={"filter-item"}>
             {({ ref }: any) => (
-              <div style={{ display: "flex", width: "100%" }}>
+              <div style={{ display: "flex", flexDirection: "column", width: "100%" }}>
                 <input
                   autoFocus
-                  className={"free-text-input"}
-                  style={{ border: "0px" }}
+                  className={"LuiTextInput-input"}
                   ref={ref}
                   type="text"
                   placeholder={props.filterPlaceholder ?? "Placeholder"}
                   data-testid={"filteredMenu-free-text-input"}
                   defaultValue={filter}
-                  onChange={(e) => setFilter(e.target.value.toLowerCase())}
+                  data-disableenterautosave={true}
+                  data-allowtabtoSave={true}
+                  onChange={(e) => setFilter(e.target.value)}
+                  onKeyDown={handleKeyDown}
+                  onKeyUp={handleKeyUp}
                 />
+                {props.filterHelpText && isNotEmpty(filter) && (
+                  <FormError error={null} helpText={props.filterHelpText} />
+                )}
               </div>
             )}
           </FocusableItem>
@@ -242,7 +264,9 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
       <ComponentLoadingWrapper loading={!options} className={"GridFormDropDown-options"}>
         <>
           {options && options.length == filteredValues?.length && (
-            <MenuItem key={`${fieldToString(field)}-empty`}>[Empty]</MenuItem>
+            <MenuItem key={`${fieldToString(field)}-empty`} className={"GridPopoverEditDropDown-noOptions"}>
+              No Options
+            </MenuItem>
           )}
           {options?.map((item: FinalSelectOption, index) =>
             item.value === MenuSeparatorString ? (

package/src/stories/grid/GridPopoutEditDropDown.stories.tsx

@@ -199,13 +199,18 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
           editorParams: {
             filtered: "local",
             filterPlaceholder: "Filter this",
+            filterHelpText: "Press enter to save custom value",
             options: optionsObjects.map((o) => {
               return { value: o, label: o.desc, disabled: false };
             }),
             onSelectedItem: async (selected) => {
+              // eslint-disable-next-line no-console
+              console.log("onSelectedItem selected", selected);
               selected.selectedRows.forEach((row) => (row.code = selected.value.code));
             },
             onSelectFilter: async (selected) => {
+              // eslint-disable-next-line no-console
+              console.log("onSelectFilter selected", selected);
               selected.selectedRows.forEach((row) => (row.code = selected.value));
             },
           },

package/src/styles/GridFormDropDown.scss

@@ -16,3 +16,7 @@
 .GridPopoverEditDropDown-containerUnlimited .GridFormDropDown-options {
   overflow-y: auto;
 }
+
+.GridPopoverEditDropDown-noOptions {
+  justify-content: center;
+}