do not move the cursor to the end when applying a proposal

pdb-ui/src/main/java/org/lucares/pdbui/PdbController.java

@@ -161,7 +161,8 @@ public class PdbController implements HardcodedValues {
 		for (final Proposal proposal : proposals) {
 			final AutocompleteProposal e = new AutocompleteProposal();
 			e.setValue(proposal.getProposedTag());
-			e.setProposedQuery(proposal.getProposedQuery());
+			e.setNewQuery(proposal.getNewQuery());
+			e.setNewCaretPosition(proposal.getNewCaretPosition());
 
 			result.add(e);
 		}

pdb-ui/src/main/java/org/lucares/pdbui/domain/AutocompleteProposal.java

@@ -2,7 +2,8 @@ package org.lucares.pdbui.domain;
 
 public class AutocompleteProposal {
 	private String value;
-	private String proposedQuery;
+	private String newQuery;
+	private int newCaretPosition;
 
 	public String getValue() {
 		return value;
@@ -17,11 +18,19 @@ public class AutocompleteProposal {
 		return value;
 	}
 
-	public void setProposedQuery(final String proposedQuery) {
-		this.proposedQuery = proposedQuery;
+	public int getNewCaretPosition() {
+		return newCaretPosition;
 	}
 
-	public String getProposedQuery() {
-		return proposedQuery;
+	public void setNewCaretPosition(final int newCaretPosition) {
+		this.newCaretPosition = newCaretPosition;
+	}
+
+	public String getNewQuery() {
+		return newQuery;
+	}
+
+	public void setNewQuery(final String newQuery) {
+		this.newQuery = newQuery;
 	}
 }

pdb-ui/src/main/resources/resources/js/ui.js

@@ -1,5 +1,16 @@
 'use strict';
 
+function ffHasParentWithId(el, id) {
+	if (el.id == id){
+		return true;
+	}
+	else if (el.parentNode) {
+		return ffHasParentWithId(el.parentNode, id);
+	}
+	
+	return false; 
+};
+
 window.onload=function(){
 
 Vue.config.keyCodes.arrowUp = 38;
@@ -12,18 +23,31 @@ Vue.component('search-bar-query', {
 	created: function() {
 		this.requestNumber= 1;
 		document.addEventListener("click", function(event){
-			const isSearchInput = event.path.map((e) => e.id == "search-input-wrapper")
-					.reduce((accumulator, currentValue) => accumulator || currentValue);
+			const isSearchInput = event.path 
+				? event.path.map((e) => e.id == "search-input-wrapper")
+					.reduce((accumulator, currentValue) => accumulator || currentValue)
+				: ffHasParentWithId(event.explicitOriginalTarget, "search-input-wrapper");
 			if(!isSearchInput){
 				data.searchBar.proposals = [];
-				data.searchBar.showProposals = false;
 			}
 		});
 		
+		document.onkeydown = function(evt) {
+			evt = evt || window.event;
+			var isEscape = false;
+			if ("key" in evt) {
+				isEscape = (evt.key == "Escape" || evt.key == "Esc");
+			} else {
+				isEscape = (evt.keyCode == 27);
+			}
+			if (isEscape) {
+				data.searchBar.proposals = [];
+			}
+		};
+		
 	},
 	data: function() {
 		return {
-			showProposals: false,
 			highlightedProposal: -1,
 		};
 	},
@@ -32,18 +56,23 @@ Vue.component('search-bar-query', {
 			if (event.key == 'ArrowDown' || event.key == 'ArrowUp' || event.key == 'Enter' || event.key == 'Escape'){
 				return;
 			}
-			//console.log(event.key);
-		
-			var vm = this;
+			console.log(event);
+			
+			this.autocomplete(this, event);
+		},
+		autocomplete: function(vm, event) {
+			
 			if(this.autocompleteTimeout) {
 				window.clearTimeout(this.autocompleteTimeout);
-				event.preventDefault();
+				if (event) {
+					event.preventDefault();
+				}
 			}
 			
 			vm.showProposals = false;
 						
 			var expectedRequestNumber = ++vm.requestNumber;
-			this.autocompleteTimeout = window.setTimeout(function() {
+			vm.autocompleteTimeout = window.setTimeout(function() {
 				var caretIndex = document.getElementById('search-input').selectionStart + 1;
 				var request='autocomplete?caretIndex=' + caretIndex + '&query='+encodeURIComponent(data.searchBar.query);
 				
@@ -67,7 +96,7 @@ Vue.component('search-bar-query', {
 				
 				var errorCallback = function(e) { 
 					console.log("FAILED: " + JSON.parse(e.responseText).message);
-					vm.showProposals=false; 
+					vm.proposals=[]; 
 				};
 				
 				getJson(request, {}, successCallback, errorCallback);
@@ -75,11 +104,23 @@ Vue.component('search-bar-query', {
 			300);
 		},
 		selectOrSubmit: function(event) {
+			const vm = this;
 			if (this.highlightedProposal >= 0){
-				var proposal = data.searchBar.proposals[this.highlightedProposal];
-				data.searchBar.query = proposal.proposedQuery;
-				this.showProposals = false;
 				event.preventDefault();
+				var proposal = data.searchBar.proposals[this.highlightedProposal];
+				data.searchBar.query = proposal.newQuery;
+				data.searchBar.proposals = [];
+				
+				console.log(proposal.newCaretPosition);
+				
+				Vue.nextTick(function () {
+					var el = document.getElementById('search-input');
+					el.select();
+					el.selectionStart=proposal.newCaretPosition;
+					el.selectionEnd=proposal.newCaretPosition;
+					
+					vm.autocomplete(vm);
+				});
 			}
 		},
 		selectUpDown: function(event) {
@@ -109,7 +150,7 @@ Vue.component('search-bar-query', {
 				placeholder="field=value and anotherField=anotherValue" />
 			<div 
 				id="proposals"
-				v-show="searchBar.proposals.length > 0 && showProposals"
+				v-show="searchBar.proposals.length > 0"
 				@keyup.prevent.down.up="selectUpDown"
 			>
 				<proposal-item
@@ -132,9 +173,15 @@ Vue.component('proposal-item', {
 	methods: {
 		selectProposal: function(event) {
 			var proposal = data.searchBar.proposals[this.proposalItem.index];
-			data.searchBar.query = proposal.proposedQuery;
-			data.searchBar.showProposals = false;
-			document.getElementById('search-input').focus();
+			data.searchBar.query = proposal.newQuery;
+			data.searchBar.proposals = [];
+			
+			Vue.nextTick(function () {
+				var el = document.getElementById('search-input');
+				el.select();
+				el.selectionStart=proposal.newCaretPosition;
+				el.selectionEnd=proposal.newCaretPosition;
+			});
 		},
 	},
 	template: `
@@ -418,7 +465,6 @@ Vue.component('search-bar', {
 		      	v-bind:key="item.id"
 		      	v-bind:groupBy="item"
 			></group-by-item>
-			<!--v-bind="{ id: 'search-group-by-'+item.id, 'selected': item.selected, 'options':item.options }"-->
 			<label for="split-by">Split:</label>
 			<select id="split-by" v-model="searchBar.splitByKeys.selected">
 				<option 
@@ -560,9 +606,8 @@ var rootView = new Vue({
 var data = {
 
 	searchBar: {
-		query: 'pod=vapfinra01 and method = ViewService.find',
+		query: 'pod=vapf and method = ViewService.findFieldViewGroup',
 		proposals: [],
-		showProposals: false,
 	    groupByKeys: [],
 	    splitByKeys: {
 	    	'selected': 'method',