Topic: pressing tab does not cycle through my inputs inside a modal

saafghassen free asked 2 years ago


Expected behavior

So i have a form component that i used inside a modal(i have many forms but trying to use the same modal), should be normal to press tab or shift-tab to go forth or back through inputs of my form

Actual behavior

pressing tab or shift-tab does nothing and i stay in the same input, i have to mention thought that if i remove the conditional rendring of the form component i can go forth the tab works but not shift-tab for some reason, the form is fonctional on it's own when i put it outside the modal everything works fine, and adding tabindex does not do anthing*Resources (screenshots, code snippets etc.)*

this is the modal code :

<MDBModal show={modal} setShow={setModal} tabIndex='-1'>
            <MDBModalDialog scrollable centered size="lg">
                <MDBModalContent>
                    <MDBModalHeader className="mx-4 border-0">
                        {modalContent && <MDBModalTitle> <span className={'dot-'+cards[modalContent-1].color}></span> <span className="ms-3">{cards[modalContent-1].title}</span></MDBModalTitle>}
                    </MDBModalHeader>
                    <MDBModalBody className="mx-2 border-0">
                        {(modalContent === 1) && <UserDetailsForm handler={toggleModal} />}
                    </MDBModalBody>
                </MDBModalContent>
            </MDBModalDialog>
        </MDBModal>

and that's some of the form code( i removes some of the inputs to make it short and made sure the behavior is still the same)

const UserDetailsForm = (props) => {
return (
    <form >
        <MDBContainer>
            <MDBRow>
                <MDBCol lg='6'>
                    <div className="form-outline mb-4">
                        <MDBInput
                            label='First Name'
                            id='fname'
                            type='text'
                            size='lg'
                            className="py-3"
                        />
                    </div>
                </MDBCol>
                <MDBCol lg='6'>
                    <div className="form-outline mb-4">
                        <MDBInput
                            label='Last Name'
                            id='lname'
                            type='text'
                            size='lg'
                            className="py-3"
                        />
                    </div>
                </MDBCol>
            </MDBRow>
            <MDBRow>
                <MDBCol lg='12'>
                    <div className="form-outline mb-4">
                        <MDBInput
                            label='Birthdate'
                            id='birthdate'
                            type='date'
                            size='lg'
                            className="py-3"
                        />
                    </div>
                </MDBCol>
        </MDBContainer>
        <MDBContainer className="mb-3">
            <div className="d-flex justify-content-around">
                <MDBBtn color="warning" className="px-5 py-3" onClick={(e) => { e.preventDefault(); props.handler() }}>cancel</MDBBtn>
                <MDBBtn color="secondary" className="px-5 py-3" >Confirm</MDBBtn>
            </div>
        </MDBContainer>
    </form>

....



We are working on implementing a focus trap already. But I cannot guarantee when is it going to be released.


saafghassen free commented 2 years ago

thanks for the reply, can you recommend a workaround for this issue atm ?



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: MDB5 4.1.0
  • Device: laptop
  • Browser: Brave
  • OS: windows 11
  • Provided sample code: No
  • Provided link: No