Fixes 2931: Fix issue hitting enter on input is clearing pre-added tags (#26039)

* Fix issue entering on input is clearing pre-added tags

* address gitar bot review comments

* fix failing jest tests

---------

Co-authored-by: Shrabanti Paul <shrabantipaul@Shrabantis-MacBook-Pro.local>
(cherry picked from commit 2086d37)

Author: 2 people

openmetadata-ui/src/main/resources/ui/src/components/SettingsSso/SSOConfigurationForm/SSOConfigurationForm.tsx

@@ -57,6 +57,7 @@ import {
   clearFieldError,
   createDOMClickHandler,
   createDOMFocusHandler,
+  createFormKeyDownHandler,
   createFreshFormData,
   findChangedFields,
   getProviderDisplayName,
@@ -542,16 +543,19 @@ const SSOConfigurationFormRJSF = ({
   useEffect(() => {
     const handleDOMFocus = createDOMFocusHandler(setActiveField);
     const handleDOMClick = createDOMClickHandler(setActiveField);
+    const handleKeyDown = createFormKeyDownHandler();
 
     // Add event listeners when form is shown
     if (showForm) {
       document.addEventListener('focusin', handleDOMFocus);
       document.addEventListener('click', handleDOMClick);
+      document.addEventListener('keydown', handleKeyDown, true);
     }
 
     return () => {
       document.removeEventListener('focusin', handleDOMFocus);
       document.removeEventListener('click', handleDOMClick);
+      document.removeEventListener('keydown', handleKeyDown, true);
     };
   }, [showForm]);
 

openmetadata-ui/src/main/resources/ui/src/utils/SSOUtils.test.ts

@@ -20,6 +20,7 @@ import {
   clearFieldError,
   createDOMClickHandler,
   createDOMFocusHandler,
+  createFormKeyDownHandler,
   createFreshFormData,
   extractFieldName,
   findChangedFields,
@@ -2797,4 +2798,173 @@ describe('SSOUtils', () => {
       expect(hasFieldValidationErrors(error)).toBe(true);
     });
   });
+
+  describe('createFormKeyDownHandler', () => {
+    let handler: (e: KeyboardEvent) => void;
+    let mockEvent: Partial<KeyboardEvent>;
+
+    beforeEach(() => {
+      handler = createFormKeyDownHandler();
+      mockEvent = {
+        key: 'Enter',
+        preventDefault: jest.fn(),
+        stopPropagation: jest.fn(),
+      };
+    });
+
+    describe('should prevent default for regular input fields', () => {
+      it('should prevent default when Enter is pressed in INPUT element', () => {
+        const input = document.createElement('input');
+        Object.defineProperty(mockEvent, 'target', {
+          value: input,
+          writable: true,
+        });
+
+        handler(mockEvent as KeyboardEvent);
+
+        expect(mockEvent.preventDefault).toHaveBeenCalled();
+        expect(mockEvent.stopPropagation).toHaveBeenCalled();
+      });
+
+      it('should prevent default when Enter is pressed in Ant Design input field', () => {
+        const div = document.createElement('div');
+        div.className = 'ant-input';
+        Object.defineProperty(mockEvent, 'target', {
+          value: div,
+          writable: true,
+        });
+
+        handler(mockEvent as KeyboardEvent);
+
+        expect(mockEvent.preventDefault).toHaveBeenCalled();
+        expect(mockEvent.stopPropagation).toHaveBeenCalled();
+      });
+    });
+
+    describe('should NOT prevent default for special cases', () => {
+      it('should NOT prevent default when Enter is pressed in TEXTAREA', () => {
+        const textarea = document.createElement('textarea');
+        Object.defineProperty(mockEvent, 'target', {
+          value: textarea,
+          writable: true,
+        });
+
+        handler(mockEvent as KeyboardEvent);
+
+        expect(mockEvent.preventDefault).not.toHaveBeenCalled();
+        expect(mockEvent.stopPropagation).not.toHaveBeenCalled();
+      });
+
+      it('should NOT prevent default when Enter is pressed in Select tags component', () => {
+        const input = document.createElement('input');
+        const selector = document.createElement('div');
+        selector.className = 'ant-select-selector';
+        selector.appendChild(input);
+        Object.defineProperty(mockEvent, 'target', {
+          value: input,
+          writable: true,
+        });
+
+        handler(mockEvent as KeyboardEvent);
+
+        expect(mockEvent.preventDefault).not.toHaveBeenCalled();
+        expect(mockEvent.stopPropagation).not.toHaveBeenCalled();
+      });
+
+      it('should NOT prevent default for non-Enter keys', () => {
+        const input = document.createElement('input');
+        Object.defineProperty(mockEvent, 'target', {
+          value: input,
+          writable: true,
+        });
+        Object.defineProperty(mockEvent, 'key', {
+          value: 'Tab',
+          writable: true,
+        });
+
+        handler(mockEvent as KeyboardEvent);
+
+        expect(mockEvent.preventDefault).not.toHaveBeenCalled();
+        expect(mockEvent.stopPropagation).not.toHaveBeenCalled();
+      });
+
+      it('should NOT prevent default for non-input elements', () => {
+        const div = document.createElement('div');
+        Object.defineProperty(mockEvent, 'target', {
+          value: div,
+          writable: true,
+        });
+
+        handler(mockEvent as KeyboardEvent);
+
+        expect(mockEvent.preventDefault).not.toHaveBeenCalled();
+        expect(mockEvent.stopPropagation).not.toHaveBeenCalled();
+      });
+
+      it('should NOT prevent default for button elements', () => {
+        const button = document.createElement('button');
+        Object.defineProperty(mockEvent, 'target', {
+          value: button,
+          writable: true,
+        });
+
+        handler(mockEvent as KeyboardEvent);
+
+        expect(mockEvent.preventDefault).not.toHaveBeenCalled();
+        expect(mockEvent.stopPropagation).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('edge cases', () => {
+      it('should handle null target gracefully', () => {
+        Object.defineProperty(mockEvent, 'target', {
+          value: null,
+          writable: true,
+        });
+
+        expect(() => handler(mockEvent as KeyboardEvent)).not.toThrow();
+        expect(mockEvent.preventDefault).not.toHaveBeenCalled();
+      });
+
+      it('should handle undefined target gracefully', () => {
+        Object.defineProperty(mockEvent, 'target', {
+          value: undefined,
+          writable: true,
+        });
+
+        expect(() => handler(mockEvent as KeyboardEvent)).not.toThrow();
+        expect(mockEvent.preventDefault).not.toHaveBeenCalled();
+      });
+
+      it('should prevent default for nested input inside ant-input div', () => {
+        const input = document.createElement('input');
+        const antInputDiv = document.createElement('div');
+        antInputDiv.className = 'ant-input';
+        antInputDiv.appendChild(input);
+        Object.defineProperty(mockEvent, 'target', {
+          value: antInputDiv,
+          writable: true,
+        });
+
+        handler(mockEvent as KeyboardEvent);
+
+        expect(mockEvent.preventDefault).toHaveBeenCalled();
+        expect(mockEvent.stopPropagation).toHaveBeenCalled();
+      });
+
+      it('should prevent default for input with multiple classes including ant-input', () => {
+        const div = document.createElement('div');
+        div.className = 'custom-class ant-input another-class';
+        Object.defineProperty(mockEvent, 'target', {
+          value: div,
+          writable: true,
+        });
+
+        handler(mockEvent as KeyboardEvent);
+
+        expect(mockEvent.preventDefault).toHaveBeenCalled();
+        expect(mockEvent.stopPropagation).toHaveBeenCalled();
+      });
+    });
+  });
 });

openmetadata-ui/src/main/resources/ui/src/utils/SSOUtils.ts

@@ -1045,3 +1045,31 @@ export const hasFieldValidationErrors = (
     'errors' in axiosError.response.data
   );
 };
+
+/**
+ * Creates a keydown event handler that prevents form submission when Enter is pressed in input fields
+ * This prevents array field tags from being removed when Enter is pressed in other fields
+ * @returns Event handler function for keydown events
+ */
+export const createFormKeyDownHandler = () => {
+  return (e: KeyboardEvent) => {
+    if (
+      e.key === 'Enter' &&
+      e.target &&
+      (e.target as HTMLElement).tagName !== 'TEXTAREA'
+    ) {
+      const target = e.target as HTMLElement;
+
+      if (
+        target.tagName === 'INPUT' ||
+        target.classList.contains('ant-input')
+      ) {
+        const isInSelectTags = target.closest('.ant-select-selector');
+        if (!isInSelectTags) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      }
+    }
+  };
+};