Input field, using jQuery autocomplete, sometimes loses focus when typing ( only happens on IE 11)

Question

I have scoured the web trying to find anything about this, but no luck. I have a webpage with a search field that I give focus to when loading the page. The page always loads with the focus in the search field. The search field uses jQuery autocomplete, the search results use a web request. Sometimes when I start typing in the field the field loses focus after typing 3-6 characters but I can't see where the focus goes. When I use blur or focusout to see the target of the focus, it's still on the search field.

The issue only occurs on Internet Explorer 11, other browsers work fine.

Deepak-MSFT Deepak-MSFT · Accepted Answer · 2018-11-21T02:19:44

It is possible that some other function get called when you are typing the text and because of that your search field loss the focus.

I try to made a test with code below and I find that it is working fine with IE 11.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
	"Aron",
	"artist",
	"Article",
	"Argument",
	"Arnold",
	"Avast",
	"amazon",
	"Air Space",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  } );
  </script>
</head>
<body>
 
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
 <Input type="button" value="Submit"><br>
 <Input type="button" value="clear"><br>
 
</body>
</html>

Output:

You can try to make a test with this sample and check on your side whether it is working correctly or not.

If it works then you need to debug your code in IE 11 to find the issue in your code.

You can also try to provide a sample code here, We can help you to test the issue.

Input field, using jQuery autocomplete, sometimes loses focus when typing ( only happens on IE 11)

1 Answers