Is is possible to use IonFab to show a form submit button?

I’m trying to find a way to use Ion-Fab to make a floating “Save my account settings” button. (I am using IonFab because I only want the button to appear if a user makes a change.)

I have an <IonPage> that shows the user account settings.

These settings are contained within a <form> tag, and I use react-hook-form to build the form.

Here’s my problem: to get the FAB to be fixed in place, it has to be a direct child of <IonContent>. But to put the submit button in <IonFab>, <IonFab> has to be a child of the <form> tag.

Problem with the code below: the fab is not fixed in place (it needs to be a child of <IonContent>):

      <IonContent>
        <form onSubmit={handleSubmit(onSubmit)}>
          <FormItemUserTheme control={control} />
          <FormItemUserVibration control={control} />

          {!isEmptyObject(dirtyFields) && (
            <IonFab vertical="top" horizontal="end" slot="fixed" edge>
              <IonButton type="submit">
                Save Settings
              </IonButton>
            </IonFab>
          )}
        </form>
    </IonContent>

Problem with the code below: the fab is fixed in place properly, but form submit is not triggered:

      <IonContent>
        <form onSubmit={handleSubmit(onSubmit)}>
          <FormItemUserTheme control={control} />
          <FormItemUserVibration control={control} />
        </form>
        {!isEmptyObject(dirtyFields) && (
          <IonFab vertical="top" horizontal="end" slot="fixed" edge>
            <IonButton type="submit">
              Save Settings
            </IonButton>
          </IonFab>
        )}
    </IonContent>

Is there some way to use IonFab to show a form submit button?

1 post - 1 participant

Read full topic