Estoy usando un sistema de componentes de reacción (mantine). Tengo un campo de selección y quiero seleccionar una opción con cualquier tecla y enviarla usando solo la tecla Intro.

El problema en este momento es que una vez que aparece el menú desplegable y presiono cualquier tecla, llama a la función y envía la cadena vacía que configuré. onSubmit no funcionará sin un botón de envío presente en el formulario, configurando la visualización como ninguno todavía no pudo enviarlo. Entonces, resulté en esto.

 import React, { useState, useRef } from "react"; import { useNavigate } from "react-router-dom"; import { Text, Select } from "@mantine/core"; import { Icon } from "@iconify/react"; import axios from "axios"; import { api } from "../helpers/api"; const Home = () => { const [joblist, setJoblist] = React.useState(""); const [error, setError] = useState(null); const [loading, setLoading] = useState(false); const history = useNavigate(); const selectForm = useRef(null); function handleSubmit(e) { if (e.key === "Enter" && e.preventDefault()) { selectForm.current.submit(); } setJoblist(""); console.log(joblist); setLoading(true); const uu = { jobs: joblist, }; console.log(uu); console.log(api.jobs); fetch(api.jobs, { method: "POST", headers: { "Access-Control-Allow-Origin": "http://127.0.0.1:8000/", "Content-Type": "application/json", }, body: JSON.stringify(uu), }) .then((res) => { console.log(res.data); setLoading(false); }) .catch((err) => { console.log(err); setLoading(false); setError(err.message || err); }); } return ( <div> <form ref={selectForm} onKeyDown={handleSubmit}> <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> </div> ); }; export default Home;