diff --git a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OIDCModal.tsx b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OIDCModal.tsx index 6ea7fe98f..ba3b0b8af 100644 --- a/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OIDCModal.tsx +++ b/frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OIDCModal.tsx @@ -14,6 +14,7 @@ import { SelectItem } from "@app/components/v2"; import { useOrganization } from "@app/context"; +import { useToggle } from "@app/hooks"; import { useGetOIDCConfig } from "@app/hooks/api"; import { useCreateOIDCConfig, useUpdateOIDCConfig } from "@app/hooks/api/oidcConfig/mutations"; import { UsePopUpState } from "@app/hooks/usePopUp"; @@ -107,6 +108,9 @@ export const OIDCModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props) } }); + const [isClientIdFocused, setIsClientIdFocused] = useToggle(); + const [isClientSecretFocused, setIsClientSecretFocused] = useToggle(); + const configurationTypeValue = watch("configurationType"); useEffect(() => { @@ -339,9 +343,14 @@ export const OIDCModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props) setIsClientIdFocused.on()} {...field} + onBlur={() => { + field.onBlur(); + setIsClientIdFocused.off(); + }} + autoComplete="off" className="bg-mineshaft-800" /> @@ -357,10 +366,15 @@ export const OIDCModal = ({ popUp, handlePopUpClose, handlePopUpToggle }: Props) isError={Boolean(error)} > setIsClientSecretFocused.on()} + onBlur={() => { + field.onBlur(); + setIsClientSecretFocused.off(); + }} className="bg-mineshaft-800" />