Even numbered input in form is causing page scroll issues in iOS

import {
  IonButton,
  IonButtons,
  IonContent,
  IonHeader,
  IonIcon,
  IonInput,
  IonPage,
  IonToolbar,
  useIonRouter,
} from "@ionic/react";
import { chevronBackOutline } from "ionicons/icons";
import { useForm } from "react-hook-form";

export default function TestForm() {
  const router = useIonRouter();

  const { register } = useForm({
    defaultValues: {
      name: "",
      lastname: "",
      email: "",
      password: "",
      city: "",
      country: "",
      zipcode: "",
      state: "",
      address: "",
      test1: "",
      test2: "",
      test3: "",
      test4: "",
      test5: "",
      test6: "",
      test7: "",
      test8: "",
      test9: "",
      test10: "",
      test11: "",
    },
  });

  return (
    <IonPage className="ion-padding">
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonButton fill="clear" onClick={() => router.goBack()}>
              <IonIcon icon={chevronBackOutline} />
            </IonButton>
          </IonButtons>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <form>
          <IonInput {...register("name")} placeholder="Name" />
          <IonInput {...register("lastname")} placeholder="Lastname" />
          <IonInput {...register("email")} placeholder="Email" />
          <IonInput {...register("password")} placeholder="Password" />
          <IonInput {...register("city")} placeholder="City" />
          <IonInput {...register("country")} placeholder="Country" />
          <IonInput {...register("zipcode")} placeholder="Zip Code" />
          <IonInput {...register("state")} placeholder="State" />
          <IonInput {...register("address")} placeholder="Address" />
          <IonInput {...register("test1")} placeholder="Test1" />
          <IonInput {...register("test2")} placeholder="Test2" />
          <IonInput {...register("test3")} placeholder="Test3" />
          <IonInput {...register("test4")} placeholder="Test4" />
          <IonInput {...register("test5")} placeholder="Test5" />
          <IonInput {...register("test6")} placeholder="Test6" />
          <IonInput {...register("test7")} placeholder="Test7" />
          <IonInput {...register("test8")} placeholder="Test8" />
          <IonInput {...register("test9")} placeholder="Test9" />
          <IonInput {...register("test10")} placeholder="Test10" />
          <IonInput {...register("test11")} placeholder="Test11" />
        </form>
      </IonContent>
    </IonPage>
  );
}

Ionic : 7.5

All the fields are just placeholder fields btw just to make the form long enough so we can experience the scroll issue with the keyboard pulled up.

When I render this in an iOS app (15.8.1), the page scrolls fine to the end of the page when the cursor is in odd numbered input fields … but it scrolls only partially when the cursor is in even numbered input fields.

Would love any insight on this. Ty

1 post - 1 participant

Read full topic