Merge pull request #3992 from nextcloud/fix/3990

nextcloud · Sep 9, 2024 · 52e3b80 · 52e3b80
2 parents c9cd12f + 6ad07ed
commit 52e3b80
Showing 1 changed file with 37 additions and 24 deletions.
diff --git a/src/components/GuestNamePicker.vue b/src/components/GuestNamePicker.vue
@@ -7,7 +7,9 @@
 		:out-transition="true"
 		size="small"
 		:show.sync="show">
-		<div class="modal__content" data-cy="guestNameModal">
+		<form class="modal__content"
+			data-cy="guestNameModal"
+			@submit.prevent.stop="submit">
 			<h3>
 				<NcIconSvgWrapper v-if="file.icon !== null"
 					:inline="true"
@@ -21,24 +23,25 @@
                                If you don\'t provide one, the default will be used.`) }}
 			</p>
 
-			<div class="modal__form">
-				<NcTextField :value="guestName"
+			<fieldset>
+				<NcTextField ref="guestNameInput"
+					:value="guestName"
 					data-cy="guestNameInput"
 					:label="t('richdocuments', 'Guest name')"
 					:placeholder="t('richdocuments', 'Anonymous guest')"
 					type="text"
 					@update:value="setGuestName" />
+			</fieldset>
+
+			<div class="modal__buttons">
+				<NcButton data-cy="guestNameSubmit"
+					:aria-label="t('richdocuments', 'Submit name')"
+					type="primary"
+					native-type="submit">
+					{{ t('richdocuments', 'Submit name') }}
+				</NcButton>
 			</div>
-		</div>
-
-		<div class="modal__buttons">
-			<NcButton data-cy="guestNameSubmit"
-				:aria-label="t('richdocuments', 'Submit name')"
-				type="primary"
-				@click="submit">
-				{{ t('richdocuments', 'Submit name') }}
-			</NcButton>
-		</div>
+		</form>
 	</NcModal>
 </template>
 
@@ -81,6 +84,10 @@ export default {
 	},
 
 	async mounted() {
+		this.$nextTick(() => {
+			this.$refs.guestNameInput.focus()
+		})
+
 		const name = document.getElementById('filename').value
 		const mimeTypeIcon = async () => {
 			const url = document.getElementById('mimetypeIcon').value
@@ -120,16 +127,22 @@ export default {
 $modal-padding: calc(var(--default-grid-baseline) * 4);
 
 .modal__content {
-	padding: $modal-padding;
-
-	.modal__form {
-		padding: 15px 0;
-	}
-}
-
-.modal__buttons {
-	display: flex;
-	justify-content: center;
-	padding: 0 $modal-padding $modal-padding $modal-padding;
+  padding: $modal-padding;
+
+  h3 {
+    margin: 0;
+    display: flex;
+    align-items: center;
+  }
+
+  p, fieldset {
+    margin: 10px 0;
+  }
+
+  .modal__buttons {
+    margin-top: $modal-padding;
+    display: flex;
+    justify-content: end;
+  }
 }
 </style>