From 1d0134ebe5e4bbc0c3c898be8592cdefdb59e655 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Sans=C3=A3o=20Araldi?= <danielsaraldi@gmail.com>
Date: Fri, 5 Jul 2024 22:34:17 -0300
Subject: [PATCH] fix: cancel submit event of the `form` tag and small adjust
 in padding value of the `Container` component

---
 CHANGELOG.md                         |  8 +++-----
 src/components/Container/index.tsx   |  2 +-
 src/components/SearchInput/index.tsx | 20 ++++++++++++--------
 3 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8b3eeb1..08830f4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,15 +1,13 @@
 # [1.2.0](https://github.com/ArtelierMaisa/artelier-maisa-admin/compare/v1.1.0...v1.2.0) (2024-07-03)
 
-
 ### Features
 
-* add `meta` tags to show platform preview ([3f4461b](https://github.com/ArtelierMaisa/artelier-maisa-admin/commit/3f4461b4ee12605ae15d8fc8bc915937f71762b4))
-
+- add `meta` tags to show platform preview ([3f4461b](https://github.com/ArtelierMaisa/artelier-maisa-admin/commit/3f4461b4ee12605ae15d8fc8bc915937f71762b4))
 
 ### Performance Improvements
 
-* change all components to use `memo` to improve application performance ([d2907ff](https://github.com/ArtelierMaisa/artelier-maisa-admin/commit/d2907ff0d012c820dc303d49375f00de83426d17))
-* improve search category by name in `onSearch` function ([c8fed3d](https://github.com/ArtelierMaisa/artelier-maisa-admin/commit/c8fed3d936c50111f4bd2051d4a1ecdefbcfd974))
+- change all components to use `memo` to improve application performance ([d2907ff](https://github.com/ArtelierMaisa/artelier-maisa-admin/commit/d2907ff0d012c820dc303d49375f00de83426d17))
+- improve search category by name in `onSearch` function ([c8fed3d](https://github.com/ArtelierMaisa/artelier-maisa-admin/commit/c8fed3d936c50111f4bd2051d4a1ecdefbcfd974))
 
 # [1.1.0](https://github.com/ArtelierMaisa/artelier-maisa-admin/compare/v1.0.0...v1.1.0) (2024-07-03)
 
diff --git a/src/components/Container/index.tsx b/src/components/Container/index.tsx
index c92b779..e924f54 100644
--- a/src/components/Container/index.tsx
+++ b/src/components/Container/index.tsx
@@ -6,7 +6,7 @@ function Container(props: ContainerProps) {
   const { children } = props;
 
   return (
-    <main className='flex flex-col w-full h-screen ml-[3.25rem] sm:ml-0 p-2 sm:p-5 overflow-y-auto'>
+    <main className='flex flex-col w-full h-screen ml-[3.25rem] sm:ml-0 p-3 sm:p-5 overflow-y-auto'>
       {children}
     </main>
   );
diff --git a/src/components/SearchInput/index.tsx b/src/components/SearchInput/index.tsx
index c2712f0..89ac038 100644
--- a/src/components/SearchInput/index.tsx
+++ b/src/components/SearchInput/index.tsx
@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import { FormEvent, memo } from 'react';
 
 import { SearchInputProps } from '../../@types';
 import { GenericButton, Icon } from '../';
@@ -6,9 +6,18 @@ import { GenericButton, Icon } from '../';
 function SearchInput(props: SearchInputProps) {
   const { searchValue, onChange, onSearch } = props;
 
+  function onSubmit(event: FormEvent<HTMLFormElement>): void {
+    event.preventDefault();
+
+    if (onSearch) onSearch();
+  }
+
   return (
     <>
-      <form className='w-full max-w-[38rem] rounded-lg sm:rounded-s-lg shadow-default mb-2 sm:mb-0'>
+      <form
+        onSubmit={onSubmit}
+        className='w-full max-w-[38rem] rounded-lg sm:rounded-s-lg shadow-default mb-2 sm:mb-0'
+      >
         <div className='flex relative'>
           <div className='relative w-full'>
             <input
@@ -17,7 +26,6 @@ function SearchInput(props: SearchInputProps) {
               className='block w-full h-16 z-20 p-4 sm:p-2 sm:pr-16 rounded-lg sm:rounded-s-lg bg-background-color text-primary font-normal text-base placeholder-primary60 border-transparent focus:ring focus:ring-primary60 focus:border-primary60'
               placeholder='Buscar categoria'
               onChange={onChange}
-              required
             />
 
             <button
@@ -34,11 +42,7 @@ function SearchInput(props: SearchInputProps) {
       </form>
 
       <div className='relative flex flex-col sm:hidden w-full gap-2'>
-        <GenericButton
-          title='Buscar produto ou categoria'
-          onClick={onSearch}
-          isHugWidth
-        />
+        <GenericButton title='Buscar categoria' onClick={onSearch} isHugWidth />
       </div>
     </>
   );