How to detect if the MDC Snackbar has closed in JS?

Question

I'm using Material Design's Snackbar and VueJS and I'd like to be able to detect when the snackbar has closed.

Snackbar has a built in property called isOpen, so I'm able to use return this.snackbar.isOpen; as a boolean. However, there isn't a similar isClosed property, and when the snackbar does close, isOpen remains true.

It seems that isOpen is not reactive to closing, just to opening. But I want something to trigger when the snackbar is closes after having been open. Would appreciate any advice

I init my snackbar like so:

this.snackbar = new MDCSnackbar(document.querySelectorAll(".mdc-snackbar"));

score 3 · Answer 1 · answered Jan 16 '19 at 14:07

I solved it:

const snackbarElement = document.querySelector(".mdc-snackbar");
this.snackbar = new MDCSnackbar(snackbarElement);

snackbarElement.addEventListener("MDCSnackbar:closed", (event) => {

Previously, I was trying to add the eventListener to the snackbar itself

Aurel Bílý · Answer 2 · 2019-01-16T12:55:58.617

0

You should be able to listen to the MDCSnackbar:closed event, documented in the events section of the documentation.

Since you tagged your question with vue.js, I assume you are integrating MDC into a Vue app. In which case I would suggest you have a look at vue-mdc-adapter. They have more Vue-specific documentation for a snackbar as well. Your snackbar might then be something like:

<mdc-snackbar v-model="snack" @hide="handleHide"></mdc-snackbar>

@hide – notify listeners that the snackbar has been hidden.

edited Jan 16 '19 at 12:55

answered Jan 16 '19 at 11:43

Aurel Bílý

7,068
1
21
34

I saw that but didn't find the docs clear enough to tell me the correct way to do this. I stuck a listening on and passed a debugger into the callback and it never triggered – James Stewart Jan 16 '19 at 11:47
`this.snackbar.addEventListener('MDCSnackbar:closed', () => { debugger } )` is the code I used unsuccessfully – James Stewart Jan 16 '19 at 11:49
Also tried ` window.addEventListener('MDCSnackbar:closed', () => {debugger;})` – James Stewart Jan 16 '19 at 11:52
And I init my snackbar using: `this.snackbar = new MDCSnackbar(document.querySelectorAll(".mdc-snackbar"));` – James Stewart Jan 16 '19 at 11:55
do you know how I add an event listener to it? The docs aren't clear here – James Stewart Jan 16 '19 at 12:28
Thanks Aurel, the team are trying to avoid using dependencies where possible so I'll see if I can pick through the source code and extract the bits I need. – James Stewart Jan 16 '19 at 13:38

How to detect if the MDC Snackbar has closed in JS?

2 Answers2