Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: MDBToast onClose

japan priority asked 6 months ago


I used MDBToast as in examples, with useState, open, onClose, but click on close button after set state to false doesn't work, toast stayed open!


japan priority answered 6 months ago


But I find another problem .... Toasts are opened in same place!

I tried code from Basic example in docs


japan priority commented 6 months ago

Ithink, appendToBody doesn't work ... and then it can't calculate right position


japan priority answered 6 months ago


I find a problem ... I had to give Toast out of NavbarLink, otherwise onClose can't find element toast to hide ... (Original code worked in version 6.3.0 fine)

    <MDBNavbarLink style={{ cursor: 'pointer' }} disabled={messages.length === 0} onClick={() => setMessOpen(p => !p)}>
        <MDBIcon fas icon='bell' />
        <MDBToast
            id='GT2Messages'
            color='light'
            position='top-right'
            appendToBody
            open={messOpen}
            onClose={() => setMessOpen(false)}
            headerContent={
                <strong className='fs-6 me-auto'>
                    <MDBTooltip tag='span' placement='bottom' title={GT2Fvocab(vocab.dict, 'btnDelAll', 'GT2Messages')}>
                        <MDBIcon fas icon='trash-alt' className='gt2deleteAll me-1' style={{ cursor: 'pointer' }} onClick={() => delMsg()} />
                    </MDBTooltip>
                </strong>
            }
            bodyContent={body} />
    </MDBNavbarLink>

Mateusz Lazaru staff commented 6 months ago

so the problem occurs only when the toast is inside the navbar link? now everything works fine?



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: Priority
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 8.0.0
  • Device: PC
  • Browser: Chrome
  • OS: Win10
  • Provided sample code: No
  • Provided link: No