diff --git a/src/components/PageComponents/Config/Security.tsx b/src/components/PageComponents/Config/Security.tsx
index c0555015..550b55e0 100644
--- a/src/components/PageComponents/Config/Security.tsx
+++ b/src/components/PageComponents/Config/Security.tsx
@@ -120,8 +120,7 @@ export const Security = (): JSX.Element => {
     <>
       <DynamicForm<SecurityValidation>
         onSubmit={onSubmit}
-        submitType="onSubmit"
-        hasSubmitButton={true}
+        submitType="onChange"
         defaultValues={{
           ...config.security,
           ...{
diff --git a/src/components/UI/Generator.tsx b/src/components/UI/Generator.tsx
index ed228a5c..7d589be4 100644
--- a/src/components/UI/Generator.tsx
+++ b/src/components/UI/Generator.tsx
@@ -50,6 +50,21 @@ const Generator = React.forwardRef<HTMLInputElement, GeneratorProps>(
     },
     ref,
   ) => {
+    const inputRef = React.useRef<HTMLInputElement>(null);
+
+    // Invokes onChange event on the input element when the value changes from the parent component
+    React.useEffect(() => {
+      if (!inputRef.current) return;
+      const setValue = Object.getOwnPropertyDescriptor(
+        HTMLInputElement.prototype,
+        "value",
+      )?.set;
+
+      if (!setValue) return;
+      inputRef.current.value = "";
+      setValue.call(inputRef.current, value);
+      inputRef.current.dispatchEvent(new Event("input", { bubbles: true }));
+    }, [value]);
     return (
       <>
         <Input
@@ -60,6 +75,7 @@ const Generator = React.forwardRef<HTMLInputElement, GeneratorProps>(
           onChange={inputChange}
           action={action}
           disabled={disabled}
+          ref={inputRef}
         />
         <Select
           value={devicePSKBitCount?.toString()}