Search: Prevent IE11 from spawning overlay on load (#19141)

Automattic · Mar 12, 2021 · 5037c8b · 5037c8b
1 parent 67c4391
commit 5037c8b
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/projects/plugins/jetpack/changelog/fix-search-ie11-modal-summon b/projects/plugins/jetpack/changelog/fix-search-ie11-modal-summon
@@ -0,0 +1,4 @@
+Significance: minor
+Type: bugfix
+
+Instant Search:  Prevent IE11 from spawning overlay on load.
diff --git a/projects/plugins/jetpack/modules/search/instant-search/components/search-app.jsx b/projects/plugins/jetpack/modules/search/instant-search/components/search-app.jsx
@@ -51,7 +51,7 @@ class SearchApp extends Component {
 		this.input = createRef();
 		this.state = {
 			overlayOptions: { ...this.props.initialOverlayOptions },
-			showResults: this.props.initialShowResults,
+			showResults: !! this.props.initialShowResults, // initialShowResults can be undefined
 		};
 		this.getResults = debounce( this.getResults, 200 );
 		this.props.initializeQueryValues();

diff --git a/projects/plugins/jetpack/modules/search/instant-search/components/search-box.jsx b/projects/plugins/jetpack/modules/search/instant-search/components/search-box.jsx
@@ -50,7 +50,9 @@ const SearchBox = props => {
 						id={ inputId }
 						className="search-field jetpack-instant-search__box-input"
 						inputmode="search"
-						onInput={ props.onChange }
+						// IE11 will immediately fire an onChange event when the placeholder contains a unicode character.
+						// Ensure that the search application is visible before invoking the onChange callback to guard against this.
+						onChange={ props.isVisible ? props.onChange : null }
 						ref={ inputRef }
 						placeholder={ __( 'Search…', 'jetpack' ) }
 						type="search"