HierarchicalTermSelector: Use TextControl component (#33545)

* Update selector in e2e tests
WordPress · Jul 20, 2021 · 3c84158 · 3c84158
1 parent 3b8d568
commit 3c84158
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 36 deletions.
diff --git a/packages/e2e-tests/specs/editor/various/taxonomies.test.js b/packages/e2e-tests/specs/editor/various/taxonomies.test.js
@@ -87,7 +87,7 @@ describe( 'Taxonomies', () => {
 
 		// Type the category name in the field.
 		await page.type(
-			'.editor-post-taxonomies__hierarchical-terms-input[type=text]',
+			'.editor-post-taxonomies__hierarchical-terms-input input[type=text]',
 			'z rand category 1'
 		);
 

diff --git a/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js b/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js
@@ -17,6 +17,7 @@ import { __, _x, _n, sprintf } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
 import {
 	CheckboxControl,
+	TextControl,
 	TreeSelect,
 	withSpokenMessages,
 	withFilters,
@@ -79,10 +80,8 @@ class HierarchicalTermSelector extends Component {
 		onUpdateTerms( newTerms, taxonomy.rest_base );
 	}
 
-	onChangeFormName( event ) {
-		const newValue =
-			event.target.value.trim() === '' ? '' : event.target.value;
-		this.setState( { formName: newValue } );
+	onChangeFormName( value ) {
+		this.setState( { formName: value } );
 	}
 
 	onChangeFormParent( newParent ) {
@@ -299,9 +298,8 @@ class HierarchicalTermSelector extends Component {
 		return termsTree;
 	}
 
-	setFilterValue( event ) {
+	setFilterValue( filterValue ) {
 		const { availableTermsTree } = this.state;
-		const filterValue = event.target.value;
 		const filteredTermsTree = availableTermsTree
 			.map( this.getFilterMatcher( filterValue ) )
 			.filter( ( term ) => term );
@@ -393,13 +391,7 @@ class HierarchicalTermSelector extends Component {
 	}
 
 	render() {
-		const {
-			slug,
-			taxonomy,
-			instanceId,
-			hasCreateAction,
-			hasAssignAction,
-		} = this.props;
+		const { slug, taxonomy, hasCreateAction, hasAssignAction } = this.props;
 
 		if ( ! hasAssignAction ) {
 			return null;
@@ -442,8 +434,6 @@ class HierarchicalTermSelector extends Component {
 		);
 		const noParentOption = `— ${ parentSelectLabel } —`;
 		const newTermSubmitLabel = newTermButtonLabel;
-		const inputId = `editor-post-taxonomies__hierarchical-terms-input-${ instanceId }`;
-		const filterInputId = `editor-post-taxonomies__hierarchical-terms-filter-${ instanceId }`;
 		const filterLabel = get(
 			this.props.taxonomy,
 			[ 'labels', 'search_items' ],
@@ -458,18 +448,12 @@ class HierarchicalTermSelector extends Component {
 
 		return [
 			showFilter && (
-				<label key="filter-label" htmlFor={ filterInputId }>
-					{ filterLabel }
-				</label>
-			),
-			showFilter && (
-				<input
-					type="search"
-					id={ filterInputId }
+				<TextControl
+					key="term-filter-input"
+					className="editor-post-taxonomies__hierarchical-terms-filter"
+					label={ filterLabel }
 					value={ filterValue }
 					onChange={ this.setFilterValue }
-					className="editor-post-taxonomies__hierarchical-terms-filter"
-					key="term-filter-input"
 				/>
 			),
 			<div
@@ -496,16 +480,9 @@ class HierarchicalTermSelector extends Component {
 			),
 			showForm && (
 				<form onSubmit={ this.onAddTerm } key="hierarchical-terms-form">
-					<label
-						htmlFor={ inputId }
-						className="editor-post-taxonomies__hierarchical-terms-label"
-					>
-						{ newTermLabel }
-					</label>
-					<input
-						type="text"
-						id={ inputId }
+					<TextControl
 						className="editor-post-taxonomies__hierarchical-terms-input"
+						label={ newTermLabel }
 						value={ formName }
 						onChange={ this.onChangeFormName }
 						required

diff --git a/packages/editor/src/components/post-taxonomies/style.scss b/packages/editor/src/components/post-taxonomies/style.scss
@@ -30,7 +30,6 @@
 
 .editor-post-taxonomies__hierarchical-terms-input {
 	margin-top: 8px;
-	width: 100%;
 }
 .editor-post-taxonomies__hierarchical-terms-filter {
 	margin-bottom: 8px;