seach improvement

packages/web/src/widgets/DatabaseWidget.js

@@ -17,13 +17,13 @@ import {
 import {
   SearchBoxWrapper,
   WidgetsInnerContainer,
-  Input,
   WidgetsMainContainer,
   WidgetsOuterContainer,
   WidgetTitle,
 } from './WidgetStyles';
 import axios from '../utility/axios';
 import LoadingInfo from './LoadingInfo';
+import SearchInput from './SearchInput';
 
 function SubDatabaseList({ data }) {
   const setDb = useSetCurrentDatabase();
@@ -64,7 +64,7 @@ function ConnectionList() {
     <>
       <WidgetTitle>Connections</WidgetTitle>
       <SearchBoxWrapper>
-        <Input type="text" placeholder="Search connection" value={filter} onChange={(e) => setFilter(e.target.value)} />
+        <SearchInput placeholder="Search connection" filter={filter} setFilter={setFilter} />
         <InlineButton onClick={handleRefreshConnections}>Refresh</InlineButton>
       </SearchBoxWrapper>
 
@@ -98,12 +98,7 @@ function SqlObjectList({ conid, database }) {
     <>
       <WidgetTitle>Tables, views, functions</WidgetTitle>
       <SearchBoxWrapper>
-        <Input
-          type="text"
-          placeholder="Search tables or objects"
-          value={filter}
-          onChange={(e) => setFilter(e.target.value)}
-        />
+        <SearchInput placeholder="Search tables or objects" filter={filter} setFilter={setFilter} />
         <InlineButton onClick={handleRefreshDatabase}>Refresh</InlineButton>
       </SearchBoxWrapper>
       <WidgetsInnerContainer>

packages/web/src/widgets/FilesWidget.js

@@ -8,7 +8,6 @@ import openedTabAppObject from '../appobj/openedTabAppObject';
 import {
   SearchBoxWrapper,
   WidgetsInnerContainer,
-  Input,
   WidgetsMainContainer,
   WidgetsOuterContainer,
   WidgetTitle,

packages/web/src/widgets/SearchInput.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+import keycodes from '../utility/keycodes';
+
+const StyledInput = styled.input`
+  flex: 1;
+  min-width: 90px;
+`;
+
+export default function SearchInput({ placeholder, filter, setFilter }) {
+  const handleKeyDown = (ev) => {
+    if (ev.keyCode == keycodes.escape) {
+      setFilter('');
+    }
+  };
+  return (
+    <StyledInput
+      type="text"
+      placeholder={placeholder}
+      value={filter}
+      onChange={(e) => setFilter(e.target.value)}
+      onFocus={(e) => e.target.select()}
+      onKeyDown={handleKeyDown}
+    />
+  );
+}

packages/web/src/widgets/WidgetStyles.js

@@ -43,10 +43,10 @@ export function WidgetsInnerContainer({ children }) {
   return <StyledWidgetsInnerContainer leftPanelWidth={leftPanelWidth}>{children}</StyledWidgetsInnerContainer>;
 }
 
-export const Input = styled.input`
-  flex: 1;
-  min-width: 90px;
-`;
+// export const Input = styled.input`
+//   flex: 1;
+//   min-width: 90px;
+// `;
 
 export const WidgetTitle = styled.div`
   padding: 5px;