How can I ignore formSubmit by clicking Enter key in React hook based functional approach

Question

I want to use "Enter" key for one of my input field. I am using Ant Design with React hook.

I have big form with child element and form submit functionality. Here is relevant part of the code,

<Form onSubmit={handlesubmit}>
     <div className="column1">
                <Form.Item>
                    <Text strong={true}>Supplier</Text>
                </Form.Item>
            </div>
            <div className="column2">
                <Form.Item>
                    <Input
                        onChange={handleChange}
                        name="supplier"
                        
                    />
                </Form.Item>
            </div>
            <ChildElement/>
     <Button
            value="submit"
            type="primary"
            htmlType="submit"
            style={{ float: 'right', marginBottom: '10px', marginTop: '10px' }}
            >
             submit form
     </Button>
</Form>

Child component "ChildElement" also have an input submit field

<Input onChange={processArticleNumber} onKeyPress={(e) => (e.key === 'Enter' && fetchArticleData())}/>

When I press 'Enter' key after providing the input in the child element, the "fetchArticleData()" function of child is called but also the parent form is getting submitted which I want to avoid.

But I also want to keep "onSubmit" option on the parent form as I know that allows to submit the form with clicking "Enter" or any button with type "submit".

In class based react, I can specify "this.fetchArticleData" to correctly specify my Input element(from my child component in this case) on which I want this enter key facility but how to do that in function based React approach ?

Or do I need to use another form element inside my child ? for example,

<Form onSubmit={fetchData}>
  <Form.Item>
      <Input onChange={processArticleNumber}/>
  </Form.Item>
</Form>

In the above case, is it a good idea to use "Form element" under a parent "Form element" ?

Any help is much appreciated.

Answer 1

Seems to me that what you need is to add event.stopPropagation(); in the child event handler .

This will prevent the event from propagating up.
Read: https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

Answer 2

One way is to disable enterKey option to parent(your submit button) and enable only onClick for button.

You can achieve it by doing some code changes,

1. use form hook

   const [form] = Form.useForm();

2. Add form to Form tag

   < Form name="basic" form={form} onFinish={} onFinishFailed={}>

3. Remove htmlType="submit" and call onfinish like dis

   < Button type="primary" onClick={form.submit}> Submit < /Button>

Still have any issue?, Refer my Codesandbox for removing enterkey option to antdesign form https://codesandbox.io/s/formwithouthtmltypestackover-bpbhd?file=/index.js:1414-1494