From fa389944942b5bbb25db3c0d02b94bf275259d76 Mon Sep 17 00:00:00 2001
From: jacobshandling <61553566+jacobshandling@users.noreply.github.com>
Date: Thu, 20 Nov 2025 14:53:00 -0800
Subject: [PATCH] UI: Update host end user form UX fixes (#36092)

<!-- Add the related story/sub-task/bug number, like Resolves #123, or
remove if NA -->
**Related issue:** Resolves #36056

- Fix submitting form with keyboard enter
- Fix opening modal with keyboard enter

- [x] Manual QA
---
 .../hosts/details/HostDetailsPage/HostDetailsPage.tsx    | 9 ++++++++-
 frontend/pages/hosts/details/cards/User/User.tsx         | 8 ++++++--
 .../components/UpdateEndUserModal/UpdateEndUserModal.tsx | 7 ++++---
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx b/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx
index ef028a6b41..d26cbfe646 100644
--- a/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx
+++ b/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx
@@ -1232,7 +1232,14 @@ const HostDetailsPage = ({
                     isGlobalAdmin ||
                     isGlobalMaintainer
                   }
-                  onClickUpdateUser={() => setShowUpdateEndUserModal(true)}
+                  onClickUpdateUser={(
+                    e:
+                      | React.MouseEvent<HTMLButtonElement>
+                      | React.KeyboardEvent<HTMLButtonElement>
+                  ) => {
+                    e.preventDefault();
+                    setShowUpdateEndUserModal(true);
+                  }}
                 />
                 {showActivityCard && (
                   <ActivityCard
diff --git a/frontend/pages/hosts/details/cards/User/User.tsx b/frontend/pages/hosts/details/cards/User/User.tsx
index d3995f771f..6567fd17d6 100644
--- a/frontend/pages/hosts/details/cards/User/User.tsx
+++ b/frontend/pages/hosts/details/cards/User/User.tsx
@@ -31,7 +31,11 @@ interface IUserProps {
   disableFullNameTooltip?: boolean;
   disableGroupsTooltip?: boolean;
   className?: string;
-  onClickUpdateUser?: () => void;
+  onClickUpdateUser?: (
+    e:
+      | React.MouseEvent<HTMLButtonElement>
+      | React.KeyboardEvent<HTMLButtonElement>
+  ) => void;
 }
 
 const User = ({
@@ -40,7 +44,7 @@ const User = ({
   disableFullNameTooltip = false,
   disableGroupsTooltip = false,
   className,
-  onClickUpdateUser = noop,
+  onClickUpdateUser,
 }: IUserProps) => {
   const classNames = classnames(baseClass, className);
 
diff --git a/frontend/pages/hosts/details/cards/User/components/UpdateEndUserModal/UpdateEndUserModal.tsx b/frontend/pages/hosts/details/cards/User/components/UpdateEndUserModal/UpdateEndUserModal.tsx
index b0fc7e7f0d..470c289039 100644
--- a/frontend/pages/hosts/details/cards/User/components/UpdateEndUserModal/UpdateEndUserModal.tsx
+++ b/frontend/pages/hosts/details/cards/User/components/UpdateEndUserModal/UpdateEndUserModal.tsx
@@ -33,7 +33,8 @@ const UpdateEndUserModal = ({
   const isEditing = !!userNameDisplayValue;
   const [idpUsername, setIdpUsername] = useState(userNameDisplayValue || "");
 
-  const onSave = () => {
+  const onSave = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
     onUpdate(idpUsername);
   };
 
@@ -43,7 +44,7 @@ const UpdateEndUserModal = ({
     }
     return (
       <>
-        <form>
+        <form onSubmit={onSave}>
           <InputField
             label="Username (IdP)"
             name="username_idp"
@@ -57,7 +58,7 @@ const UpdateEndUserModal = ({
             <Button
               isLoading={isUpdating}
               disabled={isUpdating || (!isEditing && idpUsername === "")}
-              onClick={onSave}
+              type="submit"
             >
               Save
             </Button>