From efbc428daabdbe002efc59fdc9a0995beeed5c41 Mon Sep 17 00:00:00 2001
From: navaneeth <navaneethpk@outlook.com>
Date: Tue, 1 Jun 2021 13:39:17 +0530
Subject: [PATCH] Global search of table should be triggered only on enter

---
 frontend/src/Editor/Components/Table/Table.jsx | 12 ++++++++++--
 frontend/src/Editor/Components/components.js   |  8 ++++----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx
index 8f9d1bad83..864fb63d0a 100644
--- a/frontend/src/Editor/Components/Table/Table.jsx
+++ b/frontend/src/Editor/Components/Table/Table.jsx
@@ -457,11 +457,19 @@ export function Table({
       <div className="ms-2 d-inline-block">
         Search:{' '}
         <input
-          value={value || ''}
-          onChange={(e) => {
+          defaultValue={value || ''}
+          onBlur={(e) => {
             setValue(e.target.value);
             onChange(e.target.value);
           }}
+          onKeyDown={(e) => {
+            if(e.key === 'Enter') {
+              setValue(e.target.value);
+              onChange(e.target.value);
+            }
+          }
+
+          }
           placeholder={`${count} records`}
           style={{
             border: '0'
diff --git a/frontend/src/Editor/Components/components.js b/frontend/src/Editor/Components/components.js
index e86fb01f75..7f44359f43 100644
--- a/frontend/src/Editor/Components/components.js
+++ b/frontend/src/Editor/Components/components.js
@@ -9,9 +9,9 @@ export const componentTypes = [
       data: { type: 'code', displayName: 'Table data' },
       loadingState: { type: 'code', displayName: 'Loading state' },
       columns: { type: 'array', displayName: 'Table Columns' },
-      serverSidePagination: { type: 'toggle', displayName: 'Server Side Pagination'},
-      actionButtonBackgroundColor: { type: 'color', displayName: 'Background Color'},
-      actionButtonTextColor: { type: 'color', displayName: 'Text Color'}
+      serverSidePagination: { type: 'toggle', displayName: 'Server-side pagination'},
+      actionButtonBackgroundColor: { type: 'color', displayName: 'Background color'},
+      actionButtonTextColor: { type: 'color', displayName: 'Text color'}
     },
     defaultSize: {
       width: 810,
@@ -20,7 +20,7 @@ export const componentTypes = [
     events: {
       onRowClicked: { displayName: 'On row clicked'},
       onBulkUpdate: { displayName: 'Bulk update query'},
-      onPageChanged: { displayName: 'On page changed query'}
+      onPageChanged: { displayName: 'On page changed'}
     },
     styles: {
       textColor: { type: 'color', displayName: 'Text Color' }