@linzjs/step-ag-grid 6.0.0 → 6.1.1

package/package.json

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

package/src/components/gridForm/GridFormDropDown.tsx

@@ -68,12 +68,15 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
   const optionsInitialising = useRef(false);
   const [options, setOptions] = useState<FinalSelectOption[] | null>(null);
   const subComponentIsValid = useRef(false);
-  const [subSelectedValue, setSubSelectedValue] = useState<any>();
+  const subComponentInitialValue = useRef<string | null>(null);
+  const [subSelectedValue, setSubSelectedValue] = useState<any>(null);
   const [selectedSubComponent, setSelectedSubComponent] = useState<FinalSelectOption | null>(null);
 
   const selectItemHandler = useCallback(
     async (value: any, subComponentValue?: any): Promise<boolean> => {
-      const hasChanged = selectedRows.some((row) => row[field as keyof RowType] !== value);
+      const hasChanged =
+        selectedRows.some((row) => row[field as keyof RowType] !== value) ||
+        (subComponentValue !== undefined && subComponentInitialValue.current !== JSON.stringify(subComponentValue));
       if (hasChanged) {
         if (props.onSelectedItem) {
           await props.onSelectedItem({ selectedRows, value, subComponentValue });
@@ -182,6 +185,7 @@ 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);
@@ -254,14 +258,10 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
                   value={item.value}
                   onClick={(e: ClickEvent) => {
                     if (item.subComponent) {
-                      if (selectedSubComponent === item) {
-                        // toggle selection off
-                        setSelectedSubComponent(null);
-                        subComponentIsValid.current = true;
-                      } else {
-                        // toggle selection on
-                        setSelectedSubComponent(item);
-                      }
+                      // toggle selection
+                      setSelectedSubComponent(selectedSubComponent === item ? null : item);
+                      subComponentIsValid.current = true;
+                      subComponentInitialValue.current = null;
                       e.keepOpen = true;
                     } else {
                       clickItemHandler(
@@ -289,6 +289,10 @@ export const GridFormDropDown = <RowType extends GridBaseRow>(props: GridFormPop
                           value: subSelectedValue,
                           setValue: (value: any) => {
                             setSubSelectedValue(value);
+                            if (subComponentInitialValue.current === null) {
+                              // copy the default value of the sub-component so we can change detect on save
+                              subComponentInitialValue.current = JSON.stringify(value);
+                            }
                           },
                           setValid: (valid: boolean) => {
                             subComponentIsValid.current = valid;

package/src/react-menu3/components/ControlledMenu.tsx

@@ -131,20 +131,19 @@ export const ControlledMenuFr = (
       let inputEls: HTMLElement[] = [];
       inputElsIterator.forEach((el) => inputEls.push(el));
       inputEls = inputEls.filter((el) => !(el as any).disabled);
-
       if (inputEls.length === 0) return;
       const firstInputEl = inputEls[0];
       const lastInputEl = inputEls[inputEls.length - 1];
       if (activeElement !== firstInputEl && activeElement !== lastInputEl) return;
 
-      const suppressAutoSaveEvents = activeElement.getAttribute("data-suppressAutoSaveEvents");
+      const isTextArea = activeElement.nodeName === "TEXTAREA";
+      const suppressEnterAutoSave = activeElement.getAttribute("data-disableEnterAutoSave") || isTextArea;
       const invokeSave = (reason: string) => {
-        if (!saveButtonRef?.current || suppressAutoSaveEvents) return;
+        if (!saveButtonRef?.current) return;
         saveButtonRef.current?.setAttribute("data-reason", reason);
         saveButtonRef?.current?.click();
       };
 
-      const isTextArea = activeElement.nodeName === "TEXTAREA";
       switch (activeElement.nodeName) {
         case "TEXTAREA":
         case "INPUT": {
@@ -160,7 +159,7 @@ export const ControlledMenuFr = (
                   invokeSave(ev.shiftKey ? CloseReason.TAB_BACKWARD : CloseReason.TAB_FORWARD);
               }
             }
-            if (ev.key === "Enter" && !isTextArea) {
+            if (ev.key === "Enter" && !suppressEnterAutoSave) {
               ev.preventDefault();
               ev.stopPropagation();
               if (isDown) {
@@ -181,7 +180,7 @@ export const ControlledMenuFr = (
                 lastTabDownEl.current == activeElement && invokeSave(CloseReason.TAB_FORWARD);
               }
             }
-            if (ev.key === "Enter" && !isTextArea) {
+            if (ev.key === "Enter" && !suppressEnterAutoSave) {
               ev.preventDefault();
               ev.stopPropagation();
               if (isDown) {

package/src/stories/grid/FormTest.tsx

@@ -98,9 +98,13 @@ export const FormTest = (props: CellEditorCommon): JSX.Element => {
             <LuiTextInput label={"Number"} value={numba} onChange={(e) => setNumba(e.target.value)} />
           </div>
           <div style={{ marginTop: 25 }}>
-            <LuiButton style={{ height: 48 }} onClick={() => setShowModal(true)}>
-              Show Modal
-            </LuiButton>
+            <input
+              data-disableEnterAutoSave
+              type="button"
+              style={{ height: 48 }}
+              onClick={() => setShowModal(true)}
+              value="Show Modal"
+            />
           </div>
         </div>
         <FormError error={invalid()} />