Skip to content

Can't navigate through form elements using tab when multiple modals are open #677

Open
@charlimxm

Description

@charlimxm

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:

  1. Open modal 1
  2. Open modal 2 onClick a button in modal 1
  3. Hit tab button
  4. Nothing happens

Expected behavior:

  1. 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

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions