Open
Description
Summary:
Hi all, I am unable to navigate through form elements using tab or enter when multiple modals are opened at the same time. Noticed that this only happens in Chrome & IE but works fine in safari
Steps to reproduce:
- Open modal 1
- Open modal 2 onClick a button in modal 1
- Hit tab button
- Nothing happens
Expected behavior:
- On tab, modal 2 will autofocus on next input field
Tried using ref but didnt work as well. Only works when I document.getElementById is used. However I understand that document.getElementById is not recommended to be used in functional components. So I was wondering if there are any other workarounds to this issue
class CredentialForm extends React.Component {
constructor (props) {
super(props)
this.state = {
validationErrors: {},
showErrors: false,
credentialId: formData.credentialId || null,
type: formData.type || 'employment',
name: formData.name || '',
detail: formData.detail || '',
startYear: formData.startYear || '',
endYear: formData.endYear || '',
isCurrent: formData.isCurrent || false
}
handleKeyPress = (value, event) => {
if (event.keyCode === 13 || event.keyCode === 9) {
event.preventDefault()
document.getElementById(value).focus() **---> getElementById method**
this[value].focus() **---> ref method**
}
}
render () {
const {
type,
name,
detail,
startYear,
endYear,
isCurrent,
showErrors,
validationErrors
} = this.state
const { formType } = this.props
return (
<Container>
<Label>{type === 'employment' ? 'Company Name' : 'School Name'}</Label>
<FormControl>
<Input
id={'nameInput'}
ref={(nameInput) => { this.nameInput = nameInput }}
onKeyDown={(event) => this.handleKeyPress('detailInput', event)}
isError={showErrors && validationErrors['name']}
onChange={handleNameChange}
placeholder={type === 'employment' ? 'Enter Company Name' : 'Enter School Name'}
value={name}
/>
</FormControl>
<Label>{type === 'employment' ? 'Designation' : 'Major'}</Label>
<FormControl>
<Input
id={'detailInput'}
ref={(detailInput) => { this.detailInput = detailInput }}
onKeyDown={(event) => this.handleKeyPress('isCurrent', event)}
isError={showErrors && validationErrors['detail']}
onChange={handleDetailChange}
placeholder={type === 'employment' ? 'Enter Designation' : 'Enter Major'}
value={detail}
/>
</FormControl>
<CheckboxField>
<input
id={'isCurrent'}
ref={(isCurrent) => { this.isCurrent = isCurrent }}
onKeyPress={(event) => this.handleKeyPress('submitBtn', event)}
type="checkbox"
checked={isCurrent}
onChange={this.handleCurrentChange}
/>
<CheckboxLabel>{type === 'employment' ? 'I currently work here' : 'I currently study here'}</CheckboxLabel>
</CheckboxField>
<div style={{display: 'flex'}}>
<SubmitButton
style={{width: 'auto', marginTop: '24px'}}
onClick={this.handleSubmit}
isLoading={false}>
Save Details
</SubmitButton>
</div>
</Container>
)
}
}
export default CredentialForm
Metadata
Metadata
Assignees
Labels
No labels