Replace wp_dropdown_users with AJAX-powered user search

admin/admin.php

@@ -68,6 +68,8 @@ public function __construct() {
 
 		\add_action( 'admin_enqueue_scripts', [ $this, 'enqueue_discussion_settings_script' ] );
 
+		\add_action( 'wp_ajax_ch_search_users', [ $this, 'ajax_search_users' ] );
+
 		new Comment_Parent();
 	}
 
@@ -240,17 +242,71 @@ public function register_meta_boxes(): void {
 	 * @return void
 	 */
 	public function meta_box_callback( $post ): void {
+		$selected_id   = (int) \get_post_meta( $post->ID, self::NOTIFICATION_RECIPIENT_KEY, true );
+		$selected_name = '';
+
+		if ( $selected_id > 0 ) {
+			$user = \get_userdata( $selected_id );
+			if ( $user ) {
+				$selected_name = $user->display_name;
+			}
+		}
+
 		?>
 		<input
 			type="hidden"
 			name="comment_notification_recipient_nonce"
 			value="<?php echo \esc_attr( \wp_create_nonce( 'comment_notification_recipient_nonce' ) ); ?>"
 		/>
-		<label for="comment_notification_recipient">
+		<label for="comment_notification_recipient_search">
 			<?php \esc_html_e( 'Comment notification recipients:', 'yoast-comment-hacks' ); ?>
 		</label>
 		<br/>
+		<input
+			type="hidden"
+			name="comment_notification_recipient"
+			id="comment_notification_recipient"
+			value="<?php echo \esc_attr( (string) $selected_id ); ?>"
+		/>
+		<input
+			type="text"
+			id="comment_notification_recipient_search"
+			value="<?php echo \esc_attr( $selected_name ); ?>"
+			placeholder="<?php \esc_attr_e( 'Search for a user...', 'yoast-comment-hacks' ); ?>"
+			class="widefat"
+			autocomplete="off"
+		/>
+		<ul id="comment_notification_recipient_results" style="display:none;margin:0;padding:0;list-style:none;border:1px solid #ddd;background:#fff;max-height:150px;overflow-y:auto;"></ul>
+		<?php if ( $selected_id > 0 ) : ?>
+		<a href="#" id="comment_notification_recipient_clear" style="display:inline;">
+			<?php \esc_html_e( 'Reset to post author', 'yoast-comment-hacks' ); ?>
+		</a>
+		<?php else : ?>
+		<a href="#" id="comment_notification_recipient_clear" style="display:none;">
+			<?php \esc_html_e( 'Reset to post author', 'yoast-comment-hacks' ); ?>
+		</a>
+		<?php endif; ?>
+		<p class="description"><?php \esc_html_e( 'Leave empty to use post author.', 'yoast-comment-hacks' ); ?></p>
 		<?php
+	}
+
+	/**
+	 * AJAX handler for searching users.
+	 *
+	 * @return void
+	 */
+	public function ajax_search_users(): void {
+		\check_ajax_referer( 'ch_search_users_nonce', 'nonce' );
+
+		if ( ! \current_user_can( 'edit_posts' ) ) {
+			\wp_send_json_error( 'Unauthorized' );
+		}
+
+		$search = isset( $_GET['search'] ) ? \sanitize_text_field( \wp_unslash( $_GET['search'] ) ) : '';
+
+		if ( \strlen( $search ) < 2 ) {
+			\wp_send_json_success( [] );
+		}
 
 		/**
 		 * This filter allows filtering which roles should be shown in the dropdown for notifications.
@@ -265,16 +321,25 @@ public function meta_box_callback( $post ): void {
 			[ 'contributor', 'author', 'editor', 'administrator', 'super-admin' ]
 		);
 
-		\wp_dropdown_users(
+		$users = \get_users(
 			[
-				'selected'          => \get_post_meta( $post->ID, self::NOTIFICATION_RECIPIENT_KEY, true ),
-				'show_option_none'  => 'Post author',
-				'name'              => 'comment_notification_recipient',
-				'id'                => 'comment_notification_recipient',
-				'role__in'          => $roles,
-				'option_none_value' => 0,
+				'search'   => '*' . $search . '*',
+				'role__in' => $roles,
+				'number'   => 20,
+				'orderby'  => 'display_name',
+				'order'    => 'ASC',
 			]
 		);
+
+		$results = [];
+		foreach ( $users as $user ) {
+			$results[] = [
+				'id'   => $user->ID,
+				'name' => $user->display_name,
+			];
+		}
+
+		\wp_send_json_success( $results );
 	}
 
 	/**
@@ -297,9 +362,11 @@ public function init(): void {
 	/**
 	 * Enqueue our admin script.
 	 *
+	 * @param string $hook_suffix The current admin page.
+	 *
 	 * @return void
 	 */
-	public function enqueue(): void {
+	public function enqueue( $hook_suffix ): void {
 		$page = \filter_input( \INPUT_GET, 'page' );
 
 		if ( $page === 'comment-experience' ) {
@@ -318,6 +385,30 @@ public function enqueue(): void {
 				true
 			);
 		}
+
+		if ( $hook_suffix === 'post.php' || $hook_suffix === 'post-new.php' ) {
+			\wp_enqueue_script(
+				'emiliaprojects-comment-hacks-user-search',
+				\plugins_url( 'admin/assets/js/user-search.js', \EMILIA_COMMENT_HACKS_FILE ),
+				[ 'jquery' ],
+				\EMILIA_COMMENT_HACKS_VERSION,
+				true
+			);
+
+			\wp_localize_script(
+				'emiliaprojects-comment-hacks-user-search',
+				'chUserSearch',
+				[
+					'ajax_url' => \admin_url( 'admin-ajax.php' ),
+					'nonce'    => \wp_create_nonce( 'ch_search_users_nonce' ),
+				]
+			);
+
+			\wp_add_inline_style(
+				'wp-admin',
+				'#comment_notification_recipient_results li { padding: 5px; margin: 0; cursor: pointer; } #comment_notification_recipient_results li:hover { background: #f0f0f1; }'
+			);
+		}
 	}
 
 	/**

admin/assets/js/user-search.js

@@ -0,0 +1,75 @@
+/* global chUserSearch */
+
+jQuery( document ).ready( function( $ ) {
+	var $search = $( "#comment_notification_recipient_search" );
+	var $hidden = $( "#comment_notification_recipient" );
+	var $results = $( "#comment_notification_recipient_results" );
+	var $clear = $( "#comment_notification_recipient_clear" );
+	var searchTimer = null;
+
+	$search.on( "input", function() {
+		clearTimeout( searchTimer );
+		var query = $search.val();
+
+		if ( query.length < 2 ) {
+			$results.empty().hide();
+			return;
+		}
+
+		searchTimer = setTimeout( function() {
+			$.ajax( {
+				url: chUserSearch.ajax_url,
+				type: "GET",
+				data: {
+					action: "ch_search_users",
+					search: query,
+					nonce: chUserSearch.nonce,
+				},
+				/**
+				 * Handle the AJAX response.
+				 *
+				 * @param {Object} response The response object.
+				 * @param {boolean} response.success Indicates if the request was successful.
+				 * @param {Array} response.data The response data.
+				 *
+				 * @returns {void}
+				 */
+				success: function( response ) {
+					if ( response.success && response.data.length ) {
+						$results.empty();
+						$.each( response.data, function( i, user ) {
+							$results.append(
+								$( "<li>" )
+									.text( user.name )
+									.attr( "data-id", user.id )
+									.on( "click", function() {
+										$hidden.val( user.id );
+										$search.val( user.name );
+										$results.empty().hide();
+										$clear.show();
+									} )
+							);
+						} );
+						$results.show();
+					} else {
+						$results.empty().hide();
+					}
+				},
+			} );
+		}, 300 );
+	} );
+
+	$clear.on( "click", function( e ) {
+		e.preventDefault();
+		$hidden.val( "0" );
+		$search.val( "" );
+		$clear.hide();
+	} );
+
+	// Hide results when clicking outside.
+	$( document ).on( "click", function( e ) {
+		if ( ! $( e.target ).closest( "#comment_notification_recipient_search, #comment_notification_recipient_results" ).length ) {
+			$results.hide();
+		}
+	} );
+} );