Tips for detecting when the MDC Snackbar has been closed using JavaScript

I'm currently working with Material Design's Snackbar in combination with VueJS. My goal is to detect when the snackbar has finished closing.

The Snackbar object does have a property called isOpen, which allows me to check if the snackbar is open by using return this.snackbar.isOpen;. However, there isn't an equivalent property like isClosed, and even after the snackbar closes, the value of isOpen remains true.

It appears that the isOpen property only reacts to opening events and not to closing events. I am looking for a solution that will trigger an event when the snackbar finishes closing after being open. Any suggestions are greatly appreciated.

This is how I initialize my snackbar:

this.snackbar = new MDCSnackbar(document.querySelectorAll(".mdc-snackbar"));
javascriptvue.jsmaterial-designsnackbarmdc-components

Answer №1

The puzzle is now resolved:

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

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

Before, my mistake was attempting to attach the eventListener directly to the snackbar component 🙈

Answer №2

To listen to the MDCSnackbar:closed event, you can refer to the events section within the documentation.

Given that you have tagged your inquiry with vue.js, it seems like you are incorporating MDC into a Vue application. For this scenario, I recommend checking out vue-mdc-adapter. They offer more Vue-specific documentation related to snackbar usage. Your snackbar implementation could be something along these lines:

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to stop the page from scrolling once I reach the bottom of a specific div within it?

My webpage has multiple divs that share a similar structure: <div style="height:200px; overflow:auto;"> <div style="height:300px;"> <!--There is a lot of content here--> </div> </div> When the user hovers ove ...

javascripthtmlscroll

Exploring TypeScript to get a ref with the Vue Composition API

The issue I'm facing is related to Vetur underlining 'null' in the following line: const firstRef = ref<HTMLElement>(null) <template> <input id="first" ref="firstRef"> <button type="button&q ...

typescriptvue.jsrefvue-composition-api

Loading an animated SVG sprite file in real-time

Recently, I received an SVG sprite file from our designers to use in my app. The specified convention is to load the sprite at the top of the <body> element and then render icons using a specific code snippet: <svg class="u-icon-gear-dims"> ...

javascripthtmlcsssvg

Navigating a vast code repository in Node.js

As I prepare to start a Node.js project with a sizable codebase, my aim is to keep my code isolated from the node_modules directory. I am keen on utilizing namespaces and organizing my code into folders for better management. However, it seems like I woul ...

javascriptnode.jscodebase

Animating the Bookmark Star with CSS: A Step-by-Step Guide

I found this interesting piece of code: let animation = document.getElementById('fave'); animation.addEventListener('click', function() { $(animation).toggleClass('animate'); }); .fave { width: 70px; height: 50px; p ...

javascripthtmlcssanimation

Raspberry Pi 4: My LED is only blinking 8 times instead of the expected 16 times

I have encountered an issue with my program run, compilation, and result. In the screenshot below, you can see that my LED is only blinking 8 times instead of the anticipated 16 times. My expectation was for the LED to blink every 0.25 seconds for a total ...

javascriptnode.jsnpmraspberry-piraspberry-pi4

VueJS with Vuetify: Issue with draggable cards in a responsive grid

I am currently working on creating a gallery that allows users to rearrange images. To test this functionality, I am using an array of numbers. It is important that the gallery is responsive and displays as a single column on mobile devices. The issue I ...

javascriptvue.jsvuetify.jsvuedraggable

Tips for avoiding Client DOM XSS vulnerability in JavaScript

Upon completing a checkmarx scan on my code, I received the following message: The method executed at line 23 of ...\action\searchFun.js collects user input for a form element. This input then passes through the code without proper sanitization ...

javascriptjquery

Encountering a Typescript error when attempting to access the 'submitter' property on type 'Event' in order to retrieve a value in a |REACT| application

I am facing an issue with my React form that contains two submit buttons which need to hit different endpoints using Axios. When I attempt to retrieve the value of the form submitter (to determine which endpoint to target), I encounter an error while work ...

javascriptreactjstypescriptforms

The generation of the page fails due to the absence of defined data

Every time I try to start my server, the error message pops up saying 'data is not defined', even though I have already defined the data content. export default class App extends Component { data = [ { key: "john", val ...

javascriptreactjsreact-native

Tips for utilizing a switch statement

I'm a beginner in JavaScript and recently learned about the switch statement. I have an exercise where I need to convert numbers 1-10 into words like "one", "two", "three"... This is what I have tried so far: function sayNum(){ let numberArray = [ ...

javascriptarraysswitch-statement

Exploring the versatility of Vue.js through props and scoped slots

Coming from a React background, I am used to being able to easily alter children components before they render. However, after spending hours reading the VueJS documentation and searching forums, I have not been able to find a straightforward way to do thi ...

typescriptvue.js

Issue with jQuery hide() function in Internet Explorer 9

I need help with creating a hidden div that becomes visible when a user clicks a link. The code I have works in FF / IE7 / IE8 but not in IE9, where the div is always visible without any content. Any advice is appreciated! <script> $(document).r ...

javascriptjqueryinternet-explorer-9hide

Unexpected behavior: JQuery Ajax request not displaying Json object following recent update to JQuery version 1.10.2

Currently facing an issue with a project I am working on. The previous programmer used jquery 1.4.4, and I have updated it to 1.10.2 due to the designer using Bootstrap. However, after running it in version 1.10.2, one of the objects that was functional i ...

javascriptjqueryajaxjson

Building an Angular form that is reactive and dynamically populates fields from an array

I am currently working with Angular 9 and I am facing a challenge in implementing a component that utilizes reactive forms. Below is a snippet of my code: approval-edit.component.ts public nominationAllOf: NominationAllOf[]; public approvalEditForm: Form ...

javascriptangular

Retrieve information from Angular service's HTTP response

Calling all Angular/Javascript aficionados! I need some help with a service that makes API calls to fetch data: app.service("GetDivision", ["$http", function($http){ this.division = function(divisionNumber){ $http.post("/api/division", {division:di ...

javascriptangularjs

Why am I receiving a null response from my ajax request?

I have a working ajax call to fetch XML data from my REST API. However, when I try to echo the results, JQuery returns null. If I use var_dump on the results instead, JQuery accepts the information but it's not formatted correctly and causes errors. ...

javascriptphpjqueryajaxecho

Creating or updating JSON files using Node.js

I am currently working with JSON files that contain an array of objects. I am looking to update one of these objects and subsequently update the JSON file by overwriting the old file. I understand that this cannot be achieved using AngularJS, but rather wi ...

javascriptangularjsjsonnode.js

Is it possible to modify a dependency import based on the specific request?

How can I switch between test mode and live mode using Stripe's SDK based on a query parameter in my internal form service for collecting payments? For example, consider this route: router.post("/:formId", function(req, res, next) { let isTest ...

javascriptnode.jsexpress

A guide to assigning multiple classes to an element in Vue.js depending on the props!

Take a look at my code to grasp the issue. <template> <div class="header" :class="flat ? 'flat' : null" :class="app ? 'app' : null"> </div> </template> <script> export default ...

javascripthtmlcssvue.jsvuejs2