diff --git a/modules/search/class.jetpack-search-template-tags.php b/modules/search/class.jetpack-search-template-tags.php
index 303e6caa66d7c..e46643027b535 100644
--- a/modules/search/class.jetpack-search-template-tags.php
+++ b/modules/search/class.jetpack-search-template-tags.php
@@ -174,6 +174,22 @@ public static function render_widget_search_form( $post_types, $orderby, $order
$form = self::inject_hidden_form_fields( $form, $fields_to_inject );
+ // Temporarily add some dummy filters to demonstrate filter behaviour.
+ $form .= '
';
+
+ $form .= '';
+
echo '';
echo $form;
echo '
';
diff --git a/modules/search/instant-search/components/overlay.scss b/modules/search/instant-search/components/overlay.scss
index 02b1d7588acc9..d8b9edf5ece38 100644
--- a/modules/search/instant-search/components/overlay.scss
+++ b/modules/search/instant-search/components/overlay.scss
@@ -11,9 +11,10 @@
overflow-y: auto;
overflow-x: hidden;
z-index: 9999999999999;
+ animation-fill-mode: forwards;
&.is-hidden {
- transform: translateY( -100vh );
+ transform: translateX( 100vw );
}
}
diff --git a/modules/search/instant-search/components/search-app.jsx b/modules/search/instant-search/components/search-app.jsx
index 148172bc4f404..6050c99c78c80 100644
--- a/modules/search/instant-search/components/search-app.jsx
+++ b/modules/search/instant-search/components/search-app.jsx
@@ -73,6 +73,10 @@ class SearchApp extends Component {
document.querySelectorAll( this.props.themeOptions.searchSortSelector ).forEach( select => {
select.addEventListener( 'change', this.handleSortChange );
} );
+
+ document.querySelectorAll( this.props.themeOptions.filterInputSelector ).forEach( element => {
+ element.addEventListener( 'click', this.handleFilterInputClick );
+ } );
}
removeEventListeners() {
@@ -87,6 +91,10 @@ class SearchApp extends Component {
document.querySelectorAll( this.props.themeOptions.searchSortSelector ).forEach( select => {
select.removeEventListener( 'change', this.handleSortChange );
} );
+
+ document.querySelectorAll( this.props.themeOptions.filterInputSelector ).forEach( element => {
+ element.removeEventListener( 'click', this.handleFilterInputClick );
+ } );
}
hasActiveQuery() {
@@ -110,6 +118,10 @@ class SearchApp extends Component {
setSortQuery( getSortKeyFromSortOption( event.target.value ) );
};
+ handleFilterInputClick = () => {
+ this.showResults();
+ };
+
showResults = () => this.setState( { showResults: true } );
hideResults = () => this.setState( { showResults: false } );
diff --git a/modules/search/instant-search/instant-search.scss b/modules/search/instant-search/instant-search.scss
index 450fcfd98171f..d51fa02370352 100644
--- a/modules/search/instant-search/instant-search.scss
+++ b/modules/search/instant-search/instant-search.scss
@@ -21,3 +21,13 @@ $grid-size-large: 16px;
.jetpack-instant-search__is-loading {
opacity: 0.2;
}
+
+// Temporary test styles
+.jetpack-search-form__test-filter-checkbox {
+ display: none;
+}
+
+.jetpack-search-form__test-filter-label:hover {
+ text-decoration: underline;
+ cursor: pointer;
+}
diff --git a/modules/search/instant-search/lib/dom.js b/modules/search/instant-search/lib/dom.js
index 16eed476b119c..bfb9ae604314b 100644
--- a/modules/search/instant-search/lib/dom.js
+++ b/modules/search/instant-search/lib/dom.js
@@ -13,6 +13,10 @@ export function getThemeOptions( searchOptions ) {
'.jetpack-instant-search-wrapper input.search-field',
].join( ', ' ),
searchSortSelector: [ '.jetpack-search-sort' ],
+ filterInputSelector: [
+ '.jetpack-search-form__test-filter-checkbox',
+ '.jetpack-search-form__test-filter-label',
+ ],
};
return searchOptions.theme_options ? { ...options, ...searchOptions.theme_options } : options;
}