Possible to prevent form submit on "enter" keyPress?

[ks2211]

Prerequisites

• I have read the documentation;
• In the case of a bug report, I understand that providing a SSCCE example is tremendously useful to the maintainers.
• Ideally, I'm providing a sample JSFiddle or a shared playground link demonstrating the issue.

Description

I am trying to prevent the form's onSubmit method from being called when I press the enter key inside of an input field in the form itself.

The use case for this is I have a custom field for arrays. I render only 1 input box with an "add" button. When a user types something into the input box and then hits the add button, I append the item to the formData/call the props.onChange and then render the formData as "buttons"/badges below the input field (instead of rendering multiple input fields for an array). Having the user click the add button works but I also wanted to update the formData if the user presses enter inside of that input box. What's happening is when a user presses enter, it does add the item to the formData BUT ALSO calls the form onSubmit method...which if the rest of the form isn't filled out, fails.

Steps to Reproduce

Code sample below:

const SomethingField = (props) => {
    return (
        <div>
            <input value=""
                className="form-control"
                onChange={(e) => //someFunctoUpdateItem}
                type="text" />
            <button className="btn btn-green"
                type="button"
                onClick={() => //someFuncToAddItemToPropsFormData}>
                ADD
              </button>
            <br></br>
            formData will be appended down here/shown as buttons or badges
              </div>
    )
}

const Form = JSONSchemaForm.default;
const schema = {
    title: "react-jsonschema-form demo",
    type: "object",
    required: ["name"],
    properties: {
        name: { type: "string", minLength: 3 },
        description: { type: "string" },
        something: {
            type: "array",
            items: {
                type: "string"
            },
            minItems: 1
        }
    }
};
const uiSchema = {
    description: {
        "ui:widget": "textarea"
    },
    something: {
        "ui:field": "somethingField"
    }
};

ReactDOM.render(<Form fields={{ somethingField: SomethingField }} schema={schema} uiSchema={uiSchema} />,
    document.getElementById("main"));

Expected behavior

If a user is inside of an input for an "array" field and they press enter, I want to prevent form submission and instead add the item to formData

Actual behavior

If a user is inside of an input for an "array" field and they press enter, it adds the item to the formData but also does a form submission. Doing a e.preventDefault() doesn't seem to prevent the form submission. Is hijacking the keydown event in an eventListener the only way to do this or is there a possibility of introducing the onKeyPress as a prop in the library?

Version

"react-jsonschema-form": "^1.8.1",

[juliankigwana]

Have you tried with e.stopPropagation?

https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

[ks2211]

@juliankigwana yeah tried that, no change unfortunately

[juliankigwana]

Essentially you are trying to override the native form behaviour.

I had a similar problem a while ago when I was using a custom array field which was displaying a nested form. The only ways I was able to work around it was to over ride the form behaviour #839 or to change the tagName #1345

[mirajp]

I came across this issue when I was trying to make my Form accessible (pressing enter on a dropdown option shouldn't automatically submit the form, but choose the selected value).

This is what I did to resolve it:

export class MyForm<T> extends Form<T> {
    componentDidMount() {
        const root = findDOMNode(this);
        root && root.addEventListener('keydown', this.onKeyDown);
    }
    
    componentWillUnmount() {
        const root = findDOMNode(this);
        root && root.removeEventListener('keydown', this.onKeyDown);
    }

    onKeyDown = (event: any) => {
        // Prevent Enter press from activating submit action
        if (event.keyCode === 13) {
            const target: any = event.target;
            event.preventDefault();
            target.click();
            /* // For some reason I was doing both (I forgot why) but either target.click() or the below seem to work now
            // If you actually enable both, it could be problematic (like if you press enter on the "add" button for an array-type field, 2 new array items will appear
            target.dispatchEvent(new MouseEvent('click', {
                view: window,
                bubbles: true,
                cancelable: true,
                buttons: 1,
            }));
            */
        }
    }   
}

With this hack, users can still use the enter key to get the default behavior from a field, button, dropdown, etc..

[epicfaace]

^^ it might be nice if we could add this hack to the library -- maybe a prop on the form such as submitOnEnter?

[mirajp]

A boolean submitOnEnter property? If false, this bit if code is wrapped around the <form> component to prevent it from automatically submitting?

[epicfaace]

Exactly.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Please leave a comment if this is still an issue for you. Thank you.