feat: Allow table inline editing to be rendered without a wrapping <form> (#3563)

Author: avinashbot

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -17539,6 +17539,9 @@ To target individual cells use \`columnDefinitions.verticalAlign\`, that takes p
        The \`cellContext\` object contains the following properties:
     * \`cellContext.currentValue\` - State to keep track of a value in input fields while editing.
     * \`cellContext.setValue\` - Function to update \`currentValue\`. This should be called when the value in input field changes.
+    * \`cellContext.submitValue\` - Function to submit the \`currentValue\`.
+  * \`editConfig.disableNativeForm\` (boolean) - Disables the use of a \`<form>\` element to capture submissions inside the inline editor.
+       If enabled, ensure that any text inputs in the editing cell submit the cell value when the Enter key is pressed, using \`cellContext.submitValue\`.
 * \`isRowHeader\` (boolean) - Specifies that cells in this column should be used as row headers.
 * \`hasDynamicContent\` (boolean) - Specifies that cells in this column may have dynamic content. The contents will then be observed to update calculated column widths.
    This may have a negative performance impact, so should be used only if necessary. It has no effect if \`resizableColumns\` is set to \`true\`.

src/table/__tests__/inline-editor.test.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import * as React from 'react';
-import { cleanup, fireEvent, render, waitFor } from '@testing-library/react';
+import { act, cleanup, fireEvent, render, waitFor } from '@testing-library/react';
 
 import { InlineEditor } from '../../../lib/components/table/body-cell/inline-editor';
 import createWrapper from '../../../lib/components/test-utils/dom';
@@ -21,18 +21,28 @@ function renderComponent(jsx: React.ReactElement) {
   return { wrapper, rerender, getByTestId, queryByTestId, getByRole };
 }
 
-const TestComponent = () => {
+const TestComponent = ({
+  disableNativeForm,
+  submitValueRef,
+}: {
+  disableNativeForm?: boolean;
+  submitValueRef?: React.MutableRefObject<TableProps.CellContext<any>['submitValue'] | null>;
+}) => {
   const column = {
     id: 'test',
     header: 'test',
     editConfig: {
+      disableNativeForm,
       ariaLabel: 'test-input',
       errorIconAriaLabel: 'error-icon',
       constraintText: 'Requirement',
       validation: () => (thereBeErrors ? 'there be errors' : undefined),
-      editingCell: (item: any, { currentValue, setValue }: TableProps.CellContext<string>) => (
-        <input value={currentValue ?? item.test} onChange={() => setValue('test')} />
-      ),
+      editingCell: (item: any, { currentValue, setValue, submitValue }: TableProps.CellContext<string>) => {
+        if (submitValueRef) {
+          submitValueRef.current = submitValue;
+        }
+        return <input value={currentValue ?? item.test} onChange={() => setValue('test')} />;
+      },
     },
     cell: (item: any) => <span>{item.test}</span>,
   };
@@ -85,18 +95,44 @@ describe('InlineEditor', () => {
     expect(wrapper.find('[aria-label="error-icon"]')?.getElement()).toBeInTheDocument();
   });
 
-  it('should submit edit', () => {
+  it.each([false, true])(
+    'should submit edit when submit button is pressed (disableNativeForm=%s)',
+    disableNativeForm => {
+      thereBeErrors = false;
+      const changeEvent = new Event('change', { bubbles: true });
+      const { wrapper } = renderComponent(<TestComponent disableNativeForm={disableNativeForm} />);
+      const input = wrapper.find('input')!.getElement();
+
+      fireEvent.click(input);
+
+      fireEvent(input, changeEvent);
+      expect(wrapper.find('[aria-label="error-icon"]')?.getElement()).toBeUndefined();
+
+      fireEvent.click(wrapper.getElement().querySelector('[aria-label="save edit"]')!);
+      waitFor(() => {
+        expect(handleSubmitEdit).toHaveBeenCalled();
+        expect(handleSubmitEdit.mock.lastCall!.length).toBe(3);
+      });
+
+      expect(handleEditEnd).toHaveBeenCalled();
+    }
+  );
+
+  it('should submit edit when submitValue is called', () => {
     thereBeErrors = false;
+    const submitValueRef = React.createRef<TableProps.CellContext<string>['submitValue'] | null>();
     const changeEvent = new Event('change', { bubbles: true });
-    const { wrapper } = renderComponent(<TestComponent />);
+    const { wrapper } = renderComponent(<TestComponent submitValueRef={submitValueRef} />);
     const input = wrapper.find('input')!.getElement();
 
     fireEvent.click(input);
 
     fireEvent(input, changeEvent);
     expect(wrapper.find('[aria-label="error-icon"]')?.getElement()).toBeUndefined();
 
-    fireEvent.click(wrapper.getElement().querySelector('[aria-label="save edit"]')!);
+    act(() => {
+      submitValueRef.current!();
+    });
     waitFor(() => {
       expect(handleSubmitEdit).toHaveBeenCalled();
       expect(handleSubmitEdit.mock.lastCall!.length).toBe(3);
@@ -105,6 +141,16 @@ describe('InlineEditor', () => {
     expect(handleEditEnd).toHaveBeenCalled();
   });
 
+  it('should not render a form element if disableNativeForm is set', () => {
+    const { wrapper } = renderComponent(<TestComponent disableNativeForm={true} />);
+    expect(wrapper.find('form')).toBe(null);
+  });
+
+  it('should not render a submit button if disableNativeForm is set', () => {
+    const { wrapper } = renderComponent(<TestComponent disableNativeForm={true} />);
+    expect(wrapper.find('button[type=submit]')).toBe(null);
+  });
+
   it('should not submit any wrapping forms', () => {
     thereBeErrors = false;
     const changeEvent = new Event('change', { bubbles: true });

src/table/body-cell/inline-editor.tsx

@@ -45,21 +45,14 @@ export function InlineEditor<ItemType>({
 
   const focusLockRef = useRef<FocusLockRef>(null);
 
-  const cellContext = {
-    currentValue: currentEditValue,
-    setValue: setCurrentEditValue,
-  };
-
   function finishEdit({ cancelled = false, refocusCell = true }: Partial<OnEditEndOptions> = {}) {
     if (!cancelled) {
       setCurrentEditValue(undefined);
     }
     onEditEnd({ cancelled, refocusCell: refocusCell });
   }
 
-  async function onSubmitClick(evt: React.FormEvent) {
-    evt.preventDefault(); // Prevents the form from navigating away
-    evt.stopPropagation(); // Prevents any outer form elements from submitting
+  async function handleSubmit() {
     if (currentEditValue === undefined) {
       finishEdit();
       return;
@@ -79,6 +72,12 @@ export function InlineEditor<ItemType>({
     }
   }
 
+  function onFormSubmit(evt: React.FormEvent) {
+    evt.preventDefault(); // Prevents the form from navigating away
+    evt.stopPropagation(); // Prevents any outer form elements from submitting
+    handleSubmit();
+  }
+
   function onCancel({ reFocusEditedCell = true } = {}) {
     if (currentEditLoading) {
       return;
@@ -108,8 +107,17 @@ export function InlineEditor<ItemType>({
     errorIconAriaLabel,
     constraintText,
     editingCell,
+    disableNativeForm,
   } = column.editConfig!;
 
+  const cellContext = {
+    currentValue: currentEditValue,
+    setValue: setCurrentEditValue,
+    submitValue: handleSubmit,
+  };
+
+  const FormElement = disableNativeForm ? 'div' : 'form';
+
   return (
     <FocusLock restoreFocus={true} ref={focusLockRef}>
       <div
@@ -118,7 +126,7 @@ export function InlineEditor<ItemType>({
         aria-label={ariaLabels?.activateEditLabel?.(column, item)}
         onKeyDown={handleEscape}
       >
-        <form onSubmit={onSubmitClick}>
+        <FormElement onSubmit={disableNativeForm ? undefined : onFormSubmit}>
           <FormField
             stretch={true}
             label={ariaLabel}
@@ -143,7 +151,8 @@ export function InlineEditor<ItemType>({
                   ) : null}
                   <Button
                     ariaLabel={ariaLabels?.submitEditLabel?.(column)}
-                    formAction="submit"
+                    formAction={disableNativeForm ? 'none' : 'submit'}
+                    onClick={disableNativeForm ? handleSubmit : undefined}
                     iconName="check"
                     variant="inline-icon"
                     loading={currentEditLoading}
@@ -157,7 +166,7 @@ export function InlineEditor<ItemType>({
               </span>
             </div>
           </FormField>
-        </form>
+        </FormElement>
       </div>
     </FocusLock>
   );

src/table/interfaces.tsx

@@ -116,6 +116,9 @@ export interface TableProps<T = any> extends BaseComponentProps {
    *        The `cellContext` object contains the following properties:
    *     * `cellContext.currentValue` - State to keep track of a value in input fields while editing.
    *     * `cellContext.setValue` - Function to update `currentValue`. This should be called when the value in input field changes.
+   *     * `cellContext.submitValue` - Function to submit the `currentValue`.
+   *   * `editConfig.disableNativeForm` (boolean) - Disables the use of a `<form>` element to capture submissions inside the inline editor.
+   *        If enabled, ensure that any text inputs in the editing cell submit the cell value when the Enter key is pressed, using `cellContext.submitValue`.
    * * `isRowHeader` (boolean) - Specifies that cells in this column should be used as row headers.
    * * `hasDynamicContent` (boolean) - Specifies that cells in this column may have dynamic content. The contents will then be observed to update calculated column widths.
    *    This may have a negative performance impact, so should be used only if necessary. It has no effect if `resizableColumns` is set to `true`.
@@ -410,6 +413,7 @@ export namespace TableProps {
   export interface CellContext<V> {
     currentValue: Optional<V>;
     setValue: (value: V | undefined) => void;
+    submitValue: () => void;
   }
 
   export interface EditConfig<T, V = any> {
@@ -449,6 +453,13 @@ export namespace TableProps {
      * Determines whether inline edit for certain items is disabled, and provides a reason why.
      */
     disabledReason?: (item: T) => string | undefined;
+
+    /**
+     * Disables the use of a `<form>` element to capture submissions inside the inline editor.
+     * If enabled, ensure that any text inputs in the editing cell submit the cell value when
+     * the Enter key is pressed, using `cellContext.submitValue`.
+     */
+    disableNativeForm?: boolean;
   }
 
   export type ColumnDefinition<ItemType> = {