javascriptmaterial-uiremix.run

Remix and MUI slider not triggering ActionFunction


I'm trying to use a MUI slider to update a database, using Remix ActionFunction.

However, when the MUI slider moves, it is reloading the default function, not the ActionFunction. How do I get it to call the action?

The route looks like this:

export default function AdminOrganizationSettingsGeneral(setOrgTeam: any) {
  const actionData = useActionData<typeof action>();

  const setChanges = async (event: Event, value: number) => {
    console.log("submitting!");
    return submit(event.target.name, value);
  };   

  return (
    <PaperCustom sx={{ width: "100%" }}>
      {teams.map((val, index) => (
        <Grid container sx={{ padding: "1rem" }}>
          <Grid item md={2} xs={3}>
            <Typography>{val.status}</Typography>
          </Grid>
          <Grid item md={3} xs={6}>
            <Typography>{val.name}</Typography>
          </Grid>
          <Grid item md={3} xs={3}>
            <Typography>Team: {val.members}</Typography>
          </Grid>{" "}
          <Grid item md={4} xs={12}>
            <DiscreteSlider
              setChanges={setChanges}
              teamValue={val.setup ? val.setup : 10}
              name={val._id}
            />
          </Grid>
        </Grid>
      ))}
    </PaperCustom>
  );
}

This is the DiscreteSlider component:

export default function DiscreteSlider(props: any) {
  const submit = useSubmit();

  return (
    <Form
      method="post"
      onChange={(event) => {
        submit(event.currentTarget);
      }}
    >
      <Box sx={{ width: "100%" }}>
        <Slider
          type="submit"
          aria-label="Temperature"
          defaultValue={props.teamValue}
          step={10}
          min={10}
          max={30}
          marks={marks}
          onChange={(event: Event, value: number) => {
            submit(event, value);
          }}
          {...props}
        />
      </Box>
    </Form>
  );
}

When I make a change on the slider, it reloads the AdminOrganizationSettingsGeneral function, so the DOM updates. But it does not call the ActionFunction... (see below)

ActionFunction

export const action: ActionFunction = async (args: ActionArgs) => {
  const { request, context, params } = args;
  const { orgId = "", teamId = "" } = params;
  const form = await request.formData();

  console.log("This is not happening...");
};

Solution

  • You need to specify method: post. The default for submit is get. Remember, you're calling the submit function from useSubmit. You're not calling the form submit.

    https://remix.run/docs/en/main/hooks/use-submit

    onChange={(event: Event, value: number) => {
      submit({ temperature: value }, { method: 'post' });
    }}
    

    Then in your action you can do:

    const formData = await request.formData()
    const temperature = Number(formData.get('temperature'))