autocomplete in combination with autoAccept: true

[MarcAckermann]

I think there is a issue using autocomplet with autoAccept: true
The autocomplete opens and I can select a value. The autocomplet closes and the text is in the input. But when I select a different form element on the page the input field returns to blank.
I have more input elements on the page without autocomplete and they are working fine.
It was working fine with version 1.26.6 but I had to update to 1.26.13 because of the IE11 issue in the older versions.

So this is my code:

	var formElementName = $('#hostName').attr('name');	
	var hiddenElementID  = formElementName + '_autocomplete_hidden';
	$('#hostName').after("<input type=\"hidden\" name=\"" + formElementName + "ID\" id=\"" + hiddenElementID + "\" />");

	$('#hostName')

		.keyboard({
			usePreview: false,
			stayOpen : true,
			maxLength : 100,
			tabNavigation : true,
			language: ['de'],
			layout: 'ms-German',
			autoAccept : true,
			position : {
    			of : '#hostName_keyboard',
  				my : 'center',
    			at : 'center',
			},
			reposition : true,
			css: {
        		container: 'center-block',
        		buttonDefault: 'btn btn-default btn-lg',
		        buttonHover: 'btn-primary',
		        buttonAction: 'active',
        		buttonDisabled: 'disabled'
    		}
		})

		.autocomplete({
			source: function(query, response) {
                $.ajax({
                    url: "controllers/visitor.cfc?method=getHosts",
                    dataType: "json",
                    data: {
                        searchPhrase: query.term
                    },
                    success: function(result) {
                        response(result);
                    }
				    });
        	},
			
			minLength: 2,				
			select: function(event, ui) {	

				var selectedObj = ui.item;
				$('#hostName').val(selectedObj.label);
				$('#'+hiddenElementID).val(selectedObj.value);
				return false;
			}
			
			,
			
			open : function() {
				$('#'+hiddenElementID).val(0);
			},

			close: function(){
				 if ($('#'+hiddenElementID).val()=='0')
						$('#hostName').val('');
			}


		})
	
		.addAutocomplete({
			position : {
				of : '#hostName',  
				my : 'center top',
				at : 'center bottom',
				collision: 'flip'
			}
		})

	    // Typing extension
	    .addTyping({
	      showTyping: true,
	      delay: 250
    });

[Mottie]

Hi @MarcAckermann!

I'm not quite sure how to duplicate this issue. I created this demo using the code you provided. I had to comment out the positioning and css to get the demo to behave, but I'm not sure if the second input needs autocomplete to cause the problem.

[MarcAckermann]

Hi Motti,
thx for setting up the demo. Looks like the issue is somewhere on my side. I don't understand it yet but I will figure it out.

[MarcAckermann]

Hi Motti,
now this is a very strange problem. As soon as you put a third input to the page, the problem with the autocomplet element appears. I could simulate it at this jsfiddle. First select a value at the autocomplete (bottom input) and then touch on the top input element. When you tab back to the bottom element you see that the value is gone.

[Mottie]

Ok, I've confirmed the issue... give me a little time to fix it!

[Mottie]

Ok, all fixed in v1.26.14. Try the demo now.

[MarcAckermann]

Sorry that I have to bother you again. Thanks for the fix!!! But now there is a new problem that was not in v1.26.13. I created a new ticket for that.

[Mottie]

Yes! Sorry, I did notice this problem. Thanks for opening a new ticket!