Hello everyone!

I have this client 'form' (just a button, that toggles) where a user can add or remove an item from their journal.

The page this is used on renders a whole list of 'cruises' which they can add or remove from their list.

However, on first load of any particular page that has these forms on them, the first interaction results in a scroll to the top of the page (no full refresh is happening) and then if I add another from the list, it doesn't trigger the same scroll to top.

Client form:

'use client'

import { updateUsersCruises } from './actions'
import { useFormState } from 'react-dom'

import { AddCruiseButton } from './AddCruiseButton'

const initialState = {
  message: '',
}

export default function AddCruise({ cruiseId, beenOnCruise }: { cruiseId: string, beenOnCruise: boolean }) {

  const [state, formAction] = useFormState(updateUsersCruises, initialState)

  return (
    <>
      <form action={formAction}>
        <input type="hidden" name="cruiseId" value={cruiseId} />
        <AddCruiseButton beenOnCruiseInitialState={beenOnCruise} state={state} />
      </form>
    </>
  )
}

Server action:

'use server'

import { revalidatePath } from 'next/cache'
import { cookies } from 'next/headers'
import { createClient } from '@/utils/supabase/actions'

export async function updateUsersCruises(prevState: any, formData: FormData) {
  const cruiseId = formData.get('cruiseId');

  if (formData.get('action') === 'add') {
    const { data : queryReturn, error: queryReturnError } = await supabase.from('users_cruises')
    .insert({ cruise_id: cruiseId, profile_id: data?.session?.user.id }).select()
    return { message: 'added' };
  } else if (formData.get('action') === 'remove') {
    const { data : queryReturn, error: queryReturnError } = await supabase.from('users_cruises')
    .delete().eq('cruise_id', cruiseId).eq('profile_id', data?.session?.user.id)
    return { message: 'deleted' };
  }

}

tsx