diff --git a/frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx b/frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx
index 1d2d1ead1..a3f0ef323 100644
--- a/frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx
+++ b/frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx
@@ -61,6 +61,8 @@ export const CreateSecretForm = ({
   );
 
   const secretKeyInputRef = useRef<HTMLInputElement>(null);
+  const { ref: setSecretKeyHookRef, ...secretKeyRegisterRest } = register("key");
+
   const secretKey = watch("key");
 
   const slugSchema = z.string().trim().toLowerCase().min(1);
@@ -122,12 +124,11 @@ export const CreateSecretForm = ({
       secretKeyInputRef.current.selectionEnd === secretKeyInputRef.current.value.length;
 
     if (!secretKey || isWholeKeyHighlighted) {
+      e.preventDefault();
+
       setValue("key", key);
       setValue("value", value);
     }
-    if (!secretKey) {
-      e.preventDefault();
-    }
   };
 
   return (
@@ -139,8 +140,15 @@ export const CreateSecretForm = ({
         errorText={errors?.key?.message}
       >
         <Input
-          {...register("key")}
-          ref={secretKeyInputRef}
+          {...secretKeyRegisterRest}
+          ref={(e) => {
+            setSecretKeyHookRef(e);
+            // Can't directly set secretKeyInputRef.current = e, because of read-only property definitions
+            Object.defineProperty(secretKeyInputRef, "current", {
+              value: e,
+              writable: true
+            });
+          }}
           placeholder="Type your secret name"
           onPaste={handlePaste}
           autoCapitalization={autoCapitalize}
diff --git a/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx b/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx
index 48a8bc9f6..9633472cc 100644
--- a/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx
+++ b/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx
@@ -63,6 +63,8 @@ export const CreateSecretForm = ({ secretPath = "/", onClose }: Props) => {
   );
 
   const secretKeyInputRef = useRef<HTMLInputElement>(null);
+  const { ref: setSecretKeyHookRef, ...secretKeyRegisterRest } = register("key");
+
   const secretKey = watch("key");
 
   const handleFormSubmit = async ({ key, value, environments: selectedEnv, tags }: TFormSchema) => {
@@ -166,12 +168,11 @@ export const CreateSecretForm = ({ secretPath = "/", onClose }: Props) => {
       secretKeyInputRef.current.selectionEnd === secretKeyInputRef.current.value.length;
 
     if (!secretKey || isWholeKeyHighlighted) {
+      e.preventDefault();
+
       setValue("key", key);
       setValue("value", value);
     }
-    if (!secretKey) {
-      e.preventDefault();
-    }
   };
 
   const createWsTag = useCreateWsTag();
@@ -202,8 +203,15 @@ export const CreateSecretForm = ({ secretPath = "/", onClose }: Props) => {
         errorText={errors?.key?.message}
       >
         <Input
-          {...register("key")}
-          ref={secretKeyInputRef}
+          {...secretKeyRegisterRest}
+          ref={(e) => {
+            setSecretKeyHookRef(e);
+            // Can't directly set secretKeyInputRef.current = e, because of read-only property definitions
+            Object.defineProperty(secretKeyInputRef, "current", {
+              value: e,
+              writable: true
+            });
+          }}
           placeholder="Type your secret name"
           onPaste={handlePaste}
           autoCapitalization={currentWorkspace?.autoCapitalization}