Autocomplete: Rewrite with a delay instead of appending the live region

This fixes the issue caused by https://bugs.jqueryui.com/ticket/9357.
We now empty the live region instead of appending to it, and we do so
after a brief timeout so the live region isn't updated on every mousemove
event or when quickly traversing through options.

Fixes gh-2002
Closes gh-2031

1 files changed, 9 insertions, 4 deletions

diff --git a/ui/widgets/autocomplete.js b/ui/widgets/autocomplete.js
index 4166029b2..a7b6f52bd 100644
--- a/ui/widgets/autocomplete.js
+++ b/ui/widgets/autocomplete.js
@@ -66,6 +66,7 @@ $.widget( "ui.autocomplete", {
 
 	requestIndex: 0,
 	pending: 0,
+	liveRegionTimer: null,
 
 	_create: function() {
 
@@ -267,8 +268,10 @@ $.widget( "ui.autocomplete", {
 				// Announce the value in the liveRegion
 				label = ui.item.attr( "aria-label" ) || item.value;
 				if ( label && String.prototype.trim.call( label ).length ) {
-					this.liveRegion.children().hide();
-					$( "<div>" ).text( label ).appendTo( this.liveRegion );
+					clearTimeout( this.liveRegionTimer );
+					this.liveRegionTimer = this._delay( function() {
+						this.liveRegion.html( $( "<div>" ).text( label ) );
+					}, 100 );
 				}
 			},
 			menuselect: function( event, ui ) {
@@ -663,8 +666,10 @@ $.widget( "ui.autocomplete", $.ui.autocomplete, {
 		} else {
 			message = this.options.messages.noResults;
 		}
-		this.liveRegion.children().hide();
-		$( "<div>" ).text( message ).appendTo( this.liveRegion );
+		clearTimeout( this.liveRegionTimer );
+		this.liveRegionTimer = this._delay( function() {
+			this.liveRegion.html( $( "<div>" ).text( message ) );
+		}, 100 );
 	}
 } );