i have a form that has only a select option, i am using mantine component there is no button on the form, so when i select an option and hit enter it submits. The problem is that the entire page refreshes. I have added e.preventDefault
and even e.stopPropagation
and the page still refreshes when i press enter. To get the form to even submit i had to use ref
and onKeyUp
to call the submit function. How do i prevent the page from refreshing and still submit.
Submit function
const selectForm = useRef(null);
function handleSubmit(e) {
e.preventDefault();
e.stopPropagation();
if (e.keyCode === 13) {
e.preventDefault();
e.stopPropagation();
selectForm.current.submit();
}
setJoblist("");
console.log(joblist);
setLoading(true);
const uu = {
jobs: joblist,
};
console.log(uu);
console.log(api.jobs);
}
My form
<form ref={selectForm} onKeyUp={handleSubmit} tabIndex={0}>
<Select
label="Your favorite framework/library"
placeholder="Pick one"
searchable
clearable
nothingFound="No options"
value={joblist}
onChange={setJoblist}
data={[
{ value: "react", label: "React" },
{ value: "ng", label: "Angular" },
{ value: "svelte", label: "Svelte" },
{ value: "vue", label: "Vue" },
]}
style={{
width: "608px",
marginLeft: "294px",
marginTop: "-100px",
}}
/>
</form>