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

Command icon 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

idiaz.roncero created an issue. See original summary.

idiaz.roncero’s picture

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

idiaz.roncero’s picture

Status: Active » Needs review
grimreaper’s picture

Status: Needs review » Needs work

Hi,

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?