Merge pull request #3868 from epam/3750-macro-add-search-menu-clear-b…

…utton Macro: #3750 - Add search menu clear button
epam · Mar 14, 2024 · 73c6849 · 73c6849
2 parents aa5c5b6 + 95a5c87
commit 73c6849
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/packages/ketcher-macromolecules/src/components/monomerLibrary/MonomerLibrary.tsx b/packages/ketcher-macromolecules/src/components/monomerLibrary/MonomerLibrary.tsx
@@ -31,6 +31,7 @@ import { scrollToSelectedPreset } from './RnaBuilder/RnaEditor/RnaEditor';
 import {
   MonomerLibraryContainer,
   MonomerLibraryHeader,
+  MonomerLibraryInput,
   MonomerLibrarySearch,
   MonomerLibraryTitle,
 } from './styles';
@@ -86,11 +87,11 @@ const MonomerLibrary = React.memo(() => {
             <span>
               <Icon name="search" />
             </span>
-            <input
+            <MonomerLibraryInput
+              type="search"
               data-testid="monomer-library-input"
-              onInput={filterResults}
+              onChange={filterResults}
               placeholder="Search by name..."
-              type="text"
             />
           </div>
         </MonomerLibrarySearch>

diff --git a/packages/ketcher-macromolecules/src/components/monomerLibrary/styles.ts b/packages/ketcher-macromolecules/src/components/monomerLibrary/styles.ts
@@ -14,9 +14,17 @@
  * limitations under the License.
  ***************************************************************************/
 import styled from '@emotion/styled';
+import { Input } from 'ketcher-react';
 
 export const MONOMER_LIBRARY_WIDTH = '254px';
 
+export const MonomerLibraryInput = styled(Input)({
+  outline: 0,
+  ':hover': {
+    outline: 'none',
+  },
+});
+
 export const MonomerLibraryContainer = styled.div(({ theme }) => ({
   width: MONOMER_LIBRARY_WIDTH,
   height: 'calc(100% - 16px)',