IonInput loses its focus on rendering IonPopover

Ionic Framework Ionic React
1

Hi,
I want to show the instructions in IonPopover, On focussing IonInput.

IonInput loses its focus on rendering popover. Can’t get the ref from the IonInput to setFocus().

  • Using “@ionic/react”: “^5.5.0”
  • OnIonFocus IonPopover rendered, but it lose its focus from IonInput
  • Provided showBackdrop as false
  • inputRef.current.setFocus() not setting up focus
  • OnIonFocus of the IonInput, Want to show the Instructions in IonPopover. And enable the user to type inputs
import React from "react";
import { IonButton, IonInput, IonItem, IonPopover } from "@ionic/react";

interface ItemGetterProps {
  isEdit?: boolean;
  selectedItem?: string;
}

interface IPopover {
  showPopover: boolean;
  event?: any;
}

export const ItemGetter: React.FC<ItemGetterProps> = (
  props: ItemGetterProps
) => {
  const { isEdit, selectedItem } = props;
  const [newItem, setNewItem] = React.useState("");
  const [popover, setPopover] = React.useState<IPopover>({
    showPopover: false,
    event: undefined,
  });

  const inputRef = React.useRef<any>(null);

  React.useEffect(() => {
    if (isEdit && selectedItem) {
      setNewItem(selectedItem);
    } else {
      setNewItem("");
    }
  }, [props.isEdit]);


  const onFocusHandler = (e: any): void => {
    e.preventDefault();
    setPopover({ showPopover: true, event: e });
  };

  React.useEffect(() => {
    if (popover.showPopover) {
      setTimeout(() => inputRef.current.setFocus(), 100);
    }
  }, [popover]);

  return (
    <IonItem>
      <IonPopover
        event={popover.event}
        isOpen={popover.showPopover}
        onDidDismiss={() => setPopover({ showPopover: false })}
        showBackdrop={false}
      >
        Enter a valid string
      </IonPopover>
      <IonInput
        ref={inputRef}
        onIonFocus={onFocusHandler}
        title="Input data"
        value={newItem}
        placeholder="Type an item to add..."
        onIonChange={(e) => setNewItem(e.detail.value!)}
      ></IonInput>
    </IonItem>
  );
};

export default ItemGetter;