MDBToast onClose


Topic: MDBToast onClose

japan pro premium 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 pro premium 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?


japan pro premium 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 pro premium priority commented 6 months ago

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


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
  • User: Pro
  • 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