fix(Search): reset the input field when clicking on dismiss button

components/core/Filter/index.js

@@ -5,6 +5,8 @@ import * as Search from "~/components/core/Search";
 import * as Filters from "~/components/core/Filter/Filters";
 import * as Constants from "~/common/constants";
 
+import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
+
 import { css } from "@emotion/react";
 import { Provider } from "~/components/core/Filter/Provider";
 import { Sidebar, SidebarTrigger } from "~/components/core/Filter/Sidebar";
@@ -149,7 +151,12 @@ export default function Filter({
 
   if (disabled) {
     return showSearchResult ? (
-      <Search.Content viewer={viewer} page={page} onAction={onAction} isMobile={isMobile} />
+      <WebsitePrototypeWrapper
+        title={`${page.pageTitle} • Slate`}
+        url={`${Constants.hostname}${page.pathname}`}
+      >
+        <Search.Content viewer={viewer} page={page} onAction={onAction} isMobile={isMobile} />
+      </WebsitePrototypeWrapper>
     ) : (
       children
     );
@@ -212,7 +219,12 @@ export default function Filter({
         />
         <div style={{ flexGrow: 1 }}>
           {showSearchResult ? (
-            <Search.Content viewer={viewer} page={page} onAction={onAction} isMobile={isMobile} />
+            <WebsitePrototypeWrapper
+              title={`${page.pageTitle} • Slate`}
+              url={`${Constants.hostname}${page.pathname}`}
+            >
+              <Search.Content viewer={viewer} page={page} onAction={onAction} isMobile={isMobile} />
+            </WebsitePrototypeWrapper>
           ) : (
             children
           )}

components/core/Search/index.js

@@ -8,6 +8,7 @@ import { Input as InputPrimitive } from "~/components/system/components/Input";
 import { useSearchStore } from "~/components/core/Search/store";
 import { FileTypeGroup } from "~/components/core/FileTypeIcon";
 import { Link } from "~/components/core/Link";
+import { useIsomorphicLayoutEffect } from "~/common/hooks";
 
 import DataView from "~/components/core/DataView";
 import CollectionPreviewBlock from "~/components/core/CollectionPreviewBlock";
@@ -126,6 +127,12 @@ function Input({ viewer, data, page, onAction }) {
 
   const handleChange = useDebouncedOnChange({ setQuery, handleSearch });
 
+  // NOTE(amine): cleanup input's value when query is empty.
+  const inputRef = React.useRef();
+  useIsomorphicLayoutEffect(() => {
+    if (!query && inputRef.current) inputRef.current.value = "";
+  }, [query]);
+
   return (
     <div
       style={{
@@ -140,6 +147,7 @@ function Input({ viewer, data, page, onAction }) {
       }}
     >
       <InputPrimitive
+        ref={inputRef}
         full
         containerStyle={{ height: "100%" }}
         inputCss={STYLES_SEARCH_COMPONENT}

components/system/components/Input.js

@@ -5,7 +5,7 @@ import * as Strings from "~/common/strings";
 
 import { css } from "@emotion/react";
 import { DescriptionGroup } from "~/components/system/components/fragments/DescriptionGroup";
-import { FocusRing } from "~/components/core/FocusRing";
+import { mergeRefs } from "~/common/utilities";
 
 const INPUT_STYLES = (theme) => css`
   box-sizing: border-box;
@@ -130,21 +130,25 @@ const INPUT_COLOR_MAP = {
 
 class InputPrimitive extends React.Component {
   _unit;
-  _input;
   _isPin = this.props.type === "pin";
 
+  constructor(props) {
+    super(props);
+    this._input = React.createRef();
+  }
+
   componentDidMount = () => {
     if (this.props.unit) {
-      this._input.style.paddingRight = `${this._unit.offsetWidth + 48}px`;
+      this._input.current.style.paddingRight = `${this._unit.offsetWidth + 48}px`;
     }
 
     if (this.props.autoFocus) {
-      this._input.focus();
+      this._input.current.focus();
     }
   };
 
   _handleCopy = (e) => {
-    this._input.select();
+    this._input.current.select();
     document.execCommand("copy");
   };
 
@@ -240,12 +244,7 @@ class InputPrimitive extends React.Component {
             }}
           >
             <input
-              ref={(c) => {
-                this._input = c;
-                if (this.props.innerRef) {
-                  this.props.innerRef?.(c);
-                }
-              }}
+              ref={mergeRefs([this._input, this.props.innerRef])}
               css={[INPUT_STYLES, this._isPin && STYLES_PIN_INPUT]}
               autoFocus={this.props.autoFocus}
               value={this._isPin ? this._formatPin(this.props.value) : this.props.value}
@@ -256,7 +255,7 @@ class InputPrimitive extends React.Component {
               onFocus={
                 this.props.autoHighlight
                   ? () => {
-                      this._input.select();
+                      this._input.current.select();
                     }
                   : this.props.onFocus
               }

scenes/SceneSlate.js

@@ -68,7 +68,7 @@ const STYLES_SECURITY_LOCK_WRAPPER = (theme) => css`
 `;
 
 const STYLES_EMPTY_STATE_WRAPPER = (theme) => css`
-  // NOTE(amine): 100vh - headers' height - Dataviewer's bottom padding
+  // NOTE(amine): 100vh - headers' height - Dataview's bottom padding
   height: calc(100vh - ${theme.sizes.filterNavbar + theme.sizes.header}px - 44px);
   margin: 20px;
   @media (max-width: ${theme.sizes.mobile}px) {