Make suggestion clickable in bookmark creation (go-shiori#765)

This was especially noticeable when using the web app on mobile devices as the suggestion looks like it's clickable. It should be also a little bit more convenient UX-wise when it's allowed to be clicked in non- mobile context as well. Co-authored-by: Felipe Martin <[email protected]>
piano1029Forks · Oct 29, 2023 · f16dd42 · f16dd42
1 parent 5e9847a
commit f16dd42
Showing 1 changed file with 10 additions and 7 deletions.
diff --git a/internal/view/assets/js/component/dialog.js b/internal/view/assets/js/component/dialog.js
@@ -31,9 +31,10 @@ var template = `
 						@focus="$event.target.select()"
 						@keyup="handleInput(index)"
 						@keyup.enter="handleInputEnter(index)">
-					<span :ref="'suggestion-'+index" 
-						v-if="field.suggestion" 
-						class="suggestion">{{field.suggestion}}</span>
+					<button :ref="'suggestion-'+index"
+						v-if="field.suggestion"
+						@click="handleInputEnter(index)"
+						class="suggestion">{{field.suggestion}}</button>
 				</template>
 			</slot>
 		</div>
@@ -191,11 +192,11 @@ export default {
 			// Display suggestion
 			this.$nextTick(() => {
 				var input = this.$refs.input[index],
-					span = this.$refs['suggestion-' + index][0],
+					suggestionNode = this.$refs['suggestion-' + index][0],
 					inputRect = input.getBoundingClientRect();
 
-				span.style.top = (inputRect.bottom - 1) + 'px';
-				span.style.left = inputRect.left + 'px';
+				suggestionNode.style.top = (inputRect.bottom - 1) + 'px';
+				suggestionNode.style.left = inputRect.left + 'px';
 			});
 		},
 		handleInputEnter(index) {
@@ -214,6 +215,8 @@ export default {
 
 			this.formFields[index].value = words.join(separator) + separator;
 			this.formFields[index].suggestion = undefined;
+			// Focus input again after suggestion is accepted
+			this.$refs.input[index].focus();
 		},
 		focus() {
 			this.$nextTick(() => {
@@ -235,4 +238,4 @@ export default {
 			})
 		}
 	}
-}
+}