diff --git a/src/BootstrapBlazor/Components/Toast/Toast.razor.js b/src/BootstrapBlazor/Components/Toast/Toast.razor.js
index 4640ff84110..c3f1a8d3f24 100644
--- a/src/BootstrapBlazor/Components/Toast/Toast.razor.js
+++ b/src/BootstrapBlazor/Components/Toast/Toast.razor.js
@@ -3,6 +3,7 @@ import EventHandler from "../../modules/event-handler.js"
 
 export function init(id, invoke, callback) {
     const el = document.getElementById(id)
+    const progressElement = el.querySelector('.toast-progress')
     const toast = {
         element: el,
         invoke,
@@ -10,43 +11,48 @@ export function init(id, invoke, callback) {
         toast: new bootstrap.Toast(el),
         showProgress: () => {
             return toast.toast._config.autohide
-        }
+        },
+        progressElement
     }
     Data.set(id, toast);
 
     if (toast.showProgress()) {
-        toast.progressElement = toast.element.querySelector('.toast-progress')
         const delay = toast.toast._config.delay / 1000
-        toast.progressElement.style.transition = `width linear ${delay}s`
+        progressElement.style.transition = `width linear ${delay}s`
     }
 
-    EventHandler.on(toast.element, 'shown.bs.toast', () => {
+    EventHandler.on(el, 'shown.bs.toast', () => {
         if (toast.showProgress()) {
-            toast.progressElement.style.width = '100%'
+            progressElement.style.width = '100%'
         }
     })
-    EventHandler.on(toast.element, 'hidden.bs.toast', () => {
-        toast.invoke.invokeMethodAsync(toast.callback)
+    EventHandler.on(el, 'hidden.bs.toast', () => {
+        invoke.invokeMethodAsync(toast.callback)
     })
-    toast.toast.show()
+    EventHandler.on(progressElement, 'transitionend', e => {
+        toast.toast.hide();
+    });
+
+    toast.toast.show();
 }
 
 export function update(id) {
     const t = Data.get(id);
-    const { element, toast } = t;
+    const { element, toast, progressElement } = t;
     const autoHide = element.getAttribute('data-bs-autohide') !== 'false';
-    if(autoHide) {
+    if (autoHide) {
         const delay = parseInt(element.getAttribute('data-bs-delay'));
-        const progressElement = element.querySelector('.toast-progress');
 
         toast._config.autohide = autoHide;
         toast._config.delay = delay;
 
         progressElement.style.width = '100%';
         progressElement.style.transition = `width linear ${delay / 1000}s`;
-        EventHandler.on(progressElement, 'transitionend', e => {
-           toast.hide();
-        });
+    }
+    else {
+        toast._config.autohide = false;
+        progressElement.style.removeProperty('width');
+        progressElement.style.removeProperty('transition');
     }
 }
 
@@ -54,10 +60,12 @@ export function dispose(id) {
     const toast = Data.get(id)
     Data.remove(id)
 
-    EventHandler.off(toast.element, 'shown.bs.toast')
-    EventHandler.off(toast.element, 'hidden.bs.toast')
+    const { element, progressElement } = toast;
+    EventHandler.off(element, 'shown.bs.toast');
+    EventHandler.off(element, 'hidden.bs.toast');
+    EventHandler.off(progressElement, 'transitionend');
 
     if (toast.toast) {
-        toast.toast.dispose()
+        toast.toast.dispose();
     }
 }