Fix issue in InputfieldPageAutocomplete where it was displaying the wrong icon for item-sort, and it was also wasn't positioned quite right if the autocomplete appeared in a non-default tab.

wire/modules/Inputfield/InputfieldPageAutocomplete/InputfieldPageAutocomplete.css

@@ -1 +1 @@
-.pw-content .InputfieldPageAutocomplete p{margin:0}.pw-content .InputfieldPageAutocomplete ol{margin:0;list-style:none}.pw-content .InputfieldPageAutocomplete ol li{position:relative;margin:0 0 1px 0;padding-left:0;list-style:none;width:100%;line-height:1em;display:block;cursor:move}.pw-content .InputfieldPageAutocomplete ol li i.fa-sort{display:inline;float:left;margin-right:7px;position:relative;top:3px;left:3px;opacity:.7}.pw-content .InputfieldPageAutocomplete ol li .ui-icon-arrowthick-2-n-s{float:left;margin-top:1px}.pw-content .InputfieldPageAutocomplete ol li:last-child{margin-bottom:.5em}.pw-content .InputfieldPageAutocomplete input.no_list{padding-right:22px}.InputfieldPageAutocomplete ol li .itemLabel{display:block;padding:3px 0 3px 5px;cursor:move}.InputfieldPageAutocomplete ol li .itemRemove{position:absolute;right:3px;top:0}.InputfieldPageAutocomplete ol li .itemValue{display:none}.InputfieldPageAutocomplete ol li i.fa-trash{position:relative;top:2px;right:3px}.InputfieldPageAutocomplete ol li.itemTemplate{display:none !important}.InputfieldPageAutocomplete input[type=text]{width:100%;padding-left:18px}.InputfieldPageAutocomplete p{position:relative;margin-bottom:0}.InputfieldPageAutocomplete p i.fa{position:absolute;top:.5em;left:1px;opacity:.5}.InputfieldPageAutocomplete p i.fa.InputfieldPageAutocompleteRemove{left:auto;right:3px;cursor:pointer}.InputfieldPageAutocomplete p i.fa.InputfieldPageAutocompleteRemove:hover{opacity:1}.InputfieldPageAutocomplete .InputfieldPageAdd{display:none}.ui-autocomplete{max-height:230px;overflow-y:auto;overflow-x:hidden;box-shadow:0 1px 2px 2px rgba(0,0,0,.2)}.InputfieldPageAutocompleteNote{display:none}
+.pw-content .InputfieldPageAutocomplete p{margin:0}.pw-content .InputfieldPageAutocomplete ol{margin:0;list-style:none}.pw-content .InputfieldPageAutocomplete ol li{position:relative;margin:0 0 1px 0;padding-left:0;list-style:none;width:100%;line-height:1em;display:block;cursor:move}.pw-content .InputfieldPageAutocomplete ol li .itemSort{display:inline;float:left;margin-right:7px;position:relative;top:3px;left:3px;opacity:.7}.pw-content .InputfieldPageAutocomplete ol li:last-child{margin-bottom:.5em}.pw-content .InputfieldPageAutocomplete input.no_list{padding-right:22px}.InputfieldPageAutocomplete ol li .itemLabel{display:block;padding:3px 0 3px 5px;cursor:move}.InputfieldPageAutocomplete ol li .itemRemove{position:absolute;right:3px;top:0}.InputfieldPageAutocomplete ol li .itemValue{display:none}.InputfieldPageAutocomplete ol li i.fa-trash{position:relative;top:2px;right:3px}.InputfieldPageAutocomplete ol li.itemTemplate{display:none !important}.InputfieldPageAutocomplete input[type=text]{width:100%;padding-left:18px}.InputfieldPageAutocomplete p{position:relative;margin-bottom:0}.InputfieldPageAutocomplete p i.fa{position:absolute;top:.5em;left:1px;opacity:.5}.InputfieldPageAutocomplete p i.fa.InputfieldPageAutocompleteRemove{left:auto;right:3px;cursor:pointer}.InputfieldPageAutocomplete p i.fa.InputfieldPageAutocompleteRemove:hover{opacity:1}.InputfieldPageAutocomplete .InputfieldPageAdd{display:none}.ui-autocomplete{max-height:230px;overflow-y:auto;overflow-x:hidden;box-shadow:0 1px 2px 2px rgba(0,0,0,.2)}.InputfieldPageAutocompleteNote{display:none}

wire/modules/Inputfield/InputfieldPageAutocomplete/InputfieldPageAutocomplete.js

@@ -25,22 +25,6 @@ var InputfieldPageAutocomplete = {
 		var disableChars = $input.attr('data-disablechars'); 
 		var noList = $input.hasClass('no_list');
 		
-		function setIconPosition($icon, side) {
-			var iconHeight = $icon.height();
-			if(iconHeight) {
-				var pHeight = $icon.parent().height();
-				var iconTop = ((pHeight - iconHeight) / 2);
-				$icon.css('top', iconTop + 'px');
-				if(side == 'left') {
-					$icon.css('left', (iconTop / 2) + 'px');
-				} else if(side == 'right') {
-					$icon.css('right', (iconTop / 4) + 'px');
-				}
-			} else {
-				// icon is not visible (in a tab or collapsed field), we'll leave it alone
-			}	
-		}
-	
 		function hasDisableChar(str) {
 			if(!disableChars || !disableChars.length) return false;
 			var disable = false;
@@ -53,14 +37,14 @@ var InputfieldPageAutocomplete = {
 			return disable;
 		}
 		
-		setIconPosition($icon, 'left');
+		InputfieldPageAutocomplete.setIconPosition($icon, 'left');
 		
 		if(noList) {
 			// specific to single-item autocompletes, where there is no separate "selected" list
 			
 			$input.attr('data-selectedLabel', $input.val());
 			var $remove = $input.siblings('.InputfieldPageAutocompleteRemove');
-			setIconPosition($remove, 'right');
+			InputfieldPageAutocomplete.setIconPosition($remove, 'right');
 			
 			$remove.click(function() {
 				$value.val('').change();
@@ -289,6 +273,28 @@ var InputfieldPageAutocomplete = {
 		$a.addClass('InputfieldPageAutocompleteInit');
 	},
 
+	/**
+	 * Set position of icon within parent element
+	 * 
+	 * @param $icon
+	 * @param side Either 'left' or 'right'
+	 * 
+	 */
+	setIconPosition: function($icon, side) {
+		var iconHeight = $icon.height();
+		if(iconHeight) {
+			var pHeight = $icon.parent().height();
+			var iconTop = ((pHeight - iconHeight) / 2);
+			$icon.css('top', iconTop + 'px');
+			if(side == 'left') {
+				$icon.css('left', (iconTop / 2) + 'px');
+			} else if(side == 'right') {
+				$icon.css('right', (iconTop / 4) + 'px');
+			}
+		} else {
+			// icon is not visible (in a tab or collapsed field), we'll leave it alone
+		}
+	},
 
 	/**
 	 * Callback function executed when a page is selected from PageList
@@ -379,6 +385,14 @@ $(document).ready(function() {
 		InputfieldPageAutocomplete.rebuildInput($ol); 
 		return false; 
 	});
+	
+	$(document).on('wiretabclick', function(a, $tab) {
+		// update positions of icons that previously were not calculable
+		var $icon = $tab.find('.InputfieldPageAutocompleteStatus');
+		InputfieldPageAutocomplete.setIconPosition($icon, 'left');
+		$icon = $tab.find('.InputfieldPageAutocompleteRemove');
+		InputfieldPageAutocomplete.setIconPosition($icon, 'right');
+	});
 }); 
 
 

wire/modules/Inputfield/InputfieldPageAutocomplete/InputfieldPageAutocomplete.module

@@ -5,7 +5,7 @@
  *
  * This Inputfield connects the jQuery UI Autocomplete widget with the ProcessWire ProcessPageSearch AJAX API.
  *
- * ProcessWire 3.x, Copyright 2016 by Ryan Cramer
+ * ProcessWire 3.x, Copyright 2019 by Ryan Cramer
  * https://processwire.com
  * 
  * @property int $parent_id Limit results to this parent, or if combined with findPagesSelector, the search is performed as $pages->get($parent_id)->find() rather than $pages->find().
@@ -108,7 +108,7 @@ class InputfieldPageAutocomplete extends Inputfield implements InputfieldHasArra
 		$label = $this->wire('sanitizer')->entities($label);
 		$out = 	
 			"<li class='ui-state-default$class'>" . 
-			"<i class='fa fa-sort fa-fw'></i> " . 
+			"<i class='itemSort fa fa-arrows fa-fw'></i> " . 
 			"<span class='itemValue'>$value</span>" . 
 			"<span class='itemLabel'>$label</span> " . 
 			"<a class='itemRemove' href='#'><i class='fa fa-trash'></i></a>" . 

wire/modules/Inputfield/InputfieldPageAutocomplete/InputfieldPageAutocomplete.scss

@@ -18,7 +18,7 @@
 			display: block;
 			cursor: move;
 			
-			i.fa-sort {
+			.itemSort {
 				display: inline;
 				float: left;
 				margin-right: 7px;
@@ -27,12 +27,6 @@
 				left: 3px;
 				opacity: 0.7; 
 			}
-
-			.ui-icon-arrowthick-2-n-s {
-				float: left;
-				margin-top: 1px;
-			}
-			
 		}
 		li:last-child {
 			margin-bottom: 0.5em;