From 0070db5e78578ca98beed450b8efb78cfc17763a Mon Sep 17 00:00:00 2001
From: wandji20 <wbertrand10@gmail.com>
Date: Tue, 27 Feb 2024 13:03:41 +0100
Subject: [PATCH] Add micro-interactions on the revamped modals [SCI-10265]

---
 app/assets/stylesheets/tailwind/buttons.css   |  10 +-
 .../vue/experiments/modals/duplicate.vue      |  42 ++++----
 .../vue/experiments/modals/edit.vue           |  61 ++++++-----
 .../vue/experiments/modals/move.vue           |  44 ++++----
 app/javascript/vue/experiments/modals/new.vue |  60 ++++++-----
 app/javascript/vue/my_modules/modals/edit.vue |  46 ++++----
 app/javascript/vue/my_modules/modals/move.vue |  42 ++++----
 app/javascript/vue/my_modules/modals/new.vue  | 102 +++++++++---------
 app/javascript/vue/projects/modals/edit.vue   |  68 ++++++------
 .../vue/projects/modals/edit_folder.vue       |  48 +++++----
 app/javascript/vue/projects/modals/move.vue   |  71 ++++++------
 .../vue/projects/modals/move_tree.vue         |   2 +-
 app/javascript/vue/projects/modals/new.vue    |  74 +++++++------
 .../vue/projects/modals/new_folder.vue        |  48 +++++----
 app/javascript/vue/protocols/modals/new.vue   |  70 ++++++------
 .../vue/repositories/modals/duplicate.vue     |  48 +++++----
 .../vue/repositories/modals/edit.vue          |  48 +++++----
 .../vue/repositories/modals/new.vue           |  50 ++++-----
 .../vue/shared/access_modal/assign_flyout.vue |   4 +
 app/javascript/vue/shared/modal_mixin.js      |   1 +
 20 files changed, 493 insertions(+), 446 deletions(-)

diff --git a/app/assets/stylesheets/tailwind/buttons.css b/app/assets/stylesheets/tailwind/buttons.css
index 1dd96b8c8..823481e12 100644
--- a/app/assets/stylesheets/tailwind/buttons.css
+++ b/app/assets/stylesheets/tailwind/buttons.css
@@ -59,7 +59,9 @@
   }
 
   .btn.btn-primary:hover,
-  .btn.btn-success:hover{
+  .btn.btn-success:hover,
+  .btn.btn-primary:focus,
+  .btn.btn-success:focus{
     @apply bg-sn-blue-hover text-sn-white;
   }
 
@@ -80,7 +82,8 @@
   }
 
   .btn.btn-secondary:hover,
-  .btn.btn-default:hover {
+  .btn.btn-default:hover,
+  .btn.btn-secondary:focus {
     @apply  border-sn-blue-hover;
   }
 
@@ -129,7 +132,8 @@
     @apply bg-sn-delete-red text-sn-white;
   }
 
-  .btn.btn-danger:hover {
+  .btn.btn-danger:hover,
+  .btn.btn-danger:focus {
     @apply bg-sn-delete-red-hover;
   }
 
diff --git a/app/javascript/vue/experiments/modals/duplicate.vue b/app/javascript/vue/experiments/modals/duplicate.vue
index 63334804f..709041948 100644
--- a/app/javascript/vue/experiments/modals/duplicate.vue
+++ b/app/javascript/vue/experiments/modals/duplicate.vue
@@ -1,27 +1,29 @@
 <template>
   <div ref="modal" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <i class="sn-icon sn-icon-close"></i>
-          </button>
-          <h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="experiment.name">
-            {{ i18n.t("experiments.clone.modal_title", { experiment: experiment.name }) }}
-          </h4>
+      <form @submit.prevent="submit">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <i class="sn-icon sn-icon-close"></i>
+            </button>
+            <h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="experiment.name">
+              {{ i18n.t("experiments.clone.modal_title", { experiment: experiment.name }) }}
+            </h4>
+          </div>
+          <div class="modal-body">
+            <SelectDropdown :optionsUrl="experiment.urls.projects_to_clone"
+                            :value="targetProject"
+                            @change="changeProject" />
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
+            <button class="btn btn-primary" :disabled="!targetProject" type="submit">
+              {{ i18n.t('experiments.clone.modal_submit') }}
+            </button>
+          </div>
         </div>
-        <div class="modal-body">
-          <SelectDropdown :optionsUrl="experiment.urls.projects_to_clone"
-                          :value="targetProject"
-                          @change="changeProject" />
-        </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
-          <button class="btn btn-primary" :disabled="!targetProject" @click="submit" type="submit">
-            {{ i18n.t('experiments.clone.modal_submit') }}
-          </button>
-        </div>
-      </div>
+      </form>
     </div>
   </div>
 </template>
diff --git a/app/javascript/vue/experiments/modals/edit.vue b/app/javascript/vue/experiments/modals/edit.vue
index ee35c3aee..0fd1fda13 100644
--- a/app/javascript/vue/experiments/modals/edit.vue
+++ b/app/javascript/vue/experiments/modals/edit.vue
@@ -1,38 +1,41 @@
 <template>
   <div ref="modal" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <i class="sn-icon sn-icon-close"></i>
-          </button>
-          <h4 class="modal-title truncate !block" :title="experiment.name">
-            {{ i18n.t('experiments.edit.modal_title', { experiment: experiment.name }) }}
-          </h4>
-        </div>
-        <div class="modal-body">
-          <label class="sci-label">{{ i18n.t('experiments.new.name') }}</label>
-          <div  class="sci-input-container-v2 mb-4">
-            <input type="text" class="sci-input-field"
-                   v-model="name"
-                   autofocus
-                  :placeholder="i18n.t('experiments.new.name_placeholder')">
+      <form @submit.prevent="submit">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <i class="sn-icon sn-icon-close"></i>
+            </button>
+            <h4 class="modal-title truncate !block" :title="experiment.name">
+              {{ i18n.t('experiments.edit.modal_title', { experiment: experiment.name }) }}
+            </h4>
           </div>
-          <label class="sci-label">{{ i18n.t('experiments.new.description') }}</label>
-          <div class="sci-input-container-v2 h-40">
-            <textarea class="sci-input-field"
-                      ref="description"
-                      v-model="description">
-            </textarea>
+          <div class="modal-body">
+            <label class="sci-label">{{ i18n.t('experiments.new.name') }}</label>
+            <div  class="sci-input-container-v2 mb-4">
+              <input type="text" class="sci-input-field"
+                     v-model="name"
+                     autofocus
+                     ref="input"
+                    :placeholder="i18n.t('experiments.new.name_placeholder')">
+            </div>
+            <label class="sci-label">{{ i18n.t('experiments.new.description') }}</label>
+            <div class="sci-input-container-v2 h-40">
+              <textarea class="sci-input-field"
+                        ref="description"
+                        v-model="description">
+              </textarea>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
+            <button type="button" :disabled="!validName" class="btn btn-primary">
+              {{ i18n.t('experiments.edit.modal_create') }}
+            </button>
           </div>
         </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
-          <button type="button" :disabled="!validName" class="btn btn-primary" @click="submit">
-            {{ i18n.t('experiments.edit.modal_create') }}
-          </button>
-        </div>
-      </div>
+      </form>
     </div>
   </div>
 </template>
diff --git a/app/javascript/vue/experiments/modals/move.vue b/app/javascript/vue/experiments/modals/move.vue
index 6782f692e..24ad58269 100644
--- a/app/javascript/vue/experiments/modals/move.vue
+++ b/app/javascript/vue/experiments/modals/move.vue
@@ -1,28 +1,30 @@
 <template>
   <div ref="modal" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <i class="sn-icon sn-icon-close"></i>
-          </button>
-          <h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="experiment.name">
-            {{ i18n.t("experiments.move.modal_title", { experiment: experiment.name }) }}
-          </h4>
+      <form @submit.prevent="submit">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <i class="sn-icon sn-icon-close"></i>
+            </button>
+            <h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="experiment.name">
+              {{ i18n.t("experiments.move.modal_title", { experiment: experiment.name }) }}
+            </h4>
+          </div>
+          <div class="modal-body">
+            <p><small>{{ i18n.t("experiments.move.notice") }}</small></p>
+            <SelectDropdown :optionsUrl="experiment.urls.projects_to_move"
+                            :value="targetProject"
+                            @change="changeProject" />
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
+            <button class="btn btn-primary" :disabled="!targetProject" type="submit">
+              {{ i18n.t('experiments.move.modal_submit') }}
+            </button>
+          </div>
         </div>
-        <div class="modal-body">
-          <p><small>{{ i18n.t("experiments.move.notice") }}</small></p>
-          <SelectDropdown :optionsUrl="experiment.urls.projects_to_move"
-                          :value="targetProject"
-                          @change="changeProject" />
-        </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
-          <button class="btn btn-primary" :disabled="!targetProject" @click="submit" type="submit">
-            {{ i18n.t('experiments.move.modal_submit') }}
-          </button>
-        </div>
-      </div>
+      </form>
     </div>
   </div>
 </template>
diff --git a/app/javascript/vue/experiments/modals/new.vue b/app/javascript/vue/experiments/modals/new.vue
index d0ecb5552..b95c6e1e8 100644
--- a/app/javascript/vue/experiments/modals/new.vue
+++ b/app/javascript/vue/experiments/modals/new.vue
@@ -1,38 +1,40 @@
 <template>
   <div ref="modal" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <i class="sn-icon sn-icon-close"></i>
-          </button>
-          <h4 class="modal-title truncate !block">
-            {{ i18n.t('experiments.new.modal_title') }}
-          </h4>
-        </div>
-        <div class="modal-body">
-          <label class="sci-label">{{ i18n.t('experiments.new.name') }}</label>
-          <div  class="sci-input-container-v2 mb-4">
-            <input type="text" class="sci-input-field"
-                   v-model="name"
-                   autofocus
-                  :placeholder="i18n.t('experiments.new.name_placeholder')">
+      <form @submit.prevent="submit">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <i class="sn-icon sn-icon-close"></i>
+            </button>
+            <h4 class="modal-title truncate !block">
+              {{ i18n.t('experiments.new.modal_title') }}
+            </h4>
           </div>
-          <label class="sci-label">{{ i18n.t('experiments.new.description') }}</label>
-          <div class="sci-input-container-v2 h-40">
-            <textarea class="sci-input-field"
-                      ref="description"
-                      v-model="description">
-            </textarea>
+          <div class="modal-body">
+            <label class="sci-label">{{ i18n.t('experiments.new.name') }}</label>
+            <div  class="sci-input-container-v2 mb-4">
+              <input type="text" class="sci-input-field"
+                     v-model="name"
+                     autofocus ref="input"
+                    :placeholder="i18n.t('experiments.new.name_placeholder')">
+            </div>
+            <label class="sci-label">{{ i18n.t('experiments.new.description') }}</label>
+            <div class="sci-input-container-v2 h-40">
+              <textarea class="sci-input-field"
+                        ref="description"
+                        v-model="description">
+              </textarea>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
+            <button type="submit" :disabled="!validName" class="btn btn-primary">
+              {{ i18n.t('experiments.new.modal_create') }}
+            </button>
           </div>
         </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
-          <button type="button" :disabled="!validName" class="btn btn-primary" @click="submit">
-            {{ i18n.t('experiments.new.modal_create') }}
-          </button>
-        </div>
-      </div>
+      </form>
     </div>
   </div>
 </template>
diff --git a/app/javascript/vue/my_modules/modals/edit.vue b/app/javascript/vue/my_modules/modals/edit.vue
index b59d54bd1..394b8e6cd 100644
--- a/app/javascript/vue/my_modules/modals/edit.vue
+++ b/app/javascript/vue/my_modules/modals/edit.vue
@@ -1,30 +1,32 @@
 <template>
   <div ref="modal" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <i class="sn-icon sn-icon-close"></i>
-          </button>
-          <h4 class="modal-title truncate !block" :title="my_module.name">
-            {{ i18n.t('experiments.canvas.edit.modal_edit_module.title') }}
-          </h4>
-        </div>
-        <div class="modal-body">
-          <label class="sci-label">{{ i18n.t('experiments.canvas.edit.modal_edit_module.name') }}</label>
-          <div  class="sci-input-container-v2 mb-4">
-            <input type="text" class="sci-input-field"
-                   v-model="name"
-                   autofocus>
+      <form @submit.prevent="submit">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <i class="sn-icon sn-icon-close"></i>
+            </button>
+            <h4 class="modal-title truncate !block" :title="my_module.name">
+              {{ i18n.t('experiments.canvas.edit.modal_edit_module.title') }}
+            </h4>
+          </div>
+          <div class="modal-body">
+            <label class="sci-label">{{ i18n.t('experiments.canvas.edit.modal_edit_module.name') }}</label>
+            <div  class="sci-input-container-v2 mb-4">
+              <input type="text" class="sci-input-field"
+                     v-model="name" ref="input"
+                     autofocus>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
+            <button type="submit" :disabled="!nameIsValid" class="btn btn-primary">
+              {{ i18n.t('experiments.canvas.edit.modal_edit_module.confirm') }}
+            </button>
           </div>
         </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
-          <button type="button" :disabled="!nameIsValid" class="btn btn-primary" @click="submit">
-            {{ i18n.t('experiments.canvas.edit.modal_edit_module.confirm') }}
-          </button>
-        </div>
-      </div>
+      </form>
     </div>
   </div>
 </template>
diff --git a/app/javascript/vue/my_modules/modals/move.vue b/app/javascript/vue/my_modules/modals/move.vue
index d0debf929..1a44aeb89 100644
--- a/app/javascript/vue/my_modules/modals/move.vue
+++ b/app/javascript/vue/my_modules/modals/move.vue
@@ -1,27 +1,29 @@
 <template>
   <div ref="modal" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <i class="sn-icon sn-icon-close"></i>
-          </button>
-          <h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="my_module.name">
-            {{ i18n.t('experiments.table.modal_move_modules.title') }}
-          </h4>
+      <form @submit.prevent="submit">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <i class="sn-icon sn-icon-close"></i>
+            </button>
+            <h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="my_module.name">
+              {{ i18n.t('experiments.table.modal_move_modules.title') }}
+            </h4>
+          </div>
+          <div class="modal-body">
+            <SelectDropdown :optionsUrl="my_module.urls.experiments_to_move"
+                            :value="targetExperiment"
+                            @change="changeExperiment" />
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
+            <button class="btn btn-primary" :disabled="!targetExperiment" type="submit">
+              {{ i18n.t('experiments.table.modal_move_modules.confirm') }}
+            </button>
+          </div>
         </div>
-        <div class="modal-body">
-          <SelectDropdown :optionsUrl="my_module.urls.experiments_to_move"
-                          :value="targetExperiment"
-                          @change="changeExperiment" />
-        </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
-          <button class="btn btn-primary" :disabled="!targetExperiment" @click="submit" type="submit">
-            {{ i18n.t('experiments.table.modal_move_modules.confirm') }}
-          </button>
-        </div>
-      </div>
+      </form>
     </div>
   </div>
 </template>
diff --git a/app/javascript/vue/my_modules/modals/new.vue b/app/javascript/vue/my_modules/modals/new.vue
index 2b544810a..3bd7af852 100644
--- a/app/javascript/vue/my_modules/modals/new.vue
+++ b/app/javascript/vue/my_modules/modals/new.vue
@@ -1,69 +1,71 @@
 <template>
   <div ref="modal" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <i class="sn-icon sn-icon-close"></i>
-          </button>
-          <h4 class="modal-title truncate !block">
-            {{ i18n.t('experiments.canvas.new_my_module_modal.title') }}
-          </h4>
-        </div>
-        <div class="modal-body">
-          <label class="sci-label">{{ i18n.t('experiments.canvas.new_my_module_modal.name') }}</label>
-          <div class="sci-input-container-v2 mb-4">
-            <input type="text" class="sci-input-field"
-                   v-model="name"
-                   autofocus
-                  :placeholder="i18n.t('experiments.canvas.new_my_module_modal.name_placeholder')">
+      <form @submit.prevent="submit">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <i class="sn-icon sn-icon-close"></i>
+            </button>
+            <h4 class="modal-title truncate !block">
+              {{ i18n.t('experiments.canvas.new_my_module_modal.title') }}
+            </h4>
           </div>
-
-          <label class="sci-label">
-            {{ i18n.t('experiments.canvas.new_my_module_modal.due_date') }}
-          </label>
-          <DateTimePicker
-            @change="setDueDate"
-            mode="datetime"
-            class="mb-4"
-            size="mb"
-            :placeholder="i18n.t('experiments.canvas.new_my_module_modal.due_date_placeholder')"
-            :clearable="true"/>
+          <div class="modal-body">
+            <label class="sci-label">{{ i18n.t('experiments.canvas.new_my_module_modal.name') }}</label>
+            <div class="sci-input-container-v2 mb-4">
+              <input type="text" class="sci-input-field"
+                     v-model="name"
+                     autofocus ref="input"
+                    :placeholder="i18n.t('experiments.canvas.new_my_module_modal.name_placeholder')">
+            </div>
 
             <label class="sci-label">
-              {{ i18n.t('experiments.canvas.new_my_module_modal.assigned_tags_label') }}
+              {{ i18n.t('experiments.canvas.new_my_module_modal.due_date') }}
             </label>
-            <SelectDropdown
+            <DateTimePicker
+              @change="setDueDate"
+              mode="datetime"
               class="mb-4"
-              @change="setTags"
-              :options="formattedTags"
-              :option-renderer="tagsRenderer"
-              :label-renderer="tagsRenderer"
-              :multiple="true"
-              :searchable="true"
-              :placeholder="i18n.t('experiments.canvas.new_my_module_modal.assigned_tags_placeholder')"
-              :tagsView="true" ></SelectDropdown>
+              size="mb"
+              :placeholder="i18n.t('experiments.canvas.new_my_module_modal.due_date_placeholder')"
+              :clearable="true"/>
 
               <label class="sci-label">
-                {{ i18n.t('experiments.canvas.new_my_module_modal.assigned_users') }}
+                {{ i18n.t('experiments.canvas.new_my_module_modal.assigned_tags_label') }}
               </label>
               <SelectDropdown
-                @change="setUsers"
-                :options="formattedUsers"
-                :option-renderer="usersRenderer"
-                :label-renderer="usersRenderer"
+                class="mb-4"
+                @change="setTags"
+                :options="formattedTags"
+                :option-renderer="tagsRenderer"
+                :label-renderer="tagsRenderer"
                 :multiple="true"
                 :searchable="true"
-                :placeholder="i18n.t('experiments.canvas.new_my_module_modal.assigned_users_placeholder')"
+                :placeholder="i18n.t('experiments.canvas.new_my_module_modal.assigned_tags_placeholder')"
                 :tagsView="true" ></SelectDropdown>
+
+                <label class="sci-label">
+                  {{ i18n.t('experiments.canvas.new_my_module_modal.assigned_users') }}
+                </label>
+                <SelectDropdown
+                  @change="setUsers"
+                  :options="formattedUsers"
+                  :option-renderer="usersRenderer"
+                  :label-renderer="usersRenderer"
+                  :multiple="true"
+                  :searchable="true"
+                  :placeholder="i18n.t('experiments.canvas.new_my_module_modal.assigned_users_placeholder')"
+                  :tagsView="true" ></SelectDropdown>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
+            <button type="submit" :disabled="!validName" class="btn btn-primary" @click="submit">
+              {{ i18n.t('experiments.canvas.new_my_module_modal.create') }}
+            </button>
+          </div>
         </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
-          <button type="button" :disabled="!validName" class="btn btn-primary" @click="submit">
-            {{ i18n.t('experiments.canvas.new_my_module_modal.create') }}
-          </button>
-        </div>
-      </div>
+      </form>
     </div>
   </div>
 </template>
diff --git a/app/javascript/vue/projects/modals/edit.vue b/app/javascript/vue/projects/modals/edit.vue
index ddd19c3b5..aea279d1d 100644
--- a/app/javascript/vue/projects/modals/edit.vue
+++ b/app/javascript/vue/projects/modals/edit.vue
@@ -1,43 +1,45 @@
 <template>
   <div ref="modal" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <i class="sn-icon sn-icon-close"></i>
-          </button>
-          <h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="project.name">
-            {{ i18n.t('projects.index.modal_edit_project.modal_title', {project: project.name}) }}
-          </h4>
-        </div>
-        <div class="modal-body">
-          <div class="mb-6">
-            <label class="sci-label">{{ i18n.t("projects.index.modal_new_project.name") }}</label>
-            <div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
-              <input type="text" v-model="name" class="sci-input-field"
-                     autofocus="true"
-                     :placeholder="i18n.t('projects.index.modal_new_project.name_placeholder')" />
+      <form @submit.prevent="submit">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <i class="sn-icon sn-icon-close"></i>
+            </button>
+            <h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="project.name">
+              {{ i18n.t('projects.index.modal_edit_project.modal_title', {project: project.name}) }}
+            </h4>
+          </div>
+          <div class="modal-body">
+            <div class="mb-6">
+              <label class="sci-label">{{ i18n.t("projects.index.modal_new_project.name") }}</label>
+              <div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
+                <input type="text" v-model="name" class="sci-input-field"
+                       autofocus="true" ref="input"
+                       :placeholder="i18n.t('projects.index.modal_new_project.name_placeholder')" />
+              </div>
+            </div>
+            <div class="flex gap-2 text-xs items-center">
+              <div class="sci-checkbox-container">
+                <input type="checkbox" class="sci-checkbox" v-model="visible" value="visible"/>
+                <span class="sci-checkbox-label"></span>
+              </div>
+              <span v-html="i18n.t('projects.index.modal_new_project.visibility_html')"></span>
+            </div>
+            <div class="mt-6" :class="{'hidden': !visible}">
+              <label class="sci-label">{{ i18n.t("user_assignment.select_default_user_role") }}</label>
+              <SelectDropdown :optionsUrl="userRolesUrl" :value="defaultRole" @change="changeRole" />
             </div>
           </div>
-          <div class="flex gap-2 text-xs items-center">
-            <div class="sci-checkbox-container">
-              <input type="checkbox" class="sci-checkbox" v-model="visible" value="visible"/>
-              <span class="sci-checkbox-label"></span>
-            </div>
-            <span v-html="i18n.t('projects.index.modal_new_project.visibility_html')"></span>
-          </div>
-          <div class="mt-6" :class="{'hidden': !visible}">
-            <label class="sci-label">{{ i18n.t("user_assignment.select_default_user_role") }}</label>
-            <SelectDropdown :optionsUrl="userRolesUrl" :value="defaultRole" @change="changeRole" />
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
+            <button class="btn btn-primary" type="submit">
+              {{ i18n.t('projects.index.modal_edit_project.submit') }}
+            </button>
           </div>
         </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
-          <button class="btn btn-primary" @click="submit" type="submit">
-            {{ i18n.t('projects.index.modal_edit_project.submit') }}
-          </button>
-        </div>
-      </div>
+      </form>
     </div>
   </div>
 </template>
diff --git a/app/javascript/vue/projects/modals/edit_folder.vue b/app/javascript/vue/projects/modals/edit_folder.vue
index f6a78cb9e..4c0afa8fa 100644
--- a/app/javascript/vue/projects/modals/edit_folder.vue
+++ b/app/javascript/vue/projects/modals/edit_folder.vue
@@ -1,32 +1,34 @@
 <template>
   <div ref="modal" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <i class="sn-icon sn-icon-close"></i>
-          </button>
-          <h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="folder.name">
-            {{ i18n.t('projects.index.modal_edit_folder.title', {folder: folder.name}) }}
-          </h4>
-        </div>
-        <div class="modal-body">
-          <div class="mb-6">
-            <label class="sci-label">{{ i18n.t("projects.index.modal_edit_folder.folder_name_field") }}</label>
-            <div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
-              <input type="text" v-model="name"
-                     class="sci-input-field" autofocus="true"
-                     :placeholder="i18n.t('projects.index.modal_new_project.name_placeholder')" />
+      <form @submit.prevent="submit">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <i class="sn-icon sn-icon-close"></i>
+            </button>
+            <h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="folder.name">
+              {{ i18n.t('projects.index.modal_edit_folder.title', {folder: folder.name}) }}
+            </h4>
+          </div>
+          <div class="modal-body">
+            <div class="mb-6">
+              <label class="sci-label">{{ i18n.t("projects.index.modal_edit_folder.folder_name_field") }}</label>
+              <div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
+                <input type="text" v-model="name"
+                       class="sci-input-field" autofocus="true" ref="input"
+                       :placeholder="i18n.t('projects.index.modal_new_project.name_placeholder')" />
+              </div>
             </div>
           </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
+            <button class="btn btn-primary" type="submit">
+              {{ i18n.t('projects.index.modal_edit_folder.submit') }}
+            </button>
+          </div>
         </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
-          <button class="btn btn-primary" @click="submit" type="submit">
-            {{ i18n.t('projects.index.modal_edit_folder.submit') }}
-          </button>
-        </div>
-      </div>
+      </form>
     </div>
   </div>
 </template>
diff --git a/app/javascript/vue/projects/modals/move.vue b/app/javascript/vue/projects/modals/move.vue
index 34e622b0a..08eaa66ab 100644
--- a/app/javascript/vue/projects/modals/move.vue
+++ b/app/javascript/vue/projects/modals/move.vue
@@ -1,44 +1,47 @@
 <template>
   <div ref="modal" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <i class="sn-icon sn-icon-close"></i>
-          </button>
-          <h4 class="modal-title truncate !block" id="edit-project-modal-label">
-            {{ this.title }}
-          </h4>
-        </div>
-        <div class="modal-body">
-          <div class="mb-4">{{ this.description }}</div>
-          <div class="mb-4">
-            <div class="sci-input-container-v2 left-icon">
-              <input type="text"
-                     v-model="query"
-                     class="sci-input-field"
-                     autofocus="true"
-                     :placeholder="i18n.t('projects.index.modal_move_folder.find_folder')" />
-              <i class="sn-icon sn-icon-search"></i>
+      <form @submit.prevent="submit">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <i class="sn-icon sn-icon-close"></i>
+            </button>
+            <h4 class="modal-title truncate !block" id="edit-project-modal-label">
+              {{ this.title }}
+            </h4>
+          </div>
+          <div class="modal-body">
+            <div class="mb-4">{{ this.description }}</div>
+            <div class="mb-4">
+              <div class="sci-input-container-v2 left-icon">
+                <input type="text"
+                       v-model="query"
+                       class="sci-input-field"
+                       ref="input"
+                       autofocus="true"
+                       :placeholder="i18n.t('projects.index.modal_move_folder.find_folder')" />
+                <i class="sn-icon sn-icon-search"></i>
+              </div>
+            </div>
+            <div class="max-h-80 overflow-y-auto">
+              <div class="p-2 flex items-center gap-2 cursor-pointer text-sn-blue hover:bg-sn-super-light-grey"
+                    @click="selectFolder(null)"
+                   :class="{'!bg-sn-super-light-blue': selectedFolderId == null}">
+                <i class="sn-icon sn-icon-projects"></i>
+                {{ i18n.t('projects.index.modal_move_folder.projects') }}
+              </div>
+              <MoveTree :objects="filteredFoldersTree" :value="selectedFolderId" @selectFolder="selectFolder" />
             </div>
           </div>
-          <div class="max-h-80 overflow-y-auto">
-            <div class="p-2 flex items-center gap-2 cursor-pointer text-sn-blue hover:bg-sn-super-light-grey"
-                  @click="selectFolder(null)"
-                 :class="{'!bg-sn-super-light-blue': selectedFolderId == null}">
-              <i class="sn-icon sn-icon-projects"></i>
-              {{ i18n.t('projects.index.modal_move_folder.projects') }}
-            </div>
-            <MoveTree :objects="filteredFoldersTree" :value="selectedFolderId" @selectFolder="selectFolder" />
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
+            <button class="btn btn-primary" type="submit">
+              {{ i18n.t('projects.index.modal_move_folder.submit') }}
+            </button>
           </div>
         </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
-          <button class="btn btn-primary" @click="submit" type="submit">
-            {{ i18n.t('projects.index.modal_move_folder.submit') }}
-          </button>
-        </div>
-      </div>
+      </form>
     </div>
   </div>
 </template>
diff --git a/app/javascript/vue/projects/modals/move_tree.vue b/app/javascript/vue/projects/modals/move_tree.vue
index 2a9cbd613..8a91cb5d0 100644
--- a/app/javascript/vue/projects/modals/move_tree.vue
+++ b/app/javascript/vue/projects/modals/move_tree.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="pl-6" v-for="object in objects" :key="object.folder.id">
+  <div class="pl-6" v-if="objects.length" v-for="object in objects" :key="object.folder.id">
     <div class="flex items-center">
       <i v-if="object.children.length > 0"
          :class="{'sn-icon-up': opendedFolders[object.folder.id], 'sn-icon-down': !opendedFolders[object.folder.id]}"
diff --git a/app/javascript/vue/projects/modals/new.vue b/app/javascript/vue/projects/modals/new.vue
index 334d2d460..bbf674fbb 100644
--- a/app/javascript/vue/projects/modals/new.vue
+++ b/app/javascript/vue/projects/modals/new.vue
@@ -1,44 +1,47 @@
 <template>
   <div ref="modal" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <i class="sn-icon sn-icon-close"></i>
-          </button>
-          <h4 class="modal-title truncate !block" id="edit-project-modal-label">
-            {{ i18n.t('projects.index.modal_new_project.modal_title') }}
-          </h4>
-        </div>
-        <div class="modal-body">
-          <div class="mb-6">
-            <label class="sci-label">{{ i18n.t("projects.index.modal_new_project.name") }}</label>
-            <div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
-              <input type="text" v-model="name"
-                     class="sci-input-field"
-                     autofocus="true"
-                     :placeholder="i18n.t('projects.index.modal_new_project.name_placeholder')" />
+      <form @submit.prevent="submit">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <i class="sn-icon sn-icon-close"></i>
+            </button>
+            <h4 class="modal-title truncate !block" id="edit-project-modal-label">
+              {{ i18n.t('projects.index.modal_new_project.modal_title') }}
+            </h4>
+          </div>
+          <div class="modal-body">
+            <div class="mb-6">
+              <label class="sci-label">{{ i18n.t("projects.index.modal_new_project.name") }}</label>
+              <div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
+                <input type="text" v-model="name"
+                       class="sci-input-field"
+                       ref="input"
+                       autofocus="true"
+                       :placeholder="i18n.t('projects.index.modal_new_project.name_placeholder')" />
+              </div>
+            </div>
+            <div class="flex gap-2 text-xs items-center">
+              <div class="sci-checkbox-container">
+                <input type="checkbox" class="sci-checkbox" v-model="visible" value="visible"/>
+                <span class="sci-checkbox-label"></span>
+              </div>
+              <span v-html="i18n.t('projects.index.modal_new_project.visibility_html')"></span>
+            </div>
+            <div class="mt-6" :class="{'hidden': !visible}">
+              <label class="sci-label">{{ i18n.t("user_assignment.select_default_user_role") }}</label>
+              <SelectDropdown :optionsUrl="userRolesUrl" :value="defaultRole" @change="changeRole" />
             </div>
           </div>
-          <div class="flex gap-2 text-xs items-center">
-            <div class="sci-checkbox-container">
-              <input type="checkbox" class="sci-checkbox" v-model="visible" value="visible"/>
-              <span class="sci-checkbox-label"></span>
-            </div>
-            <span v-html="i18n.t('projects.index.modal_new_project.visibility_html')"></span>
-          </div>
-          <div class="mt-6" :class="{'hidden': !visible}">
-            <label class="sci-label">{{ i18n.t("user_assignment.select_default_user_role") }}</label>
-            <SelectDropdown :optionsUrl="userRolesUrl" :value="defaultRole" @change="changeRole" />
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
+            <button class="btn btn-primary" type="submit">
+              {{ i18n.t('projects.index.modal_new_project.create') }}
+            </button>
           </div>
         </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
-          <button class="btn btn-primary" @click="submit" type="submit">
-            {{ i18n.t('projects.index.modal_new_project.create') }}
-          </button>
-        </div>
-      </div>
+      </form>
     </div>
   </div>
 </template>
@@ -66,10 +69,12 @@ export default {
       visible: false,
       defaultRole: null,
       error: null,
+      disableSubmit: false
     };
   },
   methods: {
     submit() {
+      this.disableSubmit = true;
       axios.post(this.createUrl, {
         project: {
           name: this.name,
@@ -83,6 +88,7 @@ export default {
       }).catch((error) => {
         this.error = error.response.data.name;
       });
+      this.disableSubmit = false;
     },
     changeRole(role) {
       this.defaultRole = role;
diff --git a/app/javascript/vue/projects/modals/new_folder.vue b/app/javascript/vue/projects/modals/new_folder.vue
index a5303ad0f..470b9add5 100644
--- a/app/javascript/vue/projects/modals/new_folder.vue
+++ b/app/javascript/vue/projects/modals/new_folder.vue
@@ -1,32 +1,34 @@
 <template>
   <div ref="modal" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <i class="sn-icon sn-icon-close"></i>
-          </button>
-          <h4 class="modal-title truncate !block" id="edit-project-modal-label">
-            {{ i18n.t('projects.index.modal_new_project_folder.modal_title') }}
-          </h4>
-        </div>
-        <div class="modal-body">
-          <div class="mb-6">
-            <label class="sci-label">{{ i18n.t('projects.index.modal_new_project_folder.name') }}</label>
-            <div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
-              <input type="text" v-model="name"
-                     class="sci-input-field" autofocus="true"
-                     :placeholder="i18n.t('projects.index.modal_new_project.name_placeholder')" />
+      <form @submit.prevent="submit">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <i class="sn-icon sn-icon-close"></i>
+            </button>
+            <h4 class="modal-title truncate !block" id="edit-project-modal-label">
+              {{ i18n.t('projects.index.modal_new_project_folder.modal_title') }}
+            </h4>
+          </div>
+          <div class="modal-body">
+            <div class="mb-6">
+              <label class="sci-label">{{ i18n.t('projects.index.modal_new_project_folder.name') }}</label>
+              <div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
+                <input type="text" v-model="name"
+                       class="sci-input-field" autofocus="true" ref="input"
+                       :placeholder="i18n.t('projects.index.modal_new_project.name_placeholder')" />
+              </div>
             </div>
           </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
+            <button class="btn btn-primary" type="submit">
+              {{ i18n.t('projects.index.modal_new_project.create') }}
+            </button>
+          </div>
         </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
-          <button class="btn btn-primary" @click="submit" type="submit">
-            {{ i18n.t('projects.index.modal_new_project.create') }}
-          </button>
-        </div>
-      </div>
+      </form>
     </div>
   </div>
 </template>
diff --git a/app/javascript/vue/protocols/modals/new.vue b/app/javascript/vue/protocols/modals/new.vue
index d9ccd297b..467b34750 100644
--- a/app/javascript/vue/protocols/modals/new.vue
+++ b/app/javascript/vue/protocols/modals/new.vue
@@ -1,44 +1,46 @@
 <template>
   <div ref="modal" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <i class="sn-icon sn-icon-close"></i>
-          </button>
-          <h4 class="modal-title truncate !block" id="edit-project-modal-label">
-            {{ i18n.t("protocols.new_protocol_modal.title_new") }}
-          </h4>
-        </div>
-        <div class="modal-body">
-          <div class="mb-6">
-            <label class="sci-label">{{ i18n.t("protocols.new_protocol_modal.name_label") }}</label>
-            <div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
-              <input type="text" v-model="name"
-                     class="sci-input-field"
-                     autofocus="true"
-                     :placeholder="i18n.t('protocols.new_protocol_modal.name_placeholder')" />
+      <form @submit.prevent="submit">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <i class="sn-icon sn-icon-close"></i>
+            </button>
+            <h4 class="modal-title truncate !block" id="edit-project-modal-label">
+              {{ i18n.t("protocols.new_protocol_modal.title_new") }}
+            </h4>
+          </div>
+          <div class="modal-body">
+            <div class="mb-6">
+              <label class="sci-label">{{ i18n.t("protocols.new_protocol_modal.name_label") }}</label>
+              <div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
+                <input type="text" v-model="name"
+                       class="sci-input-field"
+                       autofocus="true" ref="input"
+                       :placeholder="i18n.t('protocols.new_protocol_modal.name_placeholder')" />
+              </div>
+            </div>
+            <div class="flex gap-2 text-xs items-center">
+              <div class="sci-checkbox-container">
+                <input type="checkbox" class="sci-checkbox" v-model="visible" value="visible"/>
+                <span class="sci-checkbox-label"></span>
+              </div>
+              <span v-html="i18n.t('protocols.new_protocol_modal.access_label')"></span>
+            </div>
+            <div class="mt-6" :class="{'hidden': !visible}">
+              <label class="sci-label">{{ i18n.t("protocols.new_protocol_modal.role_label") }}</label>
+              <SelectDropdown :optionsUrl="userRolesUrl" :value="defaultRole" @change="changeRole" />
             </div>
           </div>
-          <div class="flex gap-2 text-xs items-center">
-            <div class="sci-checkbox-container">
-              <input type="checkbox" class="sci-checkbox" v-model="visible" value="visible"/>
-              <span class="sci-checkbox-label"></span>
-            </div>
-            <span v-html="i18n.t('protocols.new_protocol_modal.access_label')"></span>
-          </div>
-          <div class="mt-6" :class="{'hidden': !visible}">
-            <label class="sci-label">{{ i18n.t("protocols.new_protocol_modal.role_label") }}</label>
-            <SelectDropdown :optionsUrl="userRolesUrl" :value="defaultRole" @change="changeRole" />
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
+            <button class="btn btn-primary" type="submit">
+              {{ i18n.t('protocols.new_protocol_modal.create_new') }}
+            </button>
           </div>
         </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
-          <button class="btn btn-primary" @click="submit" type="submit">
-            {{ i18n.t('protocols.new_protocol_modal.create_new') }}
-          </button>
-        </div>
-      </div>
+      </form>
     </div>
   </div>
 </template>
diff --git a/app/javascript/vue/repositories/modals/duplicate.vue b/app/javascript/vue/repositories/modals/duplicate.vue
index acaa1327c..db2f5c644 100644
--- a/app/javascript/vue/repositories/modals/duplicate.vue
+++ b/app/javascript/vue/repositories/modals/duplicate.vue
@@ -1,32 +1,34 @@
 <template>
   <div ref="modal" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <i class="sn-icon sn-icon-close"></i>
-          </button>
-          <h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="repository.name">
-            {{ i18n.t('repositories.index.modal_copy.title_html', {name: repository.name }) }}
-          </h4>
-        </div>
-        <div class="modal-body">
-          <div class="mb-6">
-            <label class="sci-label">{{ i18n.t("repositories.index.modal_copy.name") }}</label>
-            <div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
-              <input type="text" v-model="name" class="sci-input-field"
-                     autofocus="true"
-                     :placeholder="i18n.t('repositories.index.modal_copy.name_placeholder')" />
+      <form @submit.prevent="submit">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <i class="sn-icon sn-icon-close"></i>
+            </button>
+            <h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="repository.name">
+              {{ i18n.t('repositories.index.modal_copy.title_html', {name: repository.name }) }}
+            </h4>
+          </div>
+          <div class="modal-body">
+            <div class="mb-6">
+              <label class="sci-label">{{ i18n.t("repositories.index.modal_copy.name") }}</label>
+              <div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
+                <input type="text" v-model="name" class="sci-input-field"
+                       autofocus="true" ref="input"
+                       :placeholder="i18n.t('repositories.index.modal_copy.name_placeholder')" />
+              </div>
             </div>
           </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
+            <button class="btn btn-primary" type="submit">
+              {{ i18n.t('repositories.index.modal_copy.copy') }}
+            </button>
+          </div>
         </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
-          <button class="btn btn-primary" @click="submit" type="submit">
-            {{ i18n.t('repositories.index.modal_copy.copy') }}
-          </button>
-        </div>
-      </div>
+      </form>
     </div>
   </div>
 </template>
diff --git a/app/javascript/vue/repositories/modals/edit.vue b/app/javascript/vue/repositories/modals/edit.vue
index e159cf3e3..4950fed91 100644
--- a/app/javascript/vue/repositories/modals/edit.vue
+++ b/app/javascript/vue/repositories/modals/edit.vue
@@ -1,32 +1,34 @@
 <template>
   <div ref="modal" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <i class="sn-icon sn-icon-close"></i>
-          </button>
-          <h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="repository.name">
-            {{ i18n.t('repositories.index.modal_rename.title_html', {name: repository.name }) }}
-          </h4>
-        </div>
-        <div class="modal-body">
-          <div class="mb-6">
-            <label class="sci-label">{{ i18n.t("repositories.index.modal_rename.name") }}</label>
-            <div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
-              <input type="text" v-model="name" class="sci-input-field"
-                     autofocus="true"
-                     :placeholder="i18n.t('repositories.index.modal_rename.name_placeholder')" />
+      <form @submit.prevent="submit">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <i class="sn-icon sn-icon-close"></i>
+            </button>
+            <h4 class="modal-title truncate !block" id="edit-project-modal-label" :title="repository.name">
+              {{ i18n.t('repositories.index.modal_rename.title_html', {name: repository.name }) }}
+            </h4>
+          </div>
+          <div class="modal-body">
+            <div class="mb-6">
+              <label class="sci-label">{{ i18n.t("repositories.index.modal_rename.name") }}</label>
+              <div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
+                <input type="text" v-model="name" class="sci-input-field"
+                       autofocus="true" ref="input"
+                       :placeholder="i18n.t('repositories.index.modal_rename.name_placeholder')" />
+              </div>
             </div>
           </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
+            <button class="btn btn-primary" type="submit">
+              {{ i18n.t('repositories.index.modal_rename.rename') }}
+            </button>
+          </div>
         </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
-          <button class="btn btn-primary" @click="submit" type="submit">
-            {{ i18n.t('repositories.index.modal_rename.rename') }}
-          </button>
-        </div>
-      </div>
+      </form>
     </div>
   </div>
 </template>
diff --git a/app/javascript/vue/repositories/modals/new.vue b/app/javascript/vue/repositories/modals/new.vue
index d7e11b033..4fae523f7 100644
--- a/app/javascript/vue/repositories/modals/new.vue
+++ b/app/javascript/vue/repositories/modals/new.vue
@@ -1,33 +1,35 @@
 <template>
   <div ref="modal" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <i class="sn-icon sn-icon-close"></i>
-          </button>
-          <h4 class="modal-title truncate !block" id="edit-project-modal-label">
-            {{ i18n.t('repositories.index.modal_create.title') }}
-          </h4>
-        </div>
-        <div class="modal-body">
-          <div class="mb-6">
-            <label class="sci-label">{{ i18n.t("repositories.index.modal_create.name_label") }}</label>
-            <div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
-              <input type="text" v-model="name"
-                     class="sci-input-field"
-                     autofocus="true"
-                     :placeholder="i18n.t('repositories.index.modal_create.name_placeholder')" />
+      <form @submit.prevent="submit">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <i class="sn-icon sn-icon-close"></i>
+            </button>
+            <h4 class="modal-title truncate !block" id="edit-project-modal-label">
+              {{ i18n.t('repositories.index.modal_create.title') }}
+            </h4>
+          </div>
+          <div class="modal-body">
+            <div class="mb-6">
+              <label class="sci-label">{{ i18n.t("repositories.index.modal_create.name_label") }}</label>
+              <div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
+                <input type="text" v-model="name"
+                       class="sci-input-field"
+                       autofocus="true" ref="input"
+                       :placeholder="i18n.t('repositories.index.modal_create.name_placeholder')" />
+              </div>
             </div>
           </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
+            <button class="btn btn-primary" type="submit">
+              {{ i18n.t('repositories.index.modal_create.submit') }}
+            </button>
+          </div>
         </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
-          <button class="btn btn-primary" @click="submit" type="submit">
-            {{ i18n.t('repositories.index.modal_create.submit') }}
-          </button>
-        </div>
-      </div>
+      </form>
     </div>
   </div>
 </template>
diff --git a/app/javascript/vue/shared/access_modal/assign_flyout.vue b/app/javascript/vue/shared/access_modal/assign_flyout.vue
index a645e2bab..abecbd866 100644
--- a/app/javascript/vue/shared/access_modal/assign_flyout.vue
+++ b/app/javascript/vue/shared/access_modal/assign_flyout.vue
@@ -8,6 +8,7 @@
         <div class="sci-input-container-v2 left-icon">
           <input type="text" v-model="query" class="sci-input-field"
                   autofocus="true"
+                  ref="input"
                   :placeholder="i18n.t('access_permissions.partials.new_assignments_form.find_people_html')" />
           <i class="sn-icon sn-icon-search"></i>
         </div>
@@ -80,6 +81,9 @@ export default {
   mounted() {
     this.getUnAssignedUsers();
     this.getRoles();
+    this.$nextTick(() => {
+      this.$refs.input?.focus();
+    });
   },
   components: {
     MenuDropdown,
diff --git a/app/javascript/vue/shared/modal_mixin.js b/app/javascript/vue/shared/modal_mixin.js
index 9eaa3fdfc..3461c87ea 100644
--- a/app/javascript/vue/shared/modal_mixin.js
+++ b/app/javascript/vue/shared/modal_mixin.js
@@ -1,6 +1,7 @@
 export default {
   mounted() {
     $(this.$refs.modal).modal('show');
+    this.$refs.input?.focus();
     $(this.$refs.modal).on('hidden.bs.modal', () => {
       this.$emit('close');
     });