Problem/Motivation
Unlike other components, Bootstrap 5 toasts actually need instantiation and can't rely just on using data-attributes or classes.
From the Bootstrap documentation:
Toasts are opt-in for performance reasons, so you must initialize them yourself.
(on the show method): Reveals an element’s toast. Returns to the caller before the toast has actually been shown (i.e. before the shown.bs.toast event occurs). You have to manually call this method, instead your toast won’t show.
Usage
Initialize toasts via JavaScript:const toastElList = document.querySelectorAll('.toast') const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))
This means, as they are right now on UI Suite Bootstrap:
- Toasts wont' initialize and show automatically.
- If you try to show them ny passing the show class, settings such as delay and data-attributes will not have any effect
Steps to reproduce
- Use the "toast" component
- The toast won-t appear
- Settings passed as data-attributes won't work.
Proposed resolution
Add a small JS behavior to instantiate toasts.
Remaining tasks
Do the stuff
User interface changes
None
API changes
None
Data model changes
None
Issue fork ui_suite_bootstrap-3554386
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #3
idiaz.ronceroCreated a MR, ready to review.
I think that showing the toast by default is the most common scenario and good DX, but theme maintainers might want to have a look at this or maybe let users decide via a component prop.
Comment #4
idiaz.ronceroComment #5
grimreaperHi,
Thanks for the issue and MR.
Same problem applies for tooltips and popover if I remember well.
Those small JS scripts had not been implemented yet because it may interfere with cases where a manual triggering is requested. I remember an MR were I tried something like that 1 yeat ago but don't remember for which issue.
So in addition to the JS script, maybe we need to add a prop on the toast component to add an HTML attribute for "auto" initialization?