I have the "chips" form link you can see in the attached image here and I want to create a condition such as if someone press "Enter" he can note the item added but what happens here is that form sends the data to backend.

I tried many times to modify the behavior using the "event" but it didn't work you can see the approaches I sticked with:

Approach1:

// input to submit job
const submit_job = document.getElementById("submit-job");
submit_job.onclick = (e) => {
    e.preventDefault();
    if (e.key !== "") {
        console.log(e.currentTarget)
    } else if (e.pointerType === "mouse") {
        submit_job.onsubmit = () => {
            return true
        }
    }
}

// This approach won't work because I found that "e.key" worked only when typing by Keyboard

Approach 2:

function getEventType(event) {
    if (event.type === "keydown") {
        event.preventDefault();
    }
}

submit_job.addEventListener('keydown', getEventType, true);

submit_job.addEventListener('click', getEventType);

so, any help in that issue, please?

Note:

No need to see the full code because the code is working fine but when I place it into the form this problem occurs so, you can spire me using that variable only "submit_job" in your answer.