From 8ae79e3d33fd216124cc499b7b0eeffabbe644f5 Mon Sep 17 00:00:00 2001
From: Helen Hou-Sandi <helen@git.wordpress.org>
Date: Tue, 21 Apr 2015 14:14:27 +0000
Subject: [PATCH] Customizer: Better experience for widget filtering in desktop
 and iOS Safari.

Previously, the search field did not appear at all in desktop Safari, and the auto-focus keyboard fly-up in iOS rendered widget adding frustrating at best.

props dsmart, ocean90.
fixes #31987.


git-svn-id: https://develop.svn.wordpress.org/trunk@32243 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/customize-widgets.css         | 11 ++++++++++-
 src/wp-admin/js/customize-widgets.js           |  4 +++-
 src/wp-includes/class-wp-customize-widgets.php |  2 ++
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/wp-admin/css/customize-widgets.css b/src/wp-admin/css/customize-widgets.css
index 5d6c0bfed3..ba95022d7d 100644
--- a/src/wp-admin/css/customize-widgets.css
+++ b/src/wp-admin/css/customize-widgets.css
@@ -342,7 +342,7 @@ body.adding-widget .add-new-widget:before {
 #available-widgets {
 	position: absolute;
 	overflow: auto;
-	top: 46px;
+	top: 0;
 	bottom: 0;
 	left: -301px;
 	width: 300px;
@@ -354,6 +354,14 @@ body.adding-widget .add-new-widget:before {
 	border-right: 1px solid #dddddd;
 }
 
+#available-widgets-list {
+	top: 46px;
+	position: absolute;
+	overflow: auto;
+	bottom: 0;
+	width: 100%;
+}
+
 #available-widgets-filter {
 	position: fixed;
 	top: 0;
@@ -614,6 +622,7 @@ body.adding-widget #customize-preview {
 
 @media screen and ( max-width: 640px ) {
 	body.adding-widget div#available-widgets {
+		top: 46px;
 		left: 0;
 		z-index: 10;
 		width: 100%;
diff --git a/src/wp-admin/js/customize-widgets.js b/src/wp-admin/js/customize-widgets.js
index 20c695b621..729e6a8f1e 100644
--- a/src/wp-admin/js/customize-widgets.js
+++ b/src/wp-admin/js/customize-widgets.js
@@ -294,7 +294,9 @@
 			// Reset search
 			this.collection.doSearch( '' );
 
-			this.$search.focus();
+			if ( ! api.settings.browser.mobile ) {
+				this.$search.focus();
+			}
 		},
 
 		// Closes the panel
diff --git a/src/wp-includes/class-wp-customize-widgets.php b/src/wp-includes/class-wp-customize-widgets.php
index fe54d4cfd2..1a87581ebe 100644
--- a/src/wp-includes/class-wp-customize-widgets.php
+++ b/src/wp-includes/class-wp-customize-widgets.php
@@ -668,11 +668,13 @@ final class WP_Customize_Widgets {
 				<label class="screen-reader-text" for="widgets-search"><?php _e( 'Search Widgets' ); ?></label>
 				<input type="search" id="widgets-search" placeholder="<?php esc_attr_e( 'Search widgets&hellip;' ) ?>" />
 			</div>
+			<div id="available-widgets-list">
 			<?php foreach ( $this->get_available_widgets() as $available_widget ): ?>
 				<div id="widget-tpl-<?php echo esc_attr( $available_widget['id'] ) ?>" data-widget-id="<?php echo esc_attr( $available_widget['id'] ) ?>" class="widget-tpl <?php echo esc_attr( $available_widget['id'] ) ?>" tabindex="0">
 					<?php echo $available_widget['control_tpl']; ?>
 				</div>
 			<?php endforeach; ?>
+			</div><!-- #available-widgets-list -->
 		</div><!-- #available-widgets -->
 		</div><!-- #widgets-left -->
 		<?php