Toast delay attribute has no effect

Created on 4 June 2024, 24 days ago
Updated 6 June 2024, 22 days ago

Problem/Motivation

Toast template uses data attribute data-delay however it has no effect since in bootstrap5 the correct attribute is data-bs-delay so the toast is open for 5 seconds instead of 10 seconds as in the template. See the docs here https://getbootstrap.com/docs/5.3/components/toasts/#options

Also I think it would be nice to have the delay configurable in the theme options?

Steps to reproduce

  1. Go to theme settings /admin/appearance/settings/bootstrap_barrio
  2. Select the Components tab
  3. Expand Messages accordion
  4. Select Toasts from Messages widget dropdown
  5. Save the settings
  6. Go to /user/login page and enter invalid credentials
  7. Page displays the error in a toast
  8. Toast is open for 5 seconds instead of 10 seconds

Proposed resolution

Fix the data-delay attribute in the template

Optional: Add a theme setting that controls how long the toast is opened and fix the template to use the setting

🐛 Bug report
Status

Needs review

Version

5.5

Component

Code

Created by

🇸🇮Slovenia bcizej

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @bcizej
  • 🇮🇳India ravi kant Jaipur

    @bcizej

    The theme is not providing option to set delay option but you can do in your custom theme.

    1. Set "Load library" option as "Local" from your custom theme.
    2. Create a JS file and add below JS code.
    3. /**
       * @file
       * Displays any toast messages present on the page.
       */
      (function (Drupal) {
        'use strict';
      
        Drupal.behaviors.bootstrap_barrio_toast = {
          attach: function () {
            var elements = [].slice.call(document.querySelectorAll('.toast'))
            var toasts = elements.map(function(toastEl) {
              return new bootstrap.Toast(toastEl, {delay: 10000});
            });
            toasts.forEach(toast => toast.show());
          }
        };
      })(Drupal);
      
      
    4. Now attach this JS file in global-styling library
    5. Clear cache , refresh page and check as regeneration steps
  • Status changed to Needs review 23 days ago
  • Open on Drupal.org →
    Core: 10.1.0-alpha1 + Environment: PHP 7.4 & MySQL 5.7
    last update 22 days ago
    Waiting for branch to pass
  • 🇸🇮Slovenia bcizej

    @ravi kant

    Yes, I managed to add settings field and overrided the toasts template to load the proper attribute from config.

    I added a PR that fixes the template and adds a new setting field. I don't know if this will be merged but it might be helpful for others on how to modify their subtheme if needed.

  • 🇮🇳India ravi kant Jaipur

    @bcizej
    I checked the branch and found that the option is available now but has no default value. Also, the style is breaking.

  • 🇸🇮Slovenia bcizej

    @ravi kant

    There is an update hook that sets the default value via drush updb. I don't see any style breaking on my side.

Production build 0.69.0 2024