From 542637edb24b5e5e1eebdec9f8b7269d70fea32f Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Tue, 12 Apr 2022 13:17:56 -0700
Subject: [PATCH] Global search improvement.

---
 .../global-search/global-search.component.jsx       | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/client/src/components/global-search/global-search.component.jsx b/client/src/components/global-search/global-search.component.jsx
index 76c664b0a..147ea3f20 100644
--- a/client/src/components/global-search/global-search.component.jsx
+++ b/client/src/components/global-search/global-search.component.jsx
@@ -1,9 +1,10 @@
 import { useLazyQuery } from "@apollo/client";
+import { LoadingOutlined } from "@ant-design/icons";
 import { AutoComplete, Divider, Space } from "antd";
 import _ from "lodash";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
+import { Link, useHistory } from "react-router-dom";
 import { GLOBAL_SEARCH_QUERY } from "../../graphql/search.queries";
 import PhoneNumberFormatter from "../../utils/PhoneFormatter";
 import AlertComponent from "../alert/alert.component";
@@ -12,8 +13,9 @@ import OwnerNameDisplay, {
 } from "../owner-name-display/owner-name-display.component";
 export default function GlobalSearch() {
   const { t } = useTranslation();
-
-  const [callSearch, { error, data }] = useLazyQuery(GLOBAL_SEARCH_QUERY);
+  const history = useHistory();
+  const [callSearch, { loading, error, data }] =
+    useLazyQuery(GLOBAL_SEARCH_QUERY);
 
   const executeSearch = (v) => {
     if (v && v.variables.search && v.variables.search !== "") callSearch(v);
@@ -171,8 +173,13 @@ export default function GlobalSearch() {
     <AutoComplete
       options={options}
       onSearch={handleSearch}
+      suffixIcon={loading && <LoadingOutlined spin />}
+      defaultActiveFirstOption
       placeholder={t("general.labels.globalsearch")}
       allowClear
+      onSelect={(val, opt) => {
+        history.push(opt.label.props.to);
+      }}
     ></AutoComplete>
   );
 }