How to disable <ENTER> key for form submit in react-bootstrap
In the following snippet, I have several input forms that are textual. If the user hits, it seems that I am getting the same synthetic event as if they were pressing the submit button. I want to ignore both form submissions and only allow the SUBMIT button to be clicked. (I removed some of the form groups to shorten this example).
In all cases (button or ENTER key)
e.key is undefined
e.which is undefined
e.type is submit
e.target is the submit button
(this is a synthetic event)
const React = require('react')
import { Form, FormControl, FormGroup, ControlLabel, Col, Button, Tooltip, OverlayTrigger } from 'react-bootstrap'
const Configuration = ({ ServerPort, UserID, PortNumber, WWWUrl, SourcePath, FMEPath }) => {
const buttonAction = (e) => {
e.preventDefault();
alert(e.target.innerHTML)
}
return (
<Form horizontal>
<FormGroup controlId="serverPortBox">
<Col componentClass={ControlLabel} sm={2}>Watson Port:</Col>
<Col sm={10}>
<OverlayTrigger placement="left" overlay={(<Tooltip id="tt1">TCP port for Watson to use</Tooltip>)}>
<FormControl type="number" min="1024" max="65535" placeholder={ServerPort} />
</OverlayTrigger>
</Col>
</FormGroup>
<FormGroup controlId="dbPortBox">
<Col componentClass={ControlLabel} sm={2}>Database Port:</Col>
<Col sm={10}>
<OverlayTrigger placement="left" overlay={(<Tooltip id="tt3">TCP port for PostGreSql DB</Tooltip>)}>
<FormControl type="number" min="1024" max="65535" placeholder={PortNumber} />
</OverlayTrigger>
</Col>
</FormGroup>
<Button type="submit" bsStyle="primary" block onClick={(e) => buttonAction(e)}>Update Configuration</Button>
</Form>
)
}
export default Configuration
+3
source to share
3 answers
I found a solution how to implement this without using type="button"
const handleKeyDown = (event, callback) => {
if (event.key === 'Enter' && event.shiftKey === false) {
event.preventDefault();
callback(submitAddress);
}
};
and changes in the form:
<form onSubmit={handleSubmit(submitAddress)} onKeyDown={e => { handleKeyDown(e, handleSubmit) }}>
0
source to share