fix submit button disabled breaking async task

res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss

@@ -85,3 +85,9 @@ limitations under the License.
     flex: 1;
     white-space: nowrap;
 }
+
+.mx_CreateKeyBackupDialog {
+    details .mx_AccessibleButton {
+        margin: 1em 0; // emulate paragraph spacing because we can't put this button in a paragraph due to HTML rules
+    }
+}

src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js

@@ -24,6 +24,7 @@ import { scorePassword } from '../../../../utils/PasswordScorer';
 import { _t } from '../../../../languageHandler';
 import { accessSecretStorage } from '../../../../CrossSigningManager';
 import SettingsStore from '../../../../settings/SettingsStore';
+import AccessibleButton from "../../../../components/views/elements/AccessibleButton";
 
 const PHASE_PASSPHRASE = 0;
 const PHASE_PASSPHRASE_CONFIRM = 1;
@@ -191,7 +192,9 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
         });
     }
 
-    _onPassPhraseNextClick = async () => {
+    _onPassPhraseNextClick = async (e) => {
+        e.preventDefault();
+
         // If we're waiting for the timeout before updating the result at this point,
         // skip ahead and do it now, otherwise we'll deny the attempt to proceed
         // even if the user entered a valid passphrase
@@ -209,7 +212,9 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
         }
     };
 
-    _onPassPhraseConfirmNextClick = async () => {
+    _onPassPhraseConfirmNextClick = async (e) => {
+        e.preventDefault();
+
         if (this.state.passPhrase !== this.state.passPhraseConfirm) return;
 
         this._keyBackupInfo = await MatrixClientPeg.get().prepareKeyBackupVersion(this.state.passPhrase);
@@ -289,7 +294,7 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
             </div>;
         }
 
-        return <form>
+        return <form onSubmit={this._onPassPhraseNextClick}>
             <p>{_t(
                 "<b>Warning</b>: You should only set up key backup from a trusted computer.", {},
                 { b: sub => <b>{sub}</b> },
@@ -320,15 +325,14 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
                 primaryButton={_t('Next')}
                 onPrimaryButtonClick={this._onPassPhraseNextClick}
                 hasCancel={false}
-                primaryIsSubmit={true}
                 disabled={!this._passPhraseIsValid()}
             />
 
             <details>
                 <summary>{_t("Advanced")}</summary>
-                <p><button onClick={this._onSkipPassPhraseClick} >
+                <AccessibleButton kind='primary' onClick={this._onSkipPassPhraseClick} >
                     {_t("Set up with a recovery key")}
-                </button></p>
+                </AccessibleButton>
             </details>
         </form>;
     }
@@ -362,7 +366,7 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
             </div>;
         }
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-        return <form>
+        return <form onSubmit={this._onPassPhraseConfirmNextClick}>
             <p>{_t(
                 "Please enter your passphrase a second time to confirm.",
             )}</p>
@@ -384,7 +388,6 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
                 primaryButton={_t('Next')}
                 onPrimaryButtonClick={this._onPassPhraseConfirmNextClick}
                 hasCancel={false}
-                primaryIsSubmit={true}
                 disabled={this.state.passPhrase !== this.state.passPhraseConfirm}
             />
         </form>;

src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js

@@ -413,8 +413,8 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                 "as trusted for other users.",
             )}</p>
             <div>{authPrompt}</div>
-            <DialogButtons primaryButton={nextCaption}
-                primaryIsSubmit={true}
+            <DialogButtons
+                primaryButton={nextCaption}
                 hasCancel={false}
                 primaryDisabled={this.state.canUploadKeysWithPasswordOnly && !this.state.accountPassword}
             >
@@ -458,7 +458,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
             </div>;
         }
 
-        return <form>
+        return <form onSubmit={this._onPassPhraseNextClick}>
             <p>{_t(
                 "Set up encryption on this session to allow it to verify other sessions, " +
                 "granting them access to encrypted messages and marking them as trusted for other users.",
@@ -495,7 +495,6 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                 onPrimaryButtonClick={this._onPassPhraseNextClick}
                 hasCancel={false}
                 disabled={!this._passPhraseIsValid()}
-                primaryIsSubmit={true}
             >
                 <button type="button"
                     onClick={this._onSkipSetupClick}
@@ -542,7 +541,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
             </div>;
         }
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-        return <form>
+        return <form onSubmit={this._onPassPhraseConfirmNextClick}>
             <p>{_t(
                 "Enter your passphrase a second time to confirm it.",
             )}</p>
@@ -565,7 +564,6 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                 primaryButton={_t('Continue')}
                 onPrimaryButtonClick={this._onPassPhraseConfirmNextClick}
                 hasCancel={false}
-                primaryIsSubmit={true}
                 disabled={this.state.passPhrase !== this.state.passPhraseConfirm}
             >
                 <button type="button"