Request: toast backdrop

1

I use toasts to confirm user actions. This works great, but the interface behind the toast still accepts user input, like button click. Although of course this is only just 1500ms, I still would like to disable user interaction by using a backdrop or ‘disableUserInteraction’ param. Or is there another way to easily do this?

I think a regular backdrop would be enough, with transparant background color by default, customizable by css var.

this.$app.toast.show({

    backdrop: true,  <--- 
    disableUserInteraction: false,  <---

    icon: '<i class="material-icons">check_circle</i>',
    text: __('__PLACEHOLDER_CONFIRM_ITEM_SAVED__'),
    position: 'center',
    closeTimeout: 1500,
    on: {
	close: function() {
	    this.app.views.current.router.back();
	}
    }
});
2

Well, but that is an idea of Toast - to be unobtrusive :slight_smile:

You can just lock the UI behind when toasts opened by adding this CSS:

html.with-modal-toast .view {
  pointer-events: none;
}

this will prevent any user interactions when toast opened :wink: