feat: remove search autofocus (#177)

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>
 

src/pages/home/Home.tsx

@@ -12,8 +12,6 @@ import {
  IonModal,
  IonPage,
  IonToolbar,
- useIonViewDidEnter,
- useIonViewDidLeave,
 } from '@ionic/react';
 
 import {search} from 'ionicons/icons';
@@ -43,51 +41,31 @@ 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}`);
  }
  }
 
  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
  isOpen={showModalClients}
  onDidDismiss={($event) => closeAndNavigate($event)}
  className="fullscreen"
  >
- <ClientsModal presented={modalPresented}></ClientsModal>
+ <ClientsModal />
  </IonModal>
 
  <IonModal