From cc1fdd0822f03f796392d2fd7ce110b68b88d710 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A1rio=20Nunes?= <mariojsnunes@gmail.com>
Date: Fri, 12 Jul 2024 20:01:36 +0800
Subject: [PATCH] chore: use react-router new routing approach RouterProvider
 (#3761)

* chore: use react-router new routing approach RouterProvider
* fix: confirmation on leaving the page
---
 .../src/BlockedRoute/BlockedRoute.tsx         |   2 +-
 .../src/Breadcrumbs/BreadcrumbsItem.tsx       |   8 +-
 .../ButtonShowReplies/ButtonShowReplies.tsx   |   3 +-
 .../src/CommentItem/CommentItem.tsx           |   2 +
 .../src/CommentList/CommentList.tsx           |   5 +-
 .../src/ConfirmModal/ConfirmModal.tsx         |   8 +-
 .../ContentStatistics/ContentStatistics.tsx   |   3 +-
 .../src/EditComment/EditComment.tsx           |   3 +-
 .../src/FollowButton/FollowButton.tsx         |   1 +
 .../components/src/ImageCrop/ImageCrop.tsx    |   6 +-
 .../components/src/MapWithPin/MapWithPin.tsx  |   1 +
 .../src/NotificationList/NotificationList.tsx |   3 +-
 .../ResearchEditorOverview.tsx                |   4 +-
 .../ResearchEditorOverview.test.tsx.snap      |   6 +
 .../UsefulStatsButton/UsefulStatsButton.tsx   |   1 +
 .../src/integration/howto/write.spec.ts       |  19 +--
 .../src/integration/research/write.spec.ts    |  21 +---
 .../cypress/src/integration/settings.spec.ts  |  15 +--
 packages/cypress/src/support/commandsUi.ts    |   9 +-
 src/common/Error/handlers/ChunkLoadError.tsx  |   4 +-
 src/common/Form/FileInput/FileInput.tsx       |   1 +
 src/common/Form/ImageInput/DeleteImage.tsx    |   1 +
 src/common/Form/UnsavedChangesDialog.tsx      |  56 +++------
 src/common/HideDiscussionContainer.tsx        |   1 +
 src/common/hooks/usePrompt.ts                 |  48 --------
 src/pages/Howto/Content/Common/Howto.form.tsx |  12 +-
 .../Content/Common/HowtoButtonPublish.tsx     |   2 +-
 .../Howto/Content/Common/HowtoFieldFiles.tsx  |   1 +
 .../Howto/Content/Common/HowtoFieldStep.tsx   |   6 +-
 .../Common/HowtoFieldStepsContainer.tsx       |   5 +-
 .../Howto/Content/Common/SubmitStatus.tsx     |   1 +
 src/pages/Howto/Content/Howto/Howto.tsx       |   1 +
 .../HowtoDescription/HowtoDescription.tsx     |   3 +-
 .../Howto/Content/HowtoList/HowtoList.tsx     |   5 +-
 src/pages/Maps/Content/Controls/Controls.tsx  |   5 +-
 .../Content/Controls/GroupingFilterMobile.tsx |   2 +-
 .../Question/Content/Common/QuestionForm.tsx  |   2 +-
 src/pages/Question/QuestionListing.tsx        |   4 +-
 src/pages/Question/QuestionPage.tsx           |   2 +-
 .../Research/Content/Common/Research.form.tsx |  71 ++---------
 .../Content/Common/ResearchUpdate.form.tsx    |  35 +++---
 .../Research/Content/Common/SubmitStatus.tsx  |   4 +-
 .../CreateResearch/Form/FilesFields.tsx       |   7 +-
 .../Research/Content/ResearchArticle.tsx      |   1 +
 .../Research/Content/ResearchDescription.tsx  |  13 +-
 src/pages/Research/Content/ResearchList.tsx   |   9 +-
 src/pages/Research/Content/ResearchUpdate.tsx |   5 +-
 src/pages/SignUp/SignUp.tsx                   |   2 +-
 src/pages/SignUp/SignUpMessage.tsx            |   9 +-
 .../User/contact/UserContactNotLoggedIn.tsx   |   4 +-
 src/pages/User/impact/ImpactMissing.tsx       |   4 +-
 .../content/formSections/ChangeEmail.form.tsx |   1 +
 .../formSections/ChangePassword.form.tsx      |   1 +
 .../formSections/Collection.section.tsx       |   1 +
 .../Fields/OpeningHoursPicker.field.tsx       |  48 +++++---
 .../formSections/Fields/ProfileLink.field.tsx |   5 +-
 .../formSections/Impact/Impact.section.tsx    |   1 +
 .../Impact/ImpactYearDisplay.field.tsx        |   1 +
 .../formSections/PatreonIntegration.tsx       |   2 +
 .../formSections/SettingsMapPinSection.tsx    |   4 +
 .../formSections/UserProfile.section.tsx      |  11 +-
 src/pages/common/Drafts/DraftButton.tsx       |   1 +
 src/pages/common/Header/Header.tsx            |   1 +
 .../Header/Menu/Profile/ProfileButtonItem.tsx |   1 +
 src/pages/common/StickyButton.tsx             |   2 +
 src/pages/index.tsx                           | 116 +++++++++++-------
 66 files changed, 302 insertions(+), 340 deletions(-)
 delete mode 100644 src/common/hooks/usePrompt.ts

diff --git a/packages/components/src/BlockedRoute/BlockedRoute.tsx b/packages/components/src/BlockedRoute/BlockedRoute.tsx
index f713c08771..7d842c5f7d 100644
--- a/packages/components/src/BlockedRoute/BlockedRoute.tsx
+++ b/packages/components/src/BlockedRoute/BlockedRoute.tsx
@@ -20,7 +20,7 @@ export const BlockedRoute = (props: BlockedRouteProps) => {
       <Text sx={{ width: '100%', textAlign: 'center' }}>{props.children}</Text>
       <Box sx={{ textAlign: 'center', mt: 2 }}>
         <InternalLink to={redirectUrl}>
-          <Button variant={'subtle'} small>
+          <Button type="button" variant="subtle" small>
             {redirectLabel}
           </Button>
         </InternalLink>
diff --git a/packages/components/src/Breadcrumbs/BreadcrumbsItem.tsx b/packages/components/src/Breadcrumbs/BreadcrumbsItem.tsx
index bc51282ac7..d71a221791 100644
--- a/packages/components/src/Breadcrumbs/BreadcrumbsItem.tsx
+++ b/packages/components/src/Breadcrumbs/BreadcrumbsItem.tsx
@@ -17,10 +17,14 @@ interface BreadcrumbItemProps {
 const BreadcrumbButton = ({ text, link }: BreadcrumbButtonProps) => {
   return link ? (
     <Link to={link}>
-      <Button variant="breadcrumb">{text}</Button>
+      <Button type="button" variant="breadcrumb">
+        {text}
+      </Button>
     </Link>
   ) : (
-    <Button variant="breadcrumb">{text}</Button>
+    <Button type="button" variant="breadcrumb">
+      {text}
+    </Button>
   )
 }
 
diff --git a/packages/components/src/ButtonShowReplies/ButtonShowReplies.tsx b/packages/components/src/ButtonShowReplies/ButtonShowReplies.tsx
index 3fa29b82d4..786b67602e 100644
--- a/packages/components/src/ButtonShowReplies/ButtonShowReplies.tsx
+++ b/packages/components/src/ButtonShowReplies/ButtonShowReplies.tsx
@@ -20,7 +20,8 @@ export const ButtonShowReplies = (props: Props) => {
 
   return (
     <Button
-      data-cy={`show-replies`}
+      type="button"
+      data-cy="show-replies"
       icon={icon}
       onClick={setIsShowReplies}
       sx={{ alignSelf: 'flex-start', border: 'none' }}
diff --git a/packages/components/src/CommentItem/CommentItem.tsx b/packages/components/src/CommentItem/CommentItem.tsx
index 61e8731529..5f2f91fbc1 100644
--- a/packages/components/src/CommentItem/CommentItem.tsx
+++ b/packages/components/src/CommentItem/CommentItem.tsx
@@ -160,6 +160,7 @@ export const CommentItem = (props: IProps) => {
                     }}
                   >
                     <Button
+                      type="button"
                       data-cy={`${item}: edit button`}
                       variant="outline"
                       small={true}
@@ -169,6 +170,7 @@ export const CommentItem = (props: IProps) => {
                       edit
                     </Button>
                     <Button
+                      type="button"
                       data-cy={`${item}: delete button`}
                       variant={'outline'}
                       small={true}
diff --git a/packages/components/src/CommentList/CommentList.tsx b/packages/components/src/CommentList/CommentList.tsx
index 1eac7da63a..79cc81c402 100644
--- a/packages/components/src/CommentList/CommentList.tsx
+++ b/packages/components/src/CommentList/CommentList.tsx
@@ -235,9 +235,8 @@ export const CommentList = (props: IPropsCommentList) => {
       {comments && comments.length > shownComments && (
         <Flex>
           <Button
-            sx={{
-              margin: '0 auto',
-            }}
+            type="button"
+            sx={{ margin: '0 auto' }}
             variant="outline"
             onClick={handleMoreComments}
           >
diff --git a/packages/components/src/ConfirmModal/ConfirmModal.tsx b/packages/components/src/ConfirmModal/ConfirmModal.tsx
index 2252c48a85..5aa1781547 100644
--- a/packages/components/src/ConfirmModal/ConfirmModal.tsx
+++ b/packages/components/src/ConfirmModal/ConfirmModal.tsx
@@ -20,12 +20,18 @@ export const ConfirmModal = (props: Props) => {
         <Text>{message}</Text>
         <Flex p={2} mx={-1} sx={{ justifyContent: 'flex-end' }}>
           <Flex px={1}>
-            <Button variant={'outline'} onClick={() => props?.handleCancel()}>
+            <Button
+              type="button"
+              variant="outline"
+              data-cy="Confirm.modal: Cancel"
+              onClick={() => props?.handleCancel()}
+            >
               Cancel
             </Button>
           </Flex>
           <Flex px={1}>
             <Button
+              type="button"
               aria-label={`Confirm ${confirmButtonText} action`}
               data-cy="Confirm.modal: Confirm"
               variant={'outline'}
diff --git a/packages/components/src/ContentStatistics/ContentStatistics.tsx b/packages/components/src/ContentStatistics/ContentStatistics.tsx
index 2c762700b0..9a79af886c 100644
--- a/packages/components/src/ContentStatistics/ContentStatistics.tsx
+++ b/packages/components/src/ContentStatistics/ContentStatistics.tsx
@@ -52,7 +52,8 @@ export const ContentStatistics = (props: IProps) => {
           {showStats ? '' : 'More Information'}
         </Text>
         <Button
-          variant={'subtle'}
+          type="button"
+          variant="subtle"
           showIconOnly={true}
           icon={showStats ? 'chevron-up' : 'chevron-down'}
           small={true}
diff --git a/packages/components/src/EditComment/EditComment.tsx b/packages/components/src/EditComment/EditComment.tsx
index ce784e3528..02fce605e8 100644
--- a/packages/components/src/EditComment/EditComment.tsx
+++ b/packages/components/src/EditComment/EditComment.tsx
@@ -79,6 +79,7 @@ export const EditComment = (props: IProps) => {
             />
             <Flex mt={4} ml="auto">
               <Button
+                type="button"
                 small
                 mr={4}
                 variant="secondary"
@@ -89,7 +90,7 @@ export const EditComment = (props: IProps) => {
               <Button
                 data-cy="edit-comment-submit"
                 data-testid="edit-comment-submit"
-                type={'submit'}
+                type="submit"
                 aria-label="Save changes"
                 small
                 disabled={disabled}
diff --git a/packages/components/src/FollowButton/FollowButton.tsx b/packages/components/src/FollowButton/FollowButton.tsx
index 7be035a46b..e52f9cd153 100644
--- a/packages/components/src/FollowButton/FollowButton.tsx
+++ b/packages/components/src/FollowButton/FollowButton.tsx
@@ -19,6 +19,7 @@ export const FollowButton = (props: IProps) => {
   return (
     <>
       <Button
+        type="button"
         data-testid={isLoggedIn ? 'follow-button' : 'follow-redirect'}
         data-cy={isLoggedIn ? 'follow-button' : 'follow-redirect'}
         data-tip={isLoggedIn ? '' : 'Login to follow'}
diff --git a/packages/components/src/ImageCrop/ImageCrop.tsx b/packages/components/src/ImageCrop/ImageCrop.tsx
index a1712b51c6..47aff2923d 100644
--- a/packages/components/src/ImageCrop/ImageCrop.tsx
+++ b/packages/components/src/ImageCrop/ImageCrop.tsx
@@ -157,7 +157,11 @@ export const ImageCrop = (props: Props) => {
       </Flex>
 
       <Box sx={{ padding }}>
-        <Button onClick={onDownloadCropClick} disabled={isLoading}>
+        <Button
+          type="button"
+          onClick={onDownloadCropClick}
+          disabled={isLoading}
+        >
           {callbackLabel}
         </Button>
       </Box>
diff --git a/packages/components/src/MapWithPin/MapWithPin.tsx b/packages/components/src/MapWithPin/MapWithPin.tsx
index a781518c6f..f0b4502b15 100644
--- a/packages/components/src/MapWithPin/MapWithPin.tsx
+++ b/packages/components/src/MapWithPin/MapWithPin.tsx
@@ -89,6 +89,7 @@ export const MapWithPin = (props: Props) => {
             />
             {hasUserLocation && (
               <Button
+                type="button"
                 mx={2}
                 onClick={(evt) => {
                   evt.preventDefault()
diff --git a/packages/components/src/NotificationList/NotificationList.tsx b/packages/components/src/NotificationList/NotificationList.tsx
index 97648e847a..ac15fa94e9 100644
--- a/packages/components/src/NotificationList/NotificationList.tsx
+++ b/packages/components/src/NotificationList/NotificationList.tsx
@@ -43,7 +43,8 @@ export const NotificationList = (props: Props) => {
             <NotificationItem key={idx} {...(notification as any)} />
           ))}
           <Button
-            style={{
+            type="button"
+            sx={{
               width: '100%',
               textAlign: 'center',
               display: 'flex',
diff --git a/packages/components/src/ResearchEditorOverview/ResearchEditorOverview.tsx b/packages/components/src/ResearchEditorOverview/ResearchEditorOverview.tsx
index 96ffd7527c..53ba5499a7 100644
--- a/packages/components/src/ResearchEditorOverview/ResearchEditorOverview.tsx
+++ b/packages/components/src/ResearchEditorOverview/ResearchEditorOverview.tsx
@@ -90,7 +90,7 @@ export const ResearchEditorOverview = (props: ResearchEditorOverviewProps) => {
         </Box>
       ) : null}
       {showCreateUpdateButton ? (
-        <Button small sx={{ mr: 2 }} data-cy="create-update">
+        <Button small sx={{ mr: 2 }} data-cy="create-update" type="button">
           <InternalLink
             to={`/research/${researchSlug}/new-update`}
             sx={{ color: 'black' }}
@@ -101,7 +101,7 @@ export const ResearchEditorOverview = (props: ResearchEditorOverviewProps) => {
       ) : null}
 
       {showBackToResearchButton ? (
-        <Button small variant={'outline'}>
+        <Button small variant="outline" type="button">
           <InternalLink
             to={`/research/${researchSlug}/edit`}
             sx={{ color: 'black' }}
diff --git a/packages/components/src/ResearchEditorOverview/__snapshots__/ResearchEditorOverview.test.tsx.snap b/packages/components/src/ResearchEditorOverview/__snapshots__/ResearchEditorOverview.test.tsx.snap
index cb186a1212..e99078f6b4 100644
--- a/packages/components/src/ResearchEditorOverview/__snapshots__/ResearchEditorOverview.test.tsx.snap
+++ b/packages/components/src/ResearchEditorOverview/__snapshots__/ResearchEditorOverview.test.tsx.snap
@@ -13,6 +13,7 @@ exports[`ResearchEditorOverview > handles empty updates 1`] = `
     <button
       class="css-fdla8g-Button"
       data-cy="create-update"
+      type="button"
     >
       <span
         class="css-a6mlbr-Text"
@@ -27,6 +28,7 @@ exports[`ResearchEditorOverview > handles empty updates 1`] = `
     </button>
     <button
       class="css-l7psd3-Button"
+      type="button"
     >
       <span
         class="css-a6mlbr-Text"
@@ -56,6 +58,7 @@ exports[`ResearchEditorOverview > handles falsey updates 1`] = `
     <button
       class="css-fdla8g-Button"
       data-cy="create-update"
+      type="button"
     >
       <span
         class="css-a6mlbr-Text"
@@ -70,6 +73,7 @@ exports[`ResearchEditorOverview > handles falsey updates 1`] = `
     </button>
     <button
       class="css-l7psd3-Button"
+      type="button"
     >
       <span
         class="css-a6mlbr-Text"
@@ -144,6 +148,7 @@ exports[`ResearchEditorOverview > renders correctly 1`] = `
     <button
       class="css-fdla8g-Button"
       data-cy="create-update"
+      type="button"
     >
       <span
         class="css-a6mlbr-Text"
@@ -158,6 +163,7 @@ exports[`ResearchEditorOverview > renders correctly 1`] = `
     </button>
     <button
       class="css-l7psd3-Button"
+      type="button"
     >
       <span
         class="css-a6mlbr-Text"
diff --git a/packages/components/src/UsefulStatsButton/UsefulStatsButton.tsx b/packages/components/src/UsefulStatsButton/UsefulStatsButton.tsx
index b69588266f..bcaf769656 100644
--- a/packages/components/src/UsefulStatsButton/UsefulStatsButton.tsx
+++ b/packages/components/src/UsefulStatsButton/UsefulStatsButton.tsx
@@ -35,6 +35,7 @@ export const UsefulStatsButton = (props: IProps) => {
   return (
     <>
       <Button
+        type="button"
         data-tip={props.isLoggedIn ? '' : 'Login to add your vote'}
         data-cy={props.isLoggedIn ? 'vote-useful' : 'vote-useful-redirect'}
         onClick={() =>
diff --git a/packages/cypress/src/integration/howto/write.spec.ts b/packages/cypress/src/integration/howto/write.spec.ts
index 167df91a63..b8b9ab4376 100644
--- a/packages/cypress/src/integration/howto/write.spec.ts
+++ b/packages/cypress/src/integration/howto/write.spec.ts
@@ -335,10 +335,6 @@ describe('[How To]', () => {
     })
 
     it('[Warning on leaving page]', () => {
-      const stub = cy.stub()
-      stub.returns(false)
-      cy.on('window:confirm', stub)
-
       cy.login(creatorEmail, creatorPassword)
       cy.get('[data-cy=loader]').should('not.exist')
       cy.step('Access the create-how-to')
@@ -348,22 +344,13 @@ describe('[How To]', () => {
         .clear()
         .type(expected.title)
         .blur({ force: true })
-      cy.get('[data-cy=page-link][href*="/how-to"]')
-        .click()
-        .then(() => {
-          expect(stub.callCount).to.equal(1)
-          stub.resetHistory()
-        })
+      cy.get('[data-cy=page-link][href*="/how-to"]').click()
+      cy.get('[data-cy="Confirm.modal: Cancel"]').click()
       cy.url().should('match', /\/how-to\/create$/)
 
       cy.step('Clear title input')
       cy.get('[data-cy=intro-title]').clear().blur({ force: true })
-      cy.get('[data-cy=page-link][href*="/how-to"]')
-        .click()
-        .then(() => {
-          expect(stub.callCount).to.equal(0)
-          stub.resetHistory()
-        })
+      cy.get('[data-cy=page-link][href*="/how-to"]').click()
       cy.url().should('match', /\/how-to?/)
     })
   })
diff --git a/packages/cypress/src/integration/research/write.spec.ts b/packages/cypress/src/integration/research/write.spec.ts
index c6906d8d3a..30a3273c38 100644
--- a/packages/cypress/src/integration/research/write.spec.ts
+++ b/packages/cypress/src/integration/research/write.spec.ts
@@ -84,7 +84,7 @@ describe('[Research]', () => {
         There is an issue with cypress that can not type some of the start string failing the test
         https://github.com/cypress-io/cypress/issues/3817 
       */
-      cy.wait(500)
+      cy.wait(1000)
       cy.get('[data-cy=intro-description]').type(expected.description).blur()
 
       cy.step('New collaborators can be assigned to research')
@@ -228,10 +228,6 @@ describe('[Research]', () => {
     })
 
     it('[Warning on leaving page]', () => {
-      const stub = cy.stub()
-      stub.returns(false)
-      cy.on('window:confirm', stub)
-
       cy.login(researcherEmail, researcherPassword)
       cy.step('Access the create research article')
       cy.get('[data-cy=loader]').should('not.exist')
@@ -241,22 +237,13 @@ describe('[Research]', () => {
         .clear()
         .type('Create research article test')
         .blur({ force: true })
-      cy.get('[data-cy=page-link][href*="/research"]')
-        .click()
-        .then(() => {
-          expect(stub.callCount).to.equal(1)
-          stub.resetHistory()
-        })
+      cy.get('[data-cy=page-link][href*="/research"]').click()
+      cy.get('[data-cy="Confirm.modal: Cancel"]').click()
+
       cy.url().should('match', /\/research\/create$/)
 
       cy.step('Clear title input')
       cy.get('[data-cy=intro-title').clear().blur({ force: true })
-      cy.get('[data-cy=page-link][href*="/research"]')
-        .click()
-        .then(() => {
-          expect(stub.callCount).to.equal(0)
-          stub.resetHistory()
-        })
       cy.url().should('match', /\/research?/)
     })
   })
diff --git a/packages/cypress/src/integration/settings.spec.ts b/packages/cypress/src/integration/settings.spec.ts
index e979b6b61a..6dd0063106 100644
--- a/packages/cypress/src/integration/settings.spec.ts
+++ b/packages/cypress/src/integration/settings.spec.ts
@@ -31,7 +31,7 @@ describe('[Settings]', () => {
   })
 
   describe('[Focus Member]', () => {
-    it('[Cancel edit profile and get confirmation]', (done) => {
+    it('[Cancel edit profile and get confirmation]', () => {
       cy.signUpNewUser()
 
       cy.step('Go to User Settings')
@@ -41,12 +41,7 @@ describe('[Settings]', () => {
 
       cy.step('Confirm shown when attempting to go to another page')
       cy.get('[data-cy=page-link]').contains('How-to').click()
-      cy.on('window:confirm', (text) => {
-        expect(text).to.eq(
-          'You are leaving this page without saving. Do you want to continue ?',
-        )
-        done()
-      })
+      cy.get('[data-cy="Confirm.modal: Modal"]').should('be.visible')
     })
 
     it('[Edit a new profile]', () => {
@@ -349,8 +344,8 @@ describe('[Settings]', () => {
       openTimes.forEach((openTime) => {
         cy.setSettingAddOpeningTime(openTime)
       })
-      cy.setSettingDeleteOpeningTime(0, false)
-      cy.setSettingDeleteOpeningTime(1, true)
+      cy.setSettingDeleteOpeningTime(1, false)
+      cy.setSettingDeleteOpeningTime(2, true)
 
       cy.get(`[data-cy=plastic-${plasticTypes[0]}]`).click()
       cy.get(`[data-cy=plastic-${plasticTypes[1]}]`).click()
@@ -374,7 +369,7 @@ describe('[Settings]', () => {
         `${openTimes[0].day}: ${openTimes[0].from} - ${openTimes[0].to}`,
       )
       cy.contains(
-        `${openTimes[2].day}: ${openTimes[2].from} - ${openTimes[2].to}`,
+        `${openTimes[1].day}: ${openTimes[1].from} - ${openTimes[1].to}`,
       )
       cy.contains(
         `${openTimes[3].day}: ${openTimes[3].from} - ${openTimes[3].to}`,
diff --git a/packages/cypress/src/support/commandsUi.ts b/packages/cypress/src/support/commandsUi.ts
index 8415752d81..b540f90599 100644
--- a/packages/cypress/src/support/commandsUi.ts
+++ b/packages/cypress/src/support/commandsUi.ts
@@ -244,11 +244,8 @@ Cypress.Commands.add(
   'selectTag',
   (tagName: string, selector = '[data-cy=tag-select]') => {
     cy.log('select tag', tagName)
-    cy.get(`${selector} input`)
-      .click({ force: true })
-      .type(tagName, { force: true })
-      .get(`${selector} .data-cy__menu-list`)
-      .contains(tagName)
-      .click()
+    cy.get(`${selector} input`).click({ force: true })
+    cy.get(`${selector} input`).type(tagName, { force: true })
+    cy.get(`${selector} .data-cy__menu-list`).contains(tagName).click()
   },
 )
diff --git a/src/common/Error/handlers/ChunkLoadError.tsx b/src/common/Error/handlers/ChunkLoadError.tsx
index bce4eddc32..5d6d819243 100644
--- a/src/common/Error/handlers/ChunkLoadError.tsx
+++ b/src/common/Error/handlers/ChunkLoadError.tsx
@@ -35,7 +35,9 @@ export const ChunkLoadErrorHandler = () => {
           <Text mb={4} sx={{ fontSize: 3 }}>
             The website got some updates
           </Text>
-          <Button onClick={() => attemptReload()}>Load the new site.</Button>
+          <Button type="button" onClick={() => attemptReload()}>
+            Load the new site.
+          </Button>
           <Text mt={4} sx={{ fontSize: 0.75 }}>
             If it doesn't work you might need to try another browser.
             <br></br>Or send us a{' '}
diff --git a/src/common/Form/FileInput/FileInput.tsx b/src/common/Form/FileInput/FileInput.tsx
index 42386e15b7..cfd4ece443 100644
--- a/src/common/Form/FileInput/FileInput.tsx
+++ b/src/common/Form/FileInput/FileInput.tsx
@@ -69,6 +69,7 @@ export const FileInput = (props: IProps) => {
       {showFileList ? (
         <>
           <Button
+            type="button"
             onClick={() => toggleModal()}
             icon="upload"
             variant="outline"
diff --git a/src/common/Form/ImageInput/DeleteImage.tsx b/src/common/Form/ImageInput/DeleteImage.tsx
index 57722b7693..692bf2b56d 100644
--- a/src/common/Form/ImageInput/DeleteImage.tsx
+++ b/src/common/Form/ImageInput/DeleteImage.tsx
@@ -47,6 +47,7 @@ export const DeleteImage = ({ onClick }: IProps) => {
         small
         variant="secondary"
         icon="delete"
+        type="button"
         onClick={(event) => onClick(event)}
       >
         Delete
diff --git a/src/common/Form/UnsavedChangesDialog.tsx b/src/common/Form/UnsavedChangesDialog.tsx
index ba19f5cdb2..7bda832668 100644
--- a/src/common/Form/UnsavedChangesDialog.tsx
+++ b/src/common/Form/UnsavedChangesDialog.tsx
@@ -1,50 +1,30 @@
-import { memo, useState } from 'react'
-import { FormSpy } from 'react-final-form'
-
-import { usePrompt } from '../hooks/usePrompt'
-
-interface IProps {
-  uploadComplete?: boolean
-  message?: string
-}
+import { useBlocker } from 'react-router'
+import { ConfirmModal } from 'oa-components'
 
 const CONFIRM_DIALOG_MSG =
   'You have unsaved changes. Are you sure you want to leave this page?'
 
-const beforeUnload = (e) => {
-  e.preventDefault()
-  e.returnValue = CONFIRM_DIALOG_MSG
-}
-
 /**
  * When places inside a react-final-form <Form> element watches for form pristine/dirty
  * change and handles router and window confirmation if form contains changes
  **/
-export const UnsavedChangesDialog = memo((props: IProps) => {
-  // Use memo to only re-render if props change
-  const [formIsDirty, setFormIsDirty] = useState(false)
-  const shouldPromptUnsavedChanges = formIsDirty && !props.uploadComplete
-  const message: string = props.message || CONFIRM_DIALOG_MSG
-  usePrompt(message, shouldPromptUnsavedChanges)
+type IProps = {
+  hasChanges: boolean
+}
 
-  // Handle confirmation outside React Router
-  if (shouldPromptUnsavedChanges) {
-    window.addEventListener('beforeunload', beforeUnload, false)
-  } else {
-    window.removeEventListener('beforeunload', beforeUnload, false)
-  }
+export const UnsavedChangesDialog = ({ hasChanges }: IProps) => {
+  const blocker = useBlocker(
+    ({ currentLocation, nextLocation }) =>
+      hasChanges && currentLocation.pathname !== nextLocation.pathname,
+  )
 
-  // Handle confirmaiton inside react route
   return (
-    <>
-      <FormSpy
-        subscription={{ dirty: true }}
-        onChange={(form) => {
-          setFormIsDirty(form.dirty)
-        }}
-        render={() => null}
-      />
-    </>
+    <ConfirmModal
+      isOpen={blocker.state === 'blocked'}
+      message={CONFIRM_DIALOG_MSG}
+      confirmButtonText="Yes"
+      handleCancel={() => blocker.reset && blocker.reset()}
+      handleConfirm={() => blocker.proceed && blocker.proceed()}
+    />
   )
-})
-UnsavedChangesDialog.displayName = 'UnsavedChangesDialog'
+}
diff --git a/src/common/HideDiscussionContainer.tsx b/src/common/HideDiscussionContainer.tsx
index 5a2151af80..655a6c77ef 100644
--- a/src/common/HideDiscussionContainer.tsx
+++ b/src/common/HideDiscussionContainer.tsx
@@ -44,6 +44,7 @@ export const HideDiscussionContainer = ({
       }}
     >
       <Button
+        type="button"
         variant="subtle"
         sx={{
           fontSize: '14px',
diff --git a/src/common/hooks/usePrompt.ts b/src/common/hooks/usePrompt.ts
deleted file mode 100644
index f025940550..0000000000
--- a/src/common/hooks/usePrompt.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { useCallback, useContext, useEffect } from 'react'
-import { UNSAFE_NavigationContext as NavigationContext } from 'react-router-dom'
-
-const useConfirm = (confirmExit: () => boolean, when: boolean) => {
-  const { navigator } = useContext(NavigationContext)
-
-  useEffect(() => {
-    if (!when) {
-      return
-    }
-
-    const push = navigator.push
-
-    navigator.push = (...args: Parameters<typeof push>) => {
-      const result = confirmExit()
-      if (result !== false) {
-        push(...args)
-      }
-    }
-
-    return () => {
-      navigator.push = push
-    }
-  }, [navigator, confirmExit, when])
-}
-
-export const usePrompt = (message: string, when = true) => {
-  useEffect(() => {
-    if (when) {
-      window.onbeforeunload = () => {
-        return message
-      }
-    } else {
-      window.onbeforeunload = null
-    }
-
-    return () => {
-      window.onbeforeunload = null
-    }
-  }, [message, when])
-
-  const confirmExit = useCallback(() => {
-    // eslint-disable-next-line no-alert
-    return window.confirm(message)
-  }, [message])
-
-  useConfirm(confirmExit, when)
-}
diff --git a/src/pages/Howto/Content/Common/Howto.form.tsx b/src/pages/Howto/Content/Common/Howto.form.tsx
index 4230807f56..eb450cd627 100644
--- a/src/pages/Howto/Content/Common/Howto.form.tsx
+++ b/src/pages/Howto/Content/Common/Howto.form.tsx
@@ -122,9 +122,7 @@ export const HowtoForm = observer((props: IProps) => {
         />
       )}
       <Form
-        onSubmit={(formValues, form) => {
-          onSubmit(formValues, form)
-        }}
+        onSubmit={async (formValues, form) => await onSubmit(formValues, form)}
         initialValues={formValues}
         mutators={{
           setAllowDraftSaveTrue,
@@ -134,19 +132,19 @@ export const HowtoForm = observer((props: IProps) => {
         validateOnBlur
         decorators={[calculatedFields]}
         render={({
+          dirty,
           errors,
           form,
           handleSubmit,
           hasValidationErrors,
           submitFailed,
+          submitSucceeded,
           submitting,
           values,
         }) => {
           return (
-            <Flex mx={-2} bg={'inherit'} sx={{ flexWrap: 'wrap' }}>
-              <UnsavedChangesDialog
-                uploadComplete={howtoStore.uploadStatus.Complete}
-              />
+            <Flex mx={-2} bg="inherit" sx={{ flexWrap: 'wrap' }}>
+              <UnsavedChangesDialog hasChanges={dirty && !submitSucceeded} />
 
               <Flex
                 bg="inherit"
diff --git a/src/pages/Howto/Content/Common/HowtoButtonPublish.tsx b/src/pages/Howto/Content/Common/HowtoButtonPublish.tsx
index efa2c748fe..e56a3faff0 100644
--- a/src/pages/Howto/Content/Common/HowtoButtonPublish.tsx
+++ b/src/pages/Howto/Content/Common/HowtoButtonPublish.tsx
@@ -8,7 +8,7 @@ export const HowtoButtonPublish = (props) => {
   return (
     <Button
       large
-      data-cy={'submit'}
+      data-cy="submit"
       data-testid="submit-form"
       onClick={() => form.mutators.setAllowDraftSaveFalse()}
       mt={3}
diff --git a/src/pages/Howto/Content/Common/HowtoFieldFiles.tsx b/src/pages/Howto/Content/Common/HowtoFieldFiles.tsx
index f500305dcb..5379a59e5d 100644
--- a/src/pages/Howto/Content/Common/HowtoFieldFiles.tsx
+++ b/src/pages/Howto/Content/Common/HowtoFieldFiles.tsx
@@ -50,6 +50,7 @@ const DeleteButton = ({ onClick }) => {
       data-testid="re-upload-files"
       variant={'outline'}
       icon="delete"
+      type="button"
       onClick={() => onClick()}
     >
       {buttons.files}
diff --git a/src/pages/Howto/Content/Common/HowtoFieldStep.tsx b/src/pages/Howto/Content/Common/HowtoFieldStep.tsx
index eb75aa8f5b..a1acf5e2d9 100644
--- a/src/pages/Howto/Content/Common/HowtoFieldStep.tsx
+++ b/src/pages/Howto/Content/Common/HowtoFieldStep.tsx
@@ -112,6 +112,7 @@ export const HowtoFieldStep = (props: IProps) => {
               icon="arrow-full-up"
               showIconOnly={true}
               sx={{ mx: '5px' }}
+              type="button"
               onClick={() => props.moveStep(index, index - 1)}
             />
           )}
@@ -122,6 +123,7 @@ export const HowtoFieldStep = (props: IProps) => {
             icon="arrow-full-down"
             sx={{ mx: '5px' }}
             showIconOnly={true}
+            type="button"
             onClick={() => props.moveStep(index, index + 1)}
           />
           {isAboveMinimumStep && (
@@ -131,6 +133,7 @@ export const HowtoFieldStep = (props: IProps) => {
               variant={'outline'}
               showIconOnly={true}
               icon="delete"
+              type="button"
               onClick={() => toggleDeleteModal()}
             />
           )}
@@ -150,8 +153,9 @@ export const HowtoFieldStep = (props: IProps) => {
                 <Button
                   data-cy="confirm"
                   data-testid="confirm"
-                  variant={'outline'}
+                  variant="outline"
                   onClick={() => confirmDelete()}
+                  type="button"
                 >
                   {deleteButton.title}
                 </Button>
diff --git a/src/pages/Howto/Content/Common/HowtoFieldStepsContainer.tsx b/src/pages/Howto/Content/Common/HowtoFieldStepsContainer.tsx
index e90cd66861..5eef1fdf8e 100644
--- a/src/pages/Howto/Content/Common/HowtoFieldStepsContainer.tsx
+++ b/src/pages/Howto/Content/Common/HowtoFieldStepsContainer.tsx
@@ -78,8 +78,9 @@ export const HowtoFieldStepsContainer = () => {
           </AnimatePresence>
           <Flex>
             <Button
-              icon={'add'}
-              data-cy={'add-step'}
+              type="button"
+              icon="add"
+              data-cy="add-step"
               mx="auto"
               mt={[10, 10, 20]}
               mb={[5, 5, 20]}
diff --git a/src/pages/Howto/Content/Common/SubmitStatus.tsx b/src/pages/Howto/Content/Common/SubmitStatus.tsx
index df17d9efb8..81c4a20b7c 100644
--- a/src/pages/Howto/Content/Common/SubmitStatus.tsx
+++ b/src/pages/Howto/Content/Common/SubmitStatus.tsx
@@ -40,6 +40,7 @@ const HowToSubmitStatus = observer((props: IProps) => {
         ))}
       </Box>
       <Button
+        type="button"
         data-cy={uploadStatus.Complete ? 'view-howto' : ''}
         disabled={!uploadStatus.Complete}
         variant={!uploadStatus.Complete ? 'disabled' : 'outline'}
diff --git a/src/pages/Howto/Content/Howto/Howto.tsx b/src/pages/Howto/Content/Howto/Howto.tsx
index 4c16cdf5eb..43d73ef911 100644
--- a/src/pages/Howto/Content/Howto/Howto.tsx
+++ b/src/pages/Howto/Content/Howto/Howto.tsx
@@ -120,6 +120,7 @@ export const Howto = observer(() => {
           }}
         >
           <Button
+            type="button"
             sx={{ fontSize: 2 }}
             onClick={() => {
               trackEvent({
diff --git a/src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx b/src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx
index 92ccf0e287..6f860e49b8 100644
--- a/src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx
+++ b/src/pages/Howto/Content/Howto/HowtoDescription/HowtoDescription.tsx
@@ -123,7 +123,7 @@ const HowtoDescription = ({ howto, loggedInUser, ...props }: IProps) => {
             {/* Check if logged in user is the creator of the how-to OR a super-admin */}
             {loggedInUser && isAllowedToEditContent(howto, loggedInUser) && (
               <Link to={'/how-to/' + howto.slug + '/edit'}>
-                <Button variant={'primary'} data-cy={'edit'}>
+                <Button type="button" variant="primary" data-cy="edit">
                   Edit
                 </Button>
               </Link>
@@ -132,6 +132,7 @@ const HowtoDescription = ({ howto, loggedInUser, ...props }: IProps) => {
             {loggedInUser && isAllowedToDeleteContent(howto, loggedInUser) && (
               <Fragment key={'how-to-delete-action'}>
                 <Button
+                  type="button"
                   data-cy="How-To: delete button"
                   variant={'secondary'}
                   icon="delete"
diff --git a/src/pages/Howto/Content/HowtoList/HowtoList.tsx b/src/pages/Howto/Content/HowtoList/HowtoList.tsx
index 8f97b9adf6..28efe0361f 100644
--- a/src/pages/Howto/Content/HowtoList/HowtoList.tsx
+++ b/src/pages/Howto/Content/HowtoList/HowtoList.tsx
@@ -131,8 +131,9 @@ export const HowtoList = observer(() => {
           <Link to={userStore!.user ? '/how-to/create' : '/sign-up'}>
             <Box sx={{ width: '100%', display: 'block' }} mb={[3, 3, 0]}>
               <Button
+                type="button"
                 sx={{ width: '100%' }}
-                variant={'primary'}
+                variant="primary"
                 data-cy="create"
               >
                 {listing.create}
@@ -169,7 +170,7 @@ export const HowtoList = observer(() => {
             justifyContent: 'center',
           }}
         >
-          <Button onClick={() => fetchHowtos(lastVisible)}>
+          <Button type="button" onClick={() => fetchHowtos(lastVisible)}>
             {listing.loadMore}
           </Button>
         </Flex>
diff --git a/src/pages/Maps/Content/Controls/Controls.tsx b/src/pages/Maps/Content/Controls/Controls.tsx
index 7b65a7f2b7..8defe174f6 100644
--- a/src/pages/Maps/Content/Controls/Controls.tsx
+++ b/src/pages/Maps/Content/Controls/Controls.tsx
@@ -114,12 +114,15 @@ export const Controls = ({
             // the map underneath also redirects, so prevent it from doing so
             onClick={(e) => e.stopPropagation()}
           >
-            <Button variant={'primary'}>My pin</Button>
+            <Button type="button" variant="primary">
+              My pin
+            </Button>
           </Link>
         </Box>
       </Flex>
       <Box sx={{ display: ['flex', 'flex', 'none'], mt: '5px', width: '95%' }}>
         <Button
+          type="button"
           sx={{ display: 'block', width: '100%' }}
           variant="secondary"
           onClick={toggleFilterMobileModal}
diff --git a/src/pages/Maps/Content/Controls/GroupingFilterMobile.tsx b/src/pages/Maps/Content/Controls/GroupingFilterMobile.tsx
index 56982319be..4b1642912a 100644
--- a/src/pages/Maps/Content/Controls/GroupingFilterMobile.tsx
+++ b/src/pages/Maps/Content/Controls/GroupingFilterMobile.tsx
@@ -84,7 +84,7 @@ const GroupingFilterMobile = (props: IProps) => {
         )
       })}
 
-      <Button mt={3} onClick={props.onClose}>
+      <Button type="button" mt={3} onClick={props.onClose}>
         Apply filters
       </Button>
     </Flex>
diff --git a/src/pages/Question/Content/Common/QuestionForm.tsx b/src/pages/Question/Content/Common/QuestionForm.tsx
index 075c171c0b..23714219b8 100644
--- a/src/pages/Question/Content/Common/QuestionForm.tsx
+++ b/src/pages/Question/Content/Common/QuestionForm.tsx
@@ -127,7 +127,7 @@ export const QuestionForm = (props: IProps) => {
                 </Box>
                 <Button
                   large
-                  data-cy={'submit'}
+                  data-cy="submit"
                   mt={3}
                   variant="primary"
                   type="submit"
diff --git a/src/pages/Question/QuestionListing.tsx b/src/pages/Question/QuestionListing.tsx
index a5451a6d40..532a875e42 100644
--- a/src/pages/Question/QuestionListing.tsx
+++ b/src/pages/Question/QuestionListing.tsx
@@ -111,7 +111,7 @@ export const QuestionListing = () => {
 
         <Flex sx={{ gap: 2 }}>
           <Link to={userStore.user ? '/questions/create' : '/sign-up'}>
-            <Button data-cy="create" variant="primary">
+            <Button type="button" data-cy="create" variant="primary">
               {listing.create}
             </Button>
           </Link>
@@ -140,7 +140,7 @@ export const QuestionListing = () => {
             justifyContent: 'center',
           }}
         >
-          <Button onClick={() => fetchQuestions(lastVisible)}>
+          <Button type="button" onClick={() => fetchQuestions(lastVisible)}>
             {listing.loadMore}
           </Button>
         </Flex>
diff --git a/src/pages/Question/QuestionPage.tsx b/src/pages/Question/QuestionPage.tsx
index 324640c6be..68e2a32f26 100644
--- a/src/pages/Question/QuestionPage.tsx
+++ b/src/pages/Question/QuestionPage.tsx
@@ -114,7 +114,7 @@ export const QuestionPage = () => {
                 />
                 {store.userCanEditQuestion && (
                   <Link to={'/questions/' + question.slug + '/edit'}>
-                    <Button variant={'primary'} data-cy="edit">
+                    <Button type="button" variant="primary" data-cy="edit">
                       Edit
                     </Button>
                   </Link>
diff --git a/src/pages/Research/Content/Common/Research.form.tsx b/src/pages/Research/Content/Common/Research.form.tsx
index f09ff09ee2..0fb976109f 100644
--- a/src/pages/Research/Content/Common/Research.form.tsx
+++ b/src/pages/Research/Content/Common/Research.form.tsx
@@ -13,7 +13,7 @@ import { IModerationStatus } from 'oa-shared'
 import IconHeaderHowto from 'src/assets/images/header-section/howto-header-icon.svg'
 import { SelectField } from 'src/common/Form/Select.field'
 import { TagsSelectField } from 'src/common/Form/TagsSelect.field'
-import { usePrompt } from 'src/common/hooks/usePrompt'
+import { UnsavedChangesDialog } from 'src/common/Form/UnsavedChangesDialog'
 import { researchStatusOptions } from 'src/models/research.models'
 import {
   ResearchErrors,
@@ -45,13 +45,6 @@ import ResearchFieldCategory from './ResearchCategorySelect'
 import type { MainFormAction } from 'src/common/Form/types'
 import type { IResearch } from 'src/models/research.models'
 
-const CONFIRM_DIALOG_MSG =
-  'You have unsaved changes. Are you sure you want to leave this page?'
-interface IState {
-  formSaved: boolean
-  dirty: boolean
-  showSubmitModal?: boolean
-}
 interface IProps {
   'data-testid'?: string
   formValues: any
@@ -64,11 +57,6 @@ const ResearchFormLabel = ({ children, ...props }) => (
   </Label>
 )
 
-const beforeUnload = (e) => {
-  e.preventDefault()
-  e.returnValue = CONFIRM_DIALOG_MSG
-}
-
 const ResearchForm = observer((props: IProps) => {
   const { formValues, parentType } = props
   const { create, update } = buttons.draft
@@ -85,11 +73,7 @@ const ResearchForm = observer((props: IProps) => {
   } = overview
 
   const store = useResearchStore()
-  const [state, setState] = React.useState<IState>({
-    formSaved: false,
-    dirty: false,
-    showSubmitModal: false,
-  })
+  const [showSubmitModal, setShowSubmitModal] = React.useState(false)
   const [submissionHandler, setSubmissionHandler] = React.useState({
     draft: formValues.moderation === IModerationStatus.DRAFT,
     shouldSubmit: false,
@@ -104,12 +88,6 @@ const ResearchForm = observer((props: IProps) => {
     }
   }, [store.activeUser])
 
-  React.useEffect(() => {
-    if (store.researchUploadStatus.Complete) {
-      window.removeEventListener('beforeunload', beforeUnload, false)
-    }
-  }, [store.researchUploadStatus.Complete])
-
   React.useEffect(() => {
     if (submissionHandler.shouldSubmit) {
       const form = document.getElementById('researchForm')
@@ -117,7 +95,7 @@ const ResearchForm = observer((props: IProps) => {
         form.dispatchEvent(
           new Event('submit', { cancelable: true, bubbles: true }),
         )
-        setState((prevState) => ({ ...prevState, showSubmitModal: true }))
+        setShowSubmitModal(true)
       }
     }
   }, [submissionHandler])
@@ -129,46 +107,23 @@ const ResearchForm = observer((props: IProps) => {
     await store.uploadResearch(formValues)
   }
 
-  // Display a confirmation dialog when leaving the page outside the React Router
-  const unloadDecorator = (form) => {
-    return form.subscribe(
-      ({ dirty }) => {
-        if (dirty && !store.researchUploadStatus.Complete) {
-          window.addEventListener('beforeunload', beforeUnload, false)
-          return
-        }
-        window.removeEventListener('beforeunload', beforeUnload, false)
-      },
-      { dirty: true },
-    )
-  }
-
-  // Block navigating elsewhere when data has been entered into the input
-  usePrompt(
-    CONFIRM_DIALOG_MSG,
-    !store.updateUploadStatus.Complete && state.dirty,
-  )
-
   const draftButtonText =
     formValues.moderation !== IModerationStatus.DRAFT ? create : update
   const pageTitle = headings.overview[parentType]
 
   return (
     <div data-testid={props['data-testid']}>
-      {state.showSubmitModal && (
+      {showSubmitModal && (
         <ResearchSubmitStatus
-          {...props}
           onClose={() => {
-            setState((prevState) => ({ ...prevState, showSubmitModal: false }))
+            setShowSubmitModal(false)
             store.resetResearchUploadStatus()
           }}
         />
       )}
 
       <Form
-        onSubmit={(v) => {
-          onSubmit(v as IResearch.FormInput)
-        }}
+        onSubmit={async (v) => await onSubmit(v as IResearch.FormInput)}
         initialValues={formValues}
         mutators={{
           setAllowDraftSaveFalse,
@@ -176,7 +131,6 @@ const ResearchForm = observer((props: IProps) => {
           ...arrayMutators,
         }}
         validateOnBlur
-        decorators={[unloadDecorator]}
         render={({
           dirty,
           errors,
@@ -185,13 +139,12 @@ const ResearchForm = observer((props: IProps) => {
           hasValidationErrors,
           submitting,
           submitFailed,
+          submitSucceeded,
         }) => {
-          if (state.dirty !== dirty) {
-            setState((prev) => ({ ...prev, dirty }))
-          }
-
           return (
-            <Flex mx={-2} bg={'inherit'} sx={{ flexWrap: 'wrap' }}>
+            <Flex mx={-2} bg="inherit" sx={{ flexWrap: 'wrap' }}>
+              <UnsavedChangesDialog hasChanges={dirty && !submitSucceeded} />
+
               <Flex
                 bg="inherit"
                 px={2}
@@ -360,7 +313,7 @@ const ResearchForm = observer((props: IProps) => {
                   </Box>
 
                   <Button
-                    data-cy={'draft'}
+                    data-cy="draft"
                     onClick={() => {
                       form.mutators.setAllowDraftSaveTrue()
                       setSubmissionHandler({ shouldSubmit: true, draft: true })
@@ -376,7 +329,7 @@ const ResearchForm = observer((props: IProps) => {
 
                   <Button
                     large
-                    data-cy={'submit'}
+                    data-cy="submit"
                     onClick={() => {
                       form.mutators.setAllowDraftSaveFalse()
                       setSubmissionHandler({
diff --git a/src/pages/Research/Content/Common/ResearchUpdate.form.tsx b/src/pages/Research/Content/Common/ResearchUpdate.form.tsx
index cadf9be20a..4b9a107ec1 100644
--- a/src/pages/Research/Content/Common/ResearchUpdate.form.tsx
+++ b/src/pages/Research/Content/Common/ResearchUpdate.form.tsx
@@ -11,7 +11,7 @@ import {
 } from 'oa-components'
 import { IModerationStatus, ResearchUpdateStatus } from 'oa-shared'
 import IconHeaderHowto from 'src/assets/images/header-section/howto-header-icon.svg'
-import { usePrompt } from 'src/common/hooks/usePrompt'
+import { UnsavedChangesDialog } from 'src/common/Form/UnsavedChangesDialog'
 import { useResearchStore } from 'src/stores/Research/research.store'
 import {
   setAllowDraftSaveFalse,
@@ -92,13 +92,20 @@ export const ResearchUpdateForm = observer((props: IProps) => {
     }, 0)
   }
 
-  const onSubmit = (formValues: IResearch.Update) => {
+  const onSubmit = async (formValues: IResearch.Update) => {
     setShowSubmitModal(true)
-    if (formValues.fileLink && formValues.files && formValues.files.length > 0)
+
+    if (
+      formValues.fileLink &&
+      formValues.files &&
+      formValues.files.length > 0
+    ) {
       return setInvalidFileWarning(true)
-    else setInvalidFileWarning(false)
+    }
+
+    setInvalidFileWarning(false)
 
-    store.uploadUpdate({
+    await store.uploadUpdate({
       ...formValues,
       collaborators: Array.from(
         new Set(
@@ -139,12 +146,6 @@ export const ResearchUpdateForm = observer((props: IProps) => {
     [store.updateUploadStatus.Complete, beforeUnload],
   )
 
-  // Block navigating elsewhere when data has been entered into the input
-  usePrompt(
-    CONFIRM_DIALOG_MSG,
-    !store.updateUploadStatus.Complete && formState.dirty,
-  )
-
   const draftButtonText =
     formValues.moderation !== IModerationStatus.DRAFT
       ? draft.create
@@ -165,9 +166,7 @@ export const ResearchUpdateForm = observer((props: IProps) => {
         />
       )}
       <Form
-        onSubmit={(v) => {
-          onSubmit(v as IResearch.Update)
-        }}
+        onSubmit={async (v) => await onSubmit(v as IResearch.Update)}
         initialValues={formValues}
         mutators={{
           setAllowDraftSaveFalse,
@@ -181,6 +180,7 @@ export const ResearchUpdateForm = observer((props: IProps) => {
           handleSubmit,
           hasValidationErrors,
           errors,
+          submitSucceeded,
           submitting,
           submitFailed,
           values,
@@ -197,6 +197,7 @@ export const ResearchUpdateForm = observer((props: IProps) => {
               sx={{ flexWrap: 'wrap' }}
               data-testid="EditResearchUpdate"
             >
+              <UnsavedChangesDialog hasChanges={dirty && !submitSucceeded} />
               <Flex
                 bg="inherit"
                 px={2}
@@ -265,7 +266,7 @@ export const ResearchUpdateForm = observer((props: IProps) => {
                   }}
                 >
                   <Button
-                    data-cy={'draft'}
+                    data-cy="draft"
                     onClick={() => {
                       trySubmitForm(true)
                     }}
@@ -278,7 +279,7 @@ export const ResearchUpdateForm = observer((props: IProps) => {
                   </Button>
                   {isEdit ? (
                     <Button
-                      data-cy={'delete'}
+                      data-cy="delete"
                       onClick={(evt) => {
                         setShowDeleteModal(true)
                         evt.preventDefault()
@@ -295,7 +296,7 @@ export const ResearchUpdateForm = observer((props: IProps) => {
                     large
                     id="submit-form"
                     data-testid="submit-form"
-                    data-cy={'submit'}
+                    data-cy="submit"
                     onClick={(evt) => {
                       trySubmitForm(false)
                       evt.preventDefault()
diff --git a/src/pages/Research/Content/Common/SubmitStatus.tsx b/src/pages/Research/Content/Common/SubmitStatus.tsx
index d441de4ebe..57185467ab 100644
--- a/src/pages/Research/Content/Common/SubmitStatus.tsx
+++ b/src/pages/Research/Content/Common/SubmitStatus.tsx
@@ -19,7 +19,7 @@ export const ResearchSubmitStatus = observer((props: IProps) => {
           Uploading Research
         </Heading>
         <Icon
-          glyph={'close'}
+          glyph="close"
           onClick={() => {
             props.onClose()
           }}
@@ -38,6 +38,7 @@ export const ResearchSubmitStatus = observer((props: IProps) => {
       </Box>
       {store.activeResearchItem && store.activeResearchItem?.slug ? (
         <Button
+          type="button"
           data-cy={store.researchUploadStatus.Complete ? 'view-research' : ''}
           disabled={!store.researchUploadStatus.Complete}
           variant={
@@ -86,6 +87,7 @@ export const UpdateSubmitStatus = observer((props: IProps) => {
         ))}
       </Box>
       <Button
+        type="button"
         data-cy={uploadStatus.Complete ? 'view-research' : ''}
         disabled={!uploadStatus.Complete}
         variant={!uploadStatus.Complete ? 'disabled' : 'outline'}
diff --git a/src/pages/Research/Content/CreateResearch/Form/FilesFields.tsx b/src/pages/Research/Content/CreateResearch/Form/FilesFields.tsx
index 8f78c90f04..a76737fbcc 100644
--- a/src/pages/Research/Content/CreateResearch/Form/FilesFields.tsx
+++ b/src/pages/Research/Content/CreateResearch/Form/FilesFields.tsx
@@ -39,7 +39,12 @@ const AlreadyAddedFiles = ({ formValues, setFileEditMode }) => {
       {formValues.files.map((file) => (
         <DownloadStaticFile allowDownload file={file} key={file.name} />
       ))}
-      <Button variant={'outline'} icon="delete" onClick={deleteFile}>
+      <Button
+        type="button"
+        variant="outline"
+        icon="delete"
+        onClick={deleteFile}
+      >
         {buttons.files}
       </Button>
     </Flex>
diff --git a/src/pages/Research/Content/ResearchArticle.tsx b/src/pages/Research/Content/ResearchArticle.tsx
index 284237aa2e..ca396d4ea9 100644
--- a/src/pages/Research/Content/ResearchArticle.tsx
+++ b/src/pages/Research/Content/ResearchArticle.tsx
@@ -275,6 +275,7 @@ const ResearchArticle = observer(() => {
         <Flex my={4}>
           <Link to={`/research/${item.slug}/new-update`}>
             <Button
+              type="button"
               large
               ml={2}
               mb={[3, 3, 0]}
diff --git a/src/pages/Research/Content/ResearchDescription.tsx b/src/pages/Research/Content/ResearchDescription.tsx
index 072641a0cd..b1a57558f3 100644
--- a/src/pages/Research/Content/ResearchDescription.tsx
+++ b/src/pages/Research/Content/ResearchDescription.tsx
@@ -136,15 +136,17 @@ const ResearchDescription = ({
                   IModerationStatus.AWAITING_MODERATION && (
                   <Flex sx={{ justifyContent: 'space-between' }}>
                     <Button
-                      data-cy={'accept'}
-                      variant={'primary'}
+                      type="button"
+                      data-cy="accept"
+                      variant="primary"
                       icon="check"
                       mr={1}
                       onClick={() => props.moderateResearch(true)}
                     />
                     <Button
+                      type="button"
                       data-cy="reject-research"
-                      variant={'outline'}
+                      variant="outline"
                       icon="delete"
                       onClick={() => props.moderateResearch(false)}
                     />
@@ -153,7 +155,7 @@ const ResearchDescription = ({
               {/* Show edit button for the creator of the research OR a super-admin */}
               {isEditable && (
                 <Link to={'/research/' + research.slug + '/edit'}>
-                  <Button variant={'primary'} data-cy={'edit'}>
+                  <Button type="button" variant="primary" data-cy="edit">
                     Edit
                   </Button>
                 </Link>
@@ -162,8 +164,9 @@ const ResearchDescription = ({
               {isDeletable && (
                 <Fragment>
                   <Button
+                    type="button"
                     data-cy="Research: delete button"
-                    variant={'secondary'}
+                    variant="secondary"
                     icon="delete"
                     disabled={research._deleted}
                     onClick={() => setShowDeleteModal(true)}
diff --git a/src/pages/Research/Content/ResearchList.tsx b/src/pages/Research/Content/ResearchList.tsx
index f41875c581..cec8e60fb2 100644
--- a/src/pages/Research/Content/ResearchList.tsx
+++ b/src/pages/Research/Content/ResearchList.tsx
@@ -134,7 +134,7 @@ const ResearchList = observer(() => {
                 />
               )}
               <Link to={userStore.activeUser ? '/research/create' : '/sign-up'}>
-                <Button variant="primary" data-cy="create">
+                <Button type="button" variant="primary" data-cy="create">
                   {listing.create}
                 </Button>
               </Link>
@@ -147,7 +147,7 @@ const ResearchList = observer(() => {
                 handleShowDrafts={handleShowDrafts}
               />
               <Link to="/research/create">
-                <Button variant="primary" data-cy="create">
+                <Button type="button" variant="primary" data-cy="create">
                   {listing.create}
                 </Button>
               </Link>
@@ -185,7 +185,10 @@ const ResearchList = observer(() => {
                   justifyContent: 'center',
                 }}
               >
-                <Button onClick={() => fetchResearchItems(lastVisible)}>
+                <Button
+                  type="button"
+                  onClick={() => fetchResearchItems(lastVisible)}
+                >
                   {listing.loadMore}
                 </Button>
               </Flex>
diff --git a/src/pages/Research/Content/ResearchUpdate.tsx b/src/pages/Research/Content/ResearchUpdate.tsx
index e902b4441f..c76d0a0e90 100644
--- a/src/pages/Research/Content/ResearchUpdate.tsx
+++ b/src/pages/Research/Content/ResearchUpdate.tsx
@@ -138,8 +138,9 @@ const ResearchUpdate = ({
                       to={'/research/' + slug + '/edit-update/' + update._id}
                     >
                       <Button
-                        variant={'primary'}
-                        data-cy={'edit-update'}
+                        type="button"
+                        variant="primary"
+                        data-cy="edit-update"
                         ml="auto"
                         mt={[0, 2, 2]}
                       >
diff --git a/src/pages/SignUp/SignUp.tsx b/src/pages/SignUp/SignUp.tsx
index 2c746f1ded..42bb8563e4 100644
--- a/src/pages/SignUp/SignUp.tsx
+++ b/src/pages/SignUp/SignUp.tsx
@@ -266,7 +266,7 @@ const SignUpPage = observer(() => {
                           justifyContent: 'center',
                         }}
                         data-cy="submit"
-                        variant={'primary'}
+                        variant="primary"
                         disabled={disabled}
                         type="submit"
                       >
diff --git a/src/pages/SignUp/SignUpMessage.tsx b/src/pages/SignUp/SignUpMessage.tsx
index aed3fb80c0..9f2561d801 100644
--- a/src/pages/SignUp/SignUpMessage.tsx
+++ b/src/pages/SignUp/SignUpMessage.tsx
@@ -24,8 +24,13 @@ const SignUpMessagePage = () => (
             We've sent you an email. Please find a confirmation link in your
             mailbox.
           </Text>
-          <Link to={'/settings'}>
-            <Button variant="primary" data-cy="home" sx={{ borderRadius: 3 }}>
+          <Link to="/settings">
+            <Button
+              type="button"
+              variant="primary"
+              data-cy="home"
+              sx={{ borderRadius: 3 }}
+            >
               Complete your profile
             </Button>
           </Link>
diff --git a/src/pages/User/contact/UserContactNotLoggedIn.tsx b/src/pages/User/contact/UserContactNotLoggedIn.tsx
index fb440c8802..ad76d47ba6 100644
--- a/src/pages/User/contact/UserContactNotLoggedIn.tsx
+++ b/src/pages/User/contact/UserContactNotLoggedIn.tsx
@@ -27,7 +27,9 @@ export const UserContactNotLoggedIn = ({ displayName }: Props) => {
             Login
           </Link>
           <Link to="/sign-up">
-            <Button icon="star">Sign-up now</Button>
+            <Button type="button" icon="star">
+              Sign-up now
+            </Button>
           </Link>
         </Flex>
       </Flex>
diff --git a/src/pages/User/impact/ImpactMissing.tsx b/src/pages/User/impact/ImpactMissing.tsx
index dfcce0ea5d..2defb1f33a 100644
--- a/src/pages/User/impact/ImpactMissing.tsx
+++ b/src/pages/User/impact/ImpactMissing.tsx
@@ -55,13 +55,13 @@ export const ImpactMissing = observer((props: Props) => {
         <>
           <Text>{reportYearLabel}</Text>
           <ExternalLink href={IMPACT_REPORT_LINKS[year]}>
-            <Button>{button}</Button>
+            <Button type="button">{button}</Button>
           </ExternalLink>
         </>
       )}
       {isPageOwner && (
         <a href={`/settings#impact_${year}`}>
-          <Button>{labelSet.owner.link}</Button>
+          <Button type="button">{labelSet.owner.link}</Button>
         </a>
       )}
     </Flex>
diff --git a/src/pages/UserSettings/content/formSections/ChangeEmail.form.tsx b/src/pages/UserSettings/content/formSections/ChangeEmail.form.tsx
index 351dc535c0..ebd8b4e5a1 100644
--- a/src/pages/UserSettings/content/formSections/ChangeEmail.form.tsx
+++ b/src/pages/UserSettings/content/formSections/ChangeEmail.form.tsx
@@ -126,6 +126,7 @@ export const ChangeEmailForm = () => {
       )}
 
       <Button
+        type="button"
         data-cy="changeEmailButton"
         onClick={() => setIsExpanded(!isExpanded)}
         variant="secondary"
diff --git a/src/pages/UserSettings/content/formSections/ChangePassword.form.tsx b/src/pages/UserSettings/content/formSections/ChangePassword.form.tsx
index 62f8264085..d1ea638a7f 100644
--- a/src/pages/UserSettings/content/formSections/ChangePassword.form.tsx
+++ b/src/pages/UserSettings/content/formSections/ChangePassword.form.tsx
@@ -130,6 +130,7 @@ export const ChangePasswordForm = () => {
       )}
 
       <Button
+        type="button"
         data-cy="changePasswordButton"
         onClick={() => setIsExpanded(!isExpanded)}
         variant="secondary"
diff --git a/src/pages/UserSettings/content/formSections/Collection.section.tsx b/src/pages/UserSettings/content/formSections/Collection.section.tsx
index 8debf7ab75..78508da12d 100644
--- a/src/pages/UserSettings/content/formSections/Collection.section.tsx
+++ b/src/pages/UserSettings/content/formSections/Collection.section.tsx
@@ -54,6 +54,7 @@ export const CollectionSection = (props: IProps) => {
                 />
               ))}
               <Button
+                type="button"
                 data-cy="add-opening-time"
                 my={2}
                 variant="outline"
diff --git a/src/pages/UserSettings/content/formSections/Fields/OpeningHoursPicker.field.tsx b/src/pages/UserSettings/content/formSections/Fields/OpeningHoursPicker.field.tsx
index 46dfb7a9cd..e7b6051597 100644
--- a/src/pages/UserSettings/content/formSections/Fields/OpeningHoursPicker.field.tsx
+++ b/src/pages/UserSettings/content/formSections/Fields/OpeningHoursPicker.field.tsx
@@ -181,12 +181,15 @@ export const OpeningHoursPicker = (props: IProps) => {
           placeholder="Select day"
           style={{ marginBottom: 0 }}
         />
-        <Button
-          icon={'delete'}
-          variant={'outline'}
-          sx={{ height: '40px', display: ['block', 'block', 'none'] }}
-          onClick={() => toggleDeleteModal()}
-        />
+        {index > 0 && (
+          <Button
+            type="button"
+            icon="delete"
+            variant="outline"
+            sx={{ height: '40px', display: ['block', 'block', 'none'] }}
+            onClick={() => toggleDeleteModal()}
+          />
+        )}
       </Flex>
       <Flex sx={{ gap: '8px' }}>
         <Field
@@ -212,16 +215,19 @@ export const OpeningHoursPicker = (props: IProps) => {
           style={{ marginBottom: 0 }}
         />
       </Flex>
-      <Button
-        icon={'delete'}
-        variant={'outline'}
-        data-cy={`delete-opening-time-${index}-desk`}
-        sx={{ height: '40px', display: ['none', 'none', 'block'] }}
-        showIconOnly={true}
-        onClick={() => toggleDeleteModal()}
-      >
-        Delete
-      </Button>
+      {index > 0 && (
+        <Button
+          icon="delete"
+          variant="outline"
+          data-cy={`delete-opening-time-${index}-desk`}
+          sx={{ height: '40px', display: ['none', 'none', 'block'] }}
+          showIconOnly={true}
+          onClick={() => toggleDeleteModal()}
+          type="button"
+        >
+          Delete
+        </Button>
+      )}
       <Modal
         onDidDismiss={() => toggleDeleteModal()}
         isOpen={state.showDeleteModal}
@@ -230,8 +236,9 @@ export const OpeningHoursPicker = (props: IProps) => {
         <Flex p={0} mx={-1} sx={{ justifyContent: 'flex-end' }}>
           <Flex px={1}>
             <Button
-              data-cy={'cancel-delete'}
-              variant={'outline'}
+              data-cy="cancel-delete"
+              variant="outline"
+              type="button"
               onClick={() => toggleDeleteModal()}
             >
               Cancel
@@ -239,9 +246,10 @@ export const OpeningHoursPicker = (props: IProps) => {
           </Flex>
           <Flex px={1}>
             <Button
-              data-cy={'confirm-delete'}
-              variant={'outline'}
+              data-cy="confirm-delete"
+              variant="outline"
               onClick={() => confirmDelete()}
+              type="button"
             >
               Delete
             </Button>
diff --git a/src/pages/UserSettings/content/formSections/Fields/ProfileLink.field.tsx b/src/pages/UserSettings/content/formSections/Fields/ProfileLink.field.tsx
index ec3309acf3..d3dfdfb660 100644
--- a/src/pages/UserSettings/content/formSections/Fields/ProfileLink.field.tsx
+++ b/src/pages/UserSettings/content/formSections/Fields/ProfileLink.field.tsx
@@ -79,9 +79,10 @@ export const ProfileLinkField = (props: IProps) => {
 
   const DeleteButton = (props) => (
     <Button
+      type="button"
       data-cy={`delete-link-${index}`}
-      icon={'delete'}
-      variant={'outline'}
+      icon="delete"
+      variant="outline"
       showIconOnly={true}
       onClick={() => toggleDeleteModal()}
       {...props}
diff --git a/src/pages/UserSettings/content/formSections/Impact/Impact.section.tsx b/src/pages/UserSettings/content/formSections/Impact/Impact.section.tsx
index 9f6363b5ca..31042ad38f 100644
--- a/src/pages/UserSettings/content/formSections/Impact/Impact.section.tsx
+++ b/src/pages/UserSettings/content/formSections/Impact/Impact.section.tsx
@@ -48,6 +48,7 @@ export const ImpactSection = () => {
       )}
       <Box mt={2}>
         <Button
+          type="button"
           data-cy="impact-button-expand"
           onClick={() => setIsExpanded(!isExpanded)}
           variant="secondary"
diff --git a/src/pages/UserSettings/content/formSections/Impact/ImpactYearDisplay.field.tsx b/src/pages/UserSettings/content/formSections/Impact/ImpactYearDisplay.field.tsx
index 4d02e2d1e5..c542a227f4 100644
--- a/src/pages/UserSettings/content/formSections/Impact/ImpactYearDisplay.field.tsx
+++ b/src/pages/UserSettings/content/formSections/Impact/ImpactYearDisplay.field.tsx
@@ -42,6 +42,7 @@ export const ImpactYearDisplayField = observer((props: Props) => {
         <Text>{missingData}</Text>
       )}
       <Button
+        type="button"
         data-cy={`${formId}-button-edit`}
         onClick={() => setIsEditMode(true)}
         sx={{ marginTop: 3 }}
diff --git a/src/pages/UserSettings/content/formSections/PatreonIntegration.tsx b/src/pages/UserSettings/content/formSections/PatreonIntegration.tsx
index 18297a98b3..49b1852b7c 100644
--- a/src/pages/UserSettings/content/formSections/PatreonIntegration.tsx
+++ b/src/pages/UserSettings/content/formSections/PatreonIntegration.tsx
@@ -146,6 +146,7 @@ export const PatreonIntegration = (props: { user: IUserPP }) => {
       )}
       <Flex>
         <Button
+          type="button"
           onClick={patreonRedirect}
           mb={3}
           sx={{ justifyContent: 'center', mr: 3 }}
@@ -155,6 +156,7 @@ export const PatreonIntegration = (props: { user: IUserPP }) => {
         </Button>
         {user.patreon && (
           <Button
+            type="button"
             onClick={removePatreonConnection}
             mb={3}
             sx={{ justifyContent: 'center' }}
diff --git a/src/pages/UserSettings/content/formSections/SettingsMapPinSection.tsx b/src/pages/UserSettings/content/formSections/SettingsMapPinSection.tsx
index 0f45128812..ade60474a4 100644
--- a/src/pages/UserSettings/content/formSections/SettingsMapPinSection.tsx
+++ b/src/pages/UserSettings/content/formSections/SettingsMapPinSection.tsx
@@ -84,6 +84,7 @@ export const SettingsMapPinSection = observer((props: IProps) => {
         {!state.hasMapPin && (
           <>
             <Button
+              type="button"
               data-cy="add-a-map-pin"
               onClick={() => {
                 toggleLocationDropdown()
@@ -134,6 +135,7 @@ export const SettingsMapPinSection = observer((props: IProps) => {
 
             <Button
               mr={2}
+              type="button"
               data-cy="edit-map-pin"
               onClick={() => {
                 setState((state) => ({
@@ -146,6 +148,7 @@ export const SettingsMapPinSection = observer((props: IProps) => {
             </Button>
 
             <Button
+              type="button"
               data-cy="remove-a-member-map-pin"
               mt={4}
               variant="outline"
@@ -224,6 +227,7 @@ export const SettingsMapPinSection = observer((props: IProps) => {
                       />
 
                       <Button
+                        type="button"
                         data-cy="remove-a-member-map-pin"
                         mt={4}
                         variant="outline"
diff --git a/src/pages/UserSettings/content/formSections/UserProfile.section.tsx b/src/pages/UserSettings/content/formSections/UserProfile.section.tsx
index e940c859cc..a92709bc03 100644
--- a/src/pages/UserSettings/content/formSections/UserProfile.section.tsx
+++ b/src/pages/UserSettings/content/formSections/UserProfile.section.tsx
@@ -215,15 +215,17 @@ export const UserProfile = () => {
     user && (
       <Form
         id={formId}
-        onSubmit={saveProfile}
+        onSubmit={async (values) => await saveProfile(values)}
         initialValues={formValues}
         validate={validateForm}
         mutators={{ ...arrayMutators }}
         validateOnBlur
         render={({
+          dirty,
           form,
           submitFailed,
           submitting,
+          submitSucceeded,
           values,
           handleSubmit,
           invalid,
@@ -236,12 +238,7 @@ export const UserProfile = () => {
               bg={'inherit'}
               sx={{ flexDirection: 'column', padding: 4, gap: 4 }}
             >
-              <UnsavedChangesDialog
-                uploadComplete={userStore.updateStatus.Complete}
-                message={
-                  'You are leaving this page without saving. Do you want to continue ?'
-                }
-              />
+              <UnsavedChangesDialog hasChanges={dirty && !submitSucceeded} />
 
               <>
                 {notification.show && (
diff --git a/src/pages/common/Drafts/DraftButton.tsx b/src/pages/common/Drafts/DraftButton.tsx
index 566ec6513b..fb3f3da63c 100644
--- a/src/pages/common/Drafts/DraftButton.tsx
+++ b/src/pages/common/Drafts/DraftButton.tsx
@@ -19,6 +19,7 @@ const DraftButton = ({
 
   return (
     <Button
+      type="button"
       variant="secondary"
       icon={showDrafts ? 'arrow-back' : undefined}
       data-cy="my-drafts"
diff --git a/src/pages/common/Header/Header.tsx b/src/pages/common/Header/Header.tsx
index 44690407ed..073345a1b6 100644
--- a/src/pages/common/Header/Header.tsx
+++ b/src/pages/common/Header/Header.tsx
@@ -169,6 +169,7 @@ const Header = observer(({ theme }: { theme: ThemeWithName }) => {
         <MobileMenuWrapper className="menu-mobile">
           <Flex pl={5}>
             <Button
+              type="button"
               showIconOnly={true}
               icon={isVisible ? 'close' : 'menu'}
               onClick={() => setIsVisible(!isVisible)}
diff --git a/src/pages/common/Header/Menu/Profile/ProfileButtonItem.tsx b/src/pages/common/Header/Menu/Profile/ProfileButtonItem.tsx
index ca2a10f222..c1f273f4c1 100644
--- a/src/pages/common/Header/Menu/Profile/ProfileButtonItem.tsx
+++ b/src/pages/common/Header/Menu/Profile/ProfileButtonItem.tsx
@@ -22,6 +22,7 @@ const ProfileButtonItem = (props: IProps) => {
   return (
     <Link to={props.link} style={{ minWidth: 'auto' }}>
       <Button
+        type="button"
         onClick={() => props.isMobile && mobileMenuContext.setIsVisible(false)}
         variant={props.variant}
         {...(props.isMobile ? { large: true } : {})}
diff --git a/src/pages/common/StickyButton.tsx b/src/pages/common/StickyButton.tsx
index abef724a1f..adca968050 100644
--- a/src/pages/common/StickyButton.tsx
+++ b/src/pages/common/StickyButton.tsx
@@ -18,6 +18,7 @@ export const StickyButton = () => {
     >
       <ExternalLink href={href} data-cy="feedback">
         <Button
+          type="button"
           sx={{ display: ['none', 'inherit'] }}
           variant="primary"
           icon="update"
@@ -26,6 +27,7 @@ export const StickyButton = () => {
         </Button>
 
         <Button
+          type="button"
           sx={{ display: ['inherit', 'none'] }}
           variant="primary"
           icon="update"
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index c7f77393db..048014d6c2 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,5 +1,12 @@
 import React, { Suspense } from 'react'
-import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'
+import {
+  createBrowserRouter,
+  createRoutesFromElements,
+  Navigate,
+  Outlet,
+  Route,
+  RouterProvider,
+} from 'react-router-dom'
 import { Analytics } from 'src/common/Analytics'
 import { getSupportedModules, isModuleSupported, MODULE } from 'src/modules'
 import Main from 'src/pages/common/Layout/Main'
@@ -35,57 +42,72 @@ export const Pages = () => {
     ...POLICY_PAGES,
   ]
 
+  const routeElements = [
+    ...menuItems.map((page) => (
+      <Route
+        path={page.exact ? page.path : `${page.path}/*`}
+        key={page.path}
+        element={
+          <>
+            <SeoTagsUpdateComponent title={page.title} />
+            <Main
+              data-cy="main-layout-container"
+              style={{ flex: 1 }}
+              customStyles={page.customStyles}
+              ignoreMaxWidth={page.fullPageWidth}
+            >
+              <>{page.component}</>
+            </Main>
+          </>
+        }
+      />
+    )),
+    <Route key="academy" index element={<Navigate to="/academy" />} />,
+    <Route key="not-found" path="*" element={<NotFoundPage />} />,
+  ]
+  if (isModuleSupported(MODULE.QUESTION)) {
+    routeElements.push(
+      <Route
+        path="/questions/*"
+        key="questions"
+        element={
+          <>
+            <SeoTagsUpdateComponent title="Question" />
+            <Main data-cy="main-layout-container" style={{ flex: 1 }}>
+              <QuestionModuleContainer />
+            </Main>
+          </>
+        }
+      />,
+    )
+  }
+
+  const router = createBrowserRouter(
+    createRoutesFromElements([
+      <Route
+        element={
+          <Suspense
+            fallback={<div style={{ minHeight: 'calc(100vh - 175px)' }}></div>}
+          >
+            <Analytics />
+            <ScrollToTop />
+            <Outlet />
+            <StickyButton />
+          </Suspense>
+        }
+        key="index"
+      >
+        {routeElements}
+      </Route>,
+    ]),
+  )
+
   return (
     <Flex
       sx={{ height: '100vh', flexDirection: 'column' }}
       data-cy="page-container"
     >
-      <BrowserRouter>
-        <Analytics />
-        <ScrollToTop />
-        <Suspense
-          fallback={<div style={{ minHeight: 'calc(100vh - 175px)' }}></div>}
-        >
-          <Routes>
-            {menuItems.map((page) => (
-              <Route
-                path={page.exact ? page.path : `${page.path}/*`}
-                key={page.path}
-                element={
-                  <>
-                    <SeoTagsUpdateComponent title={page.title} />
-                    <Main
-                      data-cy="main-layout-container"
-                      style={{ flex: 1 }}
-                      customStyles={page.customStyles}
-                      ignoreMaxWidth={page.fullPageWidth}
-                    >
-                      <>{page.component}</>
-                    </Main>
-                  </>
-                }
-              />
-            ))}
-            {isModuleSupported(MODULE.QUESTION) ? (
-              <Route
-                path="/questions/*"
-                key="questions"
-                element={
-                  <>
-                    <SeoTagsUpdateComponent title="Question" />
-                    <Main data-cy="main-layout-container" style={{ flex: 1 }}>
-                      <QuestionModuleContainer />
-                    </Main>
-                  </>
-                }
-              />
-            ) : null}
-            <Route index element={<Navigate to="/academy" />} />
-            <Route path="*" element={<NotFoundPage />} />
-          </Routes>
-        </Suspense>
-      </BrowserRouter>
-      <StickyButton />
+      <RouterProvider router={router} />
     </Flex>
   )
 }