Remove buggy navbar search. Fixes #921 (#950)

src/assets/css/main.css

@@ -305,16 +305,6 @@ pre {
   transition: width 0.2s ease-out 0s !important;
 }
 
-.show-input {
-  width: 13vw !important;
-}
-.hide-input {
-  background: transparent !important;
-  background-color: transparent !important;
-  width: 0px !important;
-  padding: 0 !important;
-}
-
 br.big {
   display: block;
   content: "";

src/shared/components/app/navbar.tsx

@@ -1,4 +1,4 @@
-import { Component, createRef, linkEvent, RefObject } from "inferno";
+import { Component, linkEvent } from "inferno";
 import { NavLink } from "inferno-router";
 import {
   CommentResponse,
@@ -44,7 +44,6 @@ interface NavbarState {
   unreadReportCount: number;
   unreadApplicationCount: number;
   searchParam: string;
-  toggleSearch: boolean;
   showDropdown: boolean;
   onSiteBanner?(url: string): any;
 }
@@ -55,14 +54,12 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
   private unreadInboxCountSub: Subscription;
   private unreadReportCountSub: Subscription;
   private unreadApplicationCountSub: Subscription;
-  private searchTextField: RefObject<HTMLInputElement>;
   state: NavbarState = {
     unreadInboxCount: 0,
     unreadReportCount: 0,
     unreadApplicationCount: 0,
     expanded: false,
     searchParam: "",
-    toggleSearch: false,
     showDropdown: false,
   };
   subscription: any;
@@ -77,8 +74,6 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
   componentDidMount() {
     // Subscribe to jwt changes
     if (isBrowser()) {
-      this.searchTextField = createRef();
-
       // On the first load, check the unreads
       let auth = myAuth(false);
       if (auth && UserService.Instance.myUserInfo) {
@@ -123,7 +118,6 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
   updateUrl() {
     const searchParam = this.state.searchParam;
     this.setState({ searchParam: "" });
-    this.setState({ toggleSearch: false });
     this.setState({ showDropdown: false, expanded: false });
     if (searchParam === "") {
       this.context.router.history.push(`/search/`);
@@ -308,35 +302,13 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
             ) && (
               <ul className="navbar-nav">
                 <li className="nav-item">
-                  <form
+                  <NavLink
-                    className="form-inline mr-1"
+                    to="/search"
-                    onSubmit={linkEvent(this, this.handleSearchSubmit)}
+                    className="nav-link"
-                  >
+                    title={i18n.t("search")}
-                    <input
-                      id="search-input"
-                      className={`form-control mr-0 search-input ${
-                        this.state.toggleSearch ? "show-input" : "hide-input"
-                      }`}
-                      onInput={linkEvent(this, this.handleSearchParam)}
-                      value={this.state.searchParam}
-                      ref={this.searchTextField}
-                      disabled={!this.state.toggleSearch}
-                      type="text"
-                      placeholder={i18n.t("search")}
-                      onBlur={linkEvent(this, this.handleSearchBlur)}
-                    ></input>
-                    <label className="sr-only" htmlFor="search-input">
-                      {i18n.t("search")}
-                    </label>
-                    <button
-                      name="search-btn"
-                      onClick={linkEvent(this, this.handleSearchBtn)}
-                      className="px-1 btn btn-link nav-link"
-                      aria-label={i18n.t("search")}
                   >
                     <Icon icon="search" />
-                    </button>
+                  </NavLink>
-                  </form>
                 </li>
               </ul>
             )}
@@ -520,28 +492,6 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
     i.setState({ searchParam: event.target.value });
   }
 
-  handleSearchSubmit(i: Navbar, event: any) {
-    event.preventDefault();
-    i.updateUrl();
-  }
-
-  handleSearchBtn(i: Navbar, event: any) {
-    event.preventDefault();
-    i.setState({ toggleSearch: true });
-
-    i.searchTextField.current?.focus();
-    const offsetWidth = i.searchTextField.current?.offsetWidth;
-    if (i.state.searchParam && offsetWidth && offsetWidth > 100) {
-      i.updateUrl();
-    }
-  }
-
-  handleSearchBlur(i: Navbar, event: any) {
-    if (!(event.relatedTarget && event.relatedTarget.name !== "search-btn")) {
-      i.setState({ toggleSearch: false });
-    }
-  }
-
   handleLogoutClick(i: Navbar) {
     i.setState({ showDropdown: false, expanded: false });
     UserService.Instance.logout();

src/shared/components/search.tsx

@@ -75,7 +75,7 @@ if (isBrowser()) {
 }
 
 interface SearchProps {
-  q: string;
+  q?: string;
   type_: SearchType;
   sort: SortType;
   listingType: ListingType;
@@ -85,7 +85,7 @@ interface SearchProps {
 }
 
 interface SearchState {
-  q: string;
+  q?: string;
   type_: SearchType;
   sort: SortType;
   listingType: ListingType;
@@ -97,7 +97,7 @@ interface SearchState {
   creatorDetails?: GetPersonDetailsResponse;
   loading: boolean;
   siteRes: GetSiteResponse;
-  searchText: string;
+  searchText?: string;
   resolveObjectResponse?: ResolveObjectResponse;
 }
 
@@ -135,13 +135,13 @@ export class Search extends Component<any, SearchState> {
       this.props.match.params.community_id
     ),
     creatorId: Search.getCreatorIdFromProps(this.props.match.params.creator_id),
-    loading: true,
+    loading: false,
     siteRes: this.isoData.site_res,
     communities: [],
   };
 
-  static getSearchQueryFromProps(q: string): string {
+  static getSearchQueryFromProps(q?: string): string | undefined {
-    return decodeURIComponent(q) || "";
+    return q ? decodeURIComponent(q) : undefined;
   }
 
   static getSearchTypeFromProps(type_: string): SearchType {
@@ -219,9 +219,12 @@ export class Search extends Component<any, SearchState> {
       }
     } else {
       this.fetchCommunities();
+
+      if (this.state.q) {
         this.search();
       }
     }
+  }
 
   componentWillUnmount() {
     this.subscription?.unsubscribe();
@@ -298,8 +301,11 @@ export class Search extends Component<any, SearchState> {
       promises.push(Promise.resolve());
     }
 
+    let q = this.getSearchQueryFromProps(pathSplit[3]);
+
+    if (q) {
       let form: SearchForm = {
-      q: this.getSearchQueryFromProps(pathSplit[3]),
+        q,
         community_id,
         creator_id,
         type_: this.getSearchTypeFromProps(pathSplit[5]),
@@ -311,7 +317,7 @@ export class Search extends Component<any, SearchState> {
       };
 
       let resolveObjectForm: ResolveObject = {
-      q: this.getSearchQueryFromProps(pathSplit[3]),
+        q,
         auth: req.auth,
       };
 
@@ -322,6 +328,7 @@ export class Search extends Component<any, SearchState> {
         promises.push(Promise.resolve());
         promises.push(Promise.resolve());
       }
+    }
 
     return promises;
   }
@@ -336,6 +343,7 @@ export class Search extends Component<any, SearchState> {
       lastState.creatorId !== this.state.creatorId ||
       lastState.page !== this.state.page
     ) {
+      if (this.state.q) {
         this.setState({
           loading: true,
           searchText: this.state.q,
@@ -343,6 +351,7 @@ export class Search extends Component<any, SearchState> {
         this.search();
       }
     }
+  }
 
   get documentTitle(): string {
     let siteName = this.state.siteRes.site_view.site.name;
@@ -779,6 +788,7 @@ export class Search extends Component<any, SearchState> {
       this.state.creatorId == 0 ? undefined : this.state.creatorId;
 
     let auth = myAuth(false);
+    if (this.state.q && this.state.q != "") {
       let form: SearchForm = {
         q: this.state.q,
         community_id,
@@ -796,7 +806,6 @@ export class Search extends Component<any, SearchState> {
         auth,
       };
 
-    if (this.state.q != "") {
       this.setState({
         searchResponse: undefined,
         resolveObjectResponse: undefined,
@@ -919,7 +928,7 @@ export class Search extends Component<any, SearchState> {
 
   updateUrl(paramUpdates: UrlParams) {
     const qStr = paramUpdates.q || this.state.q;
-    const qStrEncoded = encodeURIComponent(qStr);
+    const qStrEncoded = encodeURIComponent(qStr || "");
     const typeStr = paramUpdates.type_ || this.state.type_;
     const listingTypeStr = paramUpdates.listingType || this.state.listingType;
     const sortStr = paramUpdates.sort || this.state.sort;