I am trying to implement a MUI slider in order to update a database by using Remix ActionFunction.
The issue I am facing is that when the MUI slider is moved, it reloads the default function instead of calling the ActionFunction. How can I make it trigger the action?
This is how the route appears:
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>
);
}
Whenever I modify the slider, it causes the AdminOrganizationSettingsGeneral function to reload, thereby updating the DOM. However, it fails to trigger the ActionFunction as intended... (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...");
};