From f84397a9374fa7b40271f0eb124d639089cc53f4 Mon Sep 17 00:00:00 2001
From: David Dal Busco <david.dalbusco@outlook.com>
Date: Thu, 25 Jan 2024 21:51:25 +0100
Subject: [PATCH] feat: remove search autofocus (#177)

---
 src/modals/clients/ClientsModal.tsx | 24 +++-------------------
 src/pages/home/Home.tsx             | 32 +++++------------------------
 2 files changed, 8 insertions(+), 48 deletions(-)

diff --git a/src/modals/clients/ClientsModal.tsx b/src/modals/clients/ClientsModal.tsx
index 64ab517..5edcfad 100644
--- a/src/modals/clients/ClientsModal.tsx
+++ b/src/modals/clients/ClientsModal.tsx
@@ -1,4 +1,4 @@
-import React, {CSSProperties, RefObject, useEffect, useRef, useState} from 'react';
+import {CSSProperties, RefObject, useEffect, useRef, useState} from 'react';
 import {useSelector} from 'react-redux';
 
 import type {IonSearchbarCustomEvent} from '@ionic/core';
@@ -23,21 +23,15 @@ import {close} from 'ionicons/icons';
 import styles from './ClientsModal.module.scss';
 
 import {RootState} from '../../store/reducers';
-import {rootConnector, RootProps} from '../../store/thunks/index.thunks';
+import {rootConnector} from '../../store/thunks/index.thunks';
 
 import {Client} from '../../models/client';
 
-interface Props extends RootProps {
-  presented: boolean;
-}
-
-const ClientsModal: React.FC<Props> = (props) => {
+const ClientsModal = () => {
   const {t} = useTranslation('clients');
 
   const headerRef: RefObject<HTMLIonHeaderElement> | null = useRef(null);
 
-  const filterRef: RefObject<HTMLIonSearchbarElement> | null = useRef(null);
-
   const clients: Client[] | undefined = useSelector((state: RootState) => state.clients.clients);
 
   const [filteredClients, setFilteredClients] = useState<Client[] | undefined>(undefined);
@@ -47,17 +41,6 @@ const ClientsModal: React.FC<Props> = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [clients]);
 
-  useEffect(() => {
-    if (props.presented) {
-      focusFilter();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.presented]);
-
-  async function focusFilter() {
-    await filterRef?.current?.setFocus();
-  }
-
   function onFilter($event: IonSearchbarCustomEvent<KeyboardEvent>) {
     if (!$event) {
       return;
@@ -109,7 +92,6 @@ const ClientsModal: React.FC<Props> = (props) => {
           debounce={500}
           placeholder={t('search.filter')}
           className={styles.searchbar}
-          ref={filterRef}
           onIonInput={($event: IonSearchbarCustomEvent<KeyboardEvent>) => onFilter($event)}
         ></IonSearchbar>
 
diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx
index e768f5b..d5a88b5 100644
--- a/src/pages/home/Home.tsx
+++ b/src/pages/home/Home.tsx
@@ -12,8 +12,6 @@ import {
   IonModal,
   IonPage,
   IonToolbar,
-  useIonViewDidEnter,
-  useIonViewDidLeave,
 } from '@ionic/react';
 
 import {search} from 'ionicons/icons';
@@ -43,11 +41,8 @@ const Home: React.FC<RouteComponentProps> = (props) => {
   const [showModalClients, setShowModalClients] = useState(false);
   const [showModalTask, setShowModalTask] = useState(false);
 
-  const [modalPresented, setModalPresented] = useState(false);
-
   async function closeAndNavigate($event: CustomEvent) {
-    await setShowModalClients(false);
-    await setModalPresented(false);
+    setShowModalClients(false);
 
     if ($event && $event.detail && $event.detail.data) {
       props.history.push(`/client/${$event.detail.data}`);
@@ -55,31 +50,14 @@ const Home: React.FC<RouteComponentProps> = (props) => {
   }
 
   async function closeClientModal() {
-    await setShowModalClient(false);
-    await setModalPresented(false);
+    setShowModalClient(false);
   }
 
-  useIonViewDidEnter(() => {
-    document.addEventListener('ionModalDidPresent', updatePresented, {passive: true});
-  });
-
-  useIonViewDidLeave(() => {
-    document.removeEventListener('ionModalDidPresent', updatePresented, false);
-  });
-
-  const updatePresented = () => {
-    setModalPresented(true);
-  };
-
   return (
     <IonPage>
       <IonContent>
-        <IonModal
-          isOpen={showModalClient}
-          onDidDismiss={async () => await closeClientModal()}
-          className="fullscreen"
-        >
-          <CreateClientModal closeAction={async () => await closeClientModal()}></CreateClientModal>
+        <IonModal isOpen={showModalClient} onDidDismiss={closeClientModal} className="fullscreen">
+          <CreateClientModal closeAction={closeClientModal}></CreateClientModal>
         </IonModal>
 
         <IonModal
@@ -87,7 +65,7 @@ const Home: React.FC<RouteComponentProps> = (props) => {
           onDidDismiss={($event) => closeAndNavigate($event)}
           className="fullscreen"
         >
-          <ClientsModal presented={modalPresented}></ClientsModal>
+          <ClientsModal />
         </IonModal>
 
         <IonModal