fix the file test case to avoid doing browser.sleep + refactor the code

common/styles/scss/_recordedit-app.scss

@@ -136,7 +136,7 @@
                     /**
                      * make sure the table cells have the same width
                      */
-                    .shift-form, .select-all-input-row {
+                    .shift-form, .select-all-row {
                         display: flex;
                         width: 100%;
                     }

src/components/recordedit/form-container.tsx

@@ -3,7 +3,7 @@ import ChaiseTooltip from '@isrd-isi-edu/chaise/src/components/tooltip';
 import FormRow from '@isrd-isi-edu/chaise/src/components/recordedit/form-row';
 
 // hooks
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { useLayoutEffect, useRef, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 import useRecordedit from '@isrd-isi-edu/chaise/src/hooks/recordedit';
 
@@ -53,20 +53,6 @@ const FormContainer = (): JSX.Element => {
       document.querySelector('.form-inputs-row') as HTMLElement
     );
 
-
-    /**
-     * Callback event for scroll functionality on recordedit-form to set a max-width to multi-form-input-row as the
-     * width of the visible area. Its a common function getting called on, onScroll and resizeSensor
-     */
-    sensors?.push(new ResizeSensor(formContainer.current, () => {
-      const nonScrollableDiv = document.querySelector('.multi-form-input-row') as HTMLElement;
-
-      if (formContainer.current && nonScrollableDiv) {
-        const visibleWidth = formContainer.current.offsetWidth; // Width of the visible area
-        nonScrollableDiv.style.maxWidth = visibleWidth + 'px'; // Set the max-width to the visible width
-      }
-    }));
-
     return () => {
       sensors?.forEach((sensor) => sensor.detach());
     };
@@ -75,12 +61,15 @@ const FormContainer = (): JSX.Element => {
   /**
    * This callback is called when we want to delete the form, we are setting the form index and
    * a boolean to know the remove button is clicked
+   *
+   * TODO this can be improved. we might be able to do this with less state variables
   */
   const handleRemoveForm = (formIndex: number, formNumber: number) => {
     setRemoveFormIndex(formNumber);
     setRemoveClicked(true);
     removeForm([formIndex]);
   };
+
   return (
     <div className='form-container' ref={formContainer}>
       <div className='chaise-table-top-scroll-wrapper'>

src/components/recordedit/form-row.tsx

@@ -84,22 +84,41 @@ const FormRow = ({
   const cm = columnModels[columnModelIndex];
 
   /**
-   * make sure the column names (key-column.tsx) have the same height as FormRow
+   * 1. make sure the column names (key-column.tsx) have the same height as FormRow
+   *
+   * 2. make sure mulit-form-row-input doesn't go beyond the visible portion of form-container (set max width)
+   *    while we're setting the max-wdith to be the same as form-container, this has to be defined here as we must
+   *    update it when the size of multi-form-input-row changes. if we do this based on form-container size then it won't
+   *    cover the cases where we scroll horziontally and open a new multi-form-input-row
    */
   useLayoutEffect(() => {
     if (!container || !container.current) return;
 
-    let cachedHeight = -1;
+    let cachedHeight = -1, cachedWidth = -1;
     const sensor = new ResizeSensor(container.current as Element, (dimension) => {
-      const newHeight = container.current?.getBoundingClientRect().height;
-      if (newHeight === undefined || newHeight === cachedHeight || !container.current) return;
-      cachedHeight = newHeight;
-      const header = document.querySelector<HTMLElement>(`.entity-key.entity-key-${columnModelIndex}`);
-      if (header) {
-        header.style.height = `${cachedHeight}px`;
+      if (!container.current) return;
+
+      const newHeight = container.current.getBoundingClientRect().height;
+      if (newHeight !== undefined || newHeight !== cachedHeight) {
+        cachedHeight = newHeight;
+        const header = document.querySelector<HTMLElement>(`.entity-key.entity-key-${columnModelIndex}`);
+        if (header) {
+          header.style.height = `${cachedHeight}px`;
+        }
       }
-    }
-    );
+
+      const newWidth = container.current.offsetWidth;
+      if (newWidth !== cachedWidth) {
+        cachedWidth = newWidth;
+        const nonScrollableDiv = document.querySelector('.multi-form-input-row') as HTMLElement;
+        const formContainer = document.querySelector('.form-container') as HTMLElement;
+        if (formContainer && nonScrollableDiv) {
+          const visibleWidth = formContainer.offsetWidth; // Width of the visible area
+          nonScrollableDiv.style.maxWidth = visibleWidth + 'px'; // Set the max-width to the visible width
+        }
+      }
+
+    });
 
     return () => {
       sensor.detach();

src/components/recordedit/multi-form-input-row.tsx

@@ -13,7 +13,6 @@ import { appModes, MULTI_FORM_INPUT_FORM_VALUE } from '@isrd-isi-edu/chaise/src/
 // utils
 import ResizeSensor from 'css-element-queries/src/ResizeSensor';
 import { copyOrClearValue } from '@isrd-isi-edu/chaise/src/utils/recordedit-utils';
-import { makeSafeIdAttr } from '@isrd-isi-edu/chaise/src/utils/string-utils';
 
 type MultiFormInputRowProps = {
   /**
@@ -154,6 +153,27 @@ const MultiFormInputRow = ({
     return () => subscribe.unsubscribe();
   }, [watch, isEmpty]);
 
+  /**
+   * This is to set the width of text area as the width of multi-form-input-row. We have to involve javascript as
+   * the immidiate parent center-align we cant set a width to it as 100%. So we have to involve JS to set the width of textarea
+   * to the next immediate parent width which is multi-form-input-row.
+   * We choose 1800 as it matches with css rule given in multi-form-input-row and multi-form-input. Beyond 1800 we are
+   * setting a width for textarea as 1200 and making it center aligned. We choose 1200 as we dont want input to span
+   * across container for higher resolutions(i.e beyond 1800)
+  */
+  const updateTextareaWidth = () => {
+    const textarea = document.querySelector('.input-switch-multi-textarea') as HTMLElement;
+    const nonScrollableDiv = document.querySelector('.multi-form-input-row') as HTMLElement;
+    if (textarea) {
+      if (window.innerWidth < 1800) {
+        const newContainerWidth = nonScrollableDiv.offsetWidth;
+        textarea.style.width = `${newContainerWidth}px`;
+      } else {
+        textarea.style.width = '1200px';
+      }
+    }
+  };
+
   // ------------------------ callbacks -----------------------------------//
 
 
@@ -235,27 +255,6 @@ const MultiFormInputRow = ({
     });
   };
 
-  /**
-   * This is to set the width of text area as the width of multi-form-input-row. We have to involve javascript as
-   * the immidiate parent center-align we cant set a width to it as 100%. So we have to involve JS to set the width of textarea
-   * to the next immediate parent width which is multi-form-input-row.
-   * We choose 1800 as it matches with css rule given in multi-form-input-row and multi-form-input. Beyond 1800 we are
-   * setting a width for textarea as 1200 and making it center aligned. We choose 1200 as we dont want input to span
-   * across container for higher resolutions(i.e beyond 1800)
-  */
-  const updateTextareaWidth = () => {
-    const textarea = document.querySelector('.input-switch-multi-textarea') as HTMLElement;
-    const nonScrollableDiv = document.querySelector('.multi-form-input-row') as HTMLElement;
-    if (textarea) {
-      if (window.innerWidth < 1800) {
-        const newContainerWidth = nonScrollableDiv.offsetWidth;
-        textarea.style.width = `${newContainerWidth}px`;
-      } else {
-        textarea.style.width = '1200px';
-      }
-    }
-  };
-
   // -------------------------- render logic ---------------------- //
 
   const colName = columnModel.column.name;

test/e2e/specs/default-config/recordedit/multi-form-input.spec.js

@@ -739,8 +739,6 @@ describe('Regarding multi form input and clone button', () => {
                 // apply the value
                 return chaisePage.clickButton(applybtn);
               }).then(() => {
-                // there isn't any event that we can wait for, so I added browser sleep
-                if (params.type === 'upload') browser.sleep(2000);
                 // check the values
                 return recordEditHelpers.testFormValuesForAColumn(params.column_name, params.column_displayname, params.type, true, params.apply_to_some.column_values_after);
               }).then(() => {

test/e2e/utils/recordedit-helpers.js

@@ -1873,6 +1873,9 @@ exports.deleteFiles = function(files) {
     });
 };
 
+/**
+ * TODO this should be replaced by selectFileReturnPromise
+ */
 exports.selectFile = function(file, fileInput, txtInput) {
     var filePath = require('path').join(__dirname , "/../data_setup/uploaded_files/" + file.path);
 
@@ -1895,6 +1898,39 @@ exports.selectFile = function(file, fileInput, txtInput) {
     }
 };
 
+/**
+ * TODO this should replace the selectFile function
+ */
+exports.selectFileReturnPromise = (file, fileInput, txtInput) => {
+  return new Promise((resolve, reject) => {
+    const filePath = require('path').join(__dirname , "/../data_setup/uploaded_files/" + file.path);
+
+    fileInput.sendKeys(filePath).then(() => {
+      return browser.sleep(100);
+    }).then(() => {
+      expect(fileInput.getAttribute('value')).toContain(file.name, "didn't select the correct file.");
+      expect(txtInput.getText()).toBe(file.name, "didn't show the correct file name after selection.");
+
+      if (typeof file.tooltip === "string") {
+        // test the tooltip on hover
+        // move the mouse first to force any other tooltips to hide
+        browser.actions().mouseMove(chaisePage.recordEditPage.getRequiredInfoEl()).perform().then(() => {
+          return chaisePage.waitForElementInverse(chaisePage.getTooltipDiv());
+        }).then(() => {
+          return chaisePage.testTooltipReturnPromise(txtInput, file.tooltip, 'recordedit');
+        }).then(() => {
+          resolve();
+        }).catch(err => reject(err));
+
+      } else {
+        resolve();
+      }
+    }).then(() => {
+      resolve();
+    }).catch(err => reject(err));
+  });
+}
+
 /**
  * test a file input with the given column name, and file that we want to test
  * the file input against it.
@@ -2011,8 +2047,9 @@ exports.setInputValue = (formNumber, name, displayname, displayType, valueProps)
       case 'upload':
         const fileInput = recordEditPage.getInputForAColumn(name, formNumber);
         const fileTextInput = recordEditPage.getTextFileInputForAColumn(name, formNumber);
-        exports.selectFile(valueProps.value, fileInput, fileTextInput);
-        resolve();
+        exports.selectFileReturnPromise(valueProps.value, fileInput, fileTextInput).then(() => {
+          resolve();
+        }).catch(err => reject(err));
         break;
       default:
         let inputEl;