8000 [BUG] Toasts - Autohide does not work · Issue #2289 · tabler/tabler · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

[BUG] Toasts - Autohide does not work #2289

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
rubensrocha opened this issue Apr 27, 2025 · 8 comments
Closed

[BUG] Toasts - Autohide does not work #2289

rubensrocha opened this issue Apr 27, 2025 · 8 comments
Labels
bug Something isn't working

Comments

@rubensrocha
Copy link

Browser

Chrome and Brave

OS

Linux Mint

Screen size

1920x1080

Describe the bug

I copied the example from the documentation, just modifying the data-bs-autohide="true" attribute, but even so the notification box does not close automatically.

Ref: https://docs.tabler.io/ui/components/toasts

Version: 1.2.0

Code:

<div class="toast-container">
  <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true"
    data-bs-autohide="true" data-bs-toggle="toast">
    <div class="toast-header">
      <span class="avatar avatar-xs me-2"
        style="background-image: url(/static/avatars/008m.jpg)"></span>
      <strong class="me-auto">Dunn Slane</strong>
      <small>11 mins ago</small>
      <button type="button" class="ms-2 btn-close" data-bs-dismiss="toast"
        aria-label="Close"></button>
    </div>
    <div class="toast-body">Hello, world! This is a toast message.</div>
  </div>
  <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true"
    data-bs-autohide="true" data-bs-toggle="toast">
    <div class="toast-header">
      <span class="avatar avatar-xs me-2"
        style="background-image: url(/static/avatars/020m.jpg)"></span>
      <strong class="me-auto">Mallory Hulme</strong>
      <small>7 mins ago</small>
      <button type="button" class="ms-2 btn-close" data-bs-dismiss="toast"
        aria-label="Close"></button>
    </div>
    <div class="toast-body">This is another toast message.</div>
  </div>
</div>

How to reproduce

  1. Go to '...'
  2. Click on '...'
  3. Scroll down to '...'
  4. See error
    ...

Screenshots

No response

JSFiddle

No response
@rubensrocha rubensrocha added the bug Something isn't working label Apr 27, 2025
@ethancrawford
Copy link
Collaborator

Hmm.
I tested this by rebuilding my local development copy of Tabler with the latest code (based on 78c9c71), changing the data-bs-autohide attribute to "true" on the below line:

tabler/shared/includes/ui/toast.html

Line 4 in 78c9c71

<div class="toast {% if include.show %}show{% endif %}" id="toast-{{ toast-id }}" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">

and visiting /toasts.html in the browser after rebuilding the preview.
Clicking on the 'Simple toast' example caused the toast to hide after a few seconds. Not sure what might be different for you yet though.

@ethancrawford
Copy link
Collaborator

@rubensrocha does the toast also not hide if you remove all references of data-bs-autohide?

@rubensrocha
Copy link
Author

I downloaded version 1.2.0 from the Releases section, but there were some issues, so I simply copied the css and js directly from the demo and applied it to my Laravel project.

I did all the template integration and everything worked fine until I got to the Toast integration, which as I explained before, doesn't close automatically for some reason I don't know.

With or without data-bs-autohide it still doesn't close automatically, so my "temporary" solution was to use the SweetAlert2 library, at least until I figure out what the problem with Toast is.

@ethancrawford

@ethancrawford
Copy link
Collaborator

An interesting conundrum to be sure.

Not that I expect any, but are there any developer console errors?

@rubensrocha
Copy link
Author
rubensrocha commented Apr 29, 2025 •
edited
Loading

An interesting conundrum to be sure.

Not that I expect any, but are there any developer console errors?

No console errors.

I made a small example here using the code from the documentation(Installation - Step 2 and Toasts - Stacking toasts), and it still doesn't work as expected.

https://jsfiddle.net/rxaqn3t2/1/

@ethancrawford
Copy link
Collaborator

I've no idea really what's going on here sorry... perhaps @codecalm might be able to shed some light at some point 🤞

@mikosamuraj
Copy link
Contributor

Hi all,

I made an experiment, it looks like autohide mechanism works only when toast was triggered programmatically. Here is my example based on https://tabler.io/admin-template/preview:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/core@1.2.0/dist/css/tabler.min.css"/>
</head>
<body>
<button data-bs-toggle="toast" data-bs-target="#toast-simple">Show toast</button>

<div class="toast" id="toast-simple" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="true">
    <div class="toast-header">
        <span class="avatar avatar-xs me-2"
              style="background-image: url(/static/avatars/018f.jpg)"></span>
        <strong class="me-auto">Mallory Hulme</strong>
        <small>11 mins ago</small>
        <button type="button" class="ms-2 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">Hello, world! This is a toast message.</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/@tabler/core@1.2.0/dist/js/tabler.min.js"></script>
</body>
</html>

generally what i noticed is that autohide mechanism not work when toast is showed instant, so if class show is added to toast it won't work.

@ethancrawford
Copy link
Collaborator

Ah, yes. @rubensrocha - @mikosamuraj hit the nail on the head here. It looks like it all depends on the show class that's applied to the toasts. The idea would be to start off without it being present, and then either applying it with javascript programmatically, or having a button that toggles the toast. Have a go with that - let us know if you have any further issues 🙂

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@rubensrocha @ethancrawford @mikosamuraj
0