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

Tips for extracting JSON data from an API with identical names as values

I am working on a project to create a data search system using JSON. The JSON data is stored in a REST API, and the structure of the API is as follows: [ { "info": "cute but big animal", "type": "pig", ...

javascriptnode.jsjsonapirest

Tips for passing an object as an argument to a function with optional object properties in TypeScript

Consider a scenario where I have a function in my TypeScript API that interacts with a database. export const getClientByEmailOrId = async (data: { email: any, id: any }) => { return knex(tableName) .first() .modify((x: any) => { if ( ...

javascripttypescript

Extracting web search result URLs using Puppeteer

I'm currently facing an issue with the code I've written for web scraping Google. Despite passing in a specific request, it is not returning the list of links as expected. I am unsure about what might be causing this problem. Could someone kindly ...

javascriptnode.jspuppeteer

What is the best way to send a variable from a Vue view to a Laravel controller using InertiaJS in Laravel

How can I pass the 'CourseId' variable from a page view to a controller for deletion? I am having trouble accessing the variable: Page View: this.$inertia.get(this.route('applications.courseDelete', CourseId )) Route: Route::get(&apos ...

laravelvue.jsinertiajs

Encountering the "Next Router not mounted" error while attempting to retrieve the locale variable from the path

In order to access the locale and locales properties from use router, I am importing them from next/router. However, an issue arises when using next/router. Interestingly, the problem disappears when I switch the import to next/navigation. Unfortunately, ...

javascriptreactjsnext.js

Enhance Vaadin 14: Automatically adjust TextArea size when window is resized

Using Vaadin 14.1.19 in a project called "My Starter Project," I attempted to create a TextArea that supports multiple lines. Initially, everything seemed fine, but upon resizing the TextArea, it failed to adjust the number of visible lines. Here is the co ...

javascriptcssvaadinvaadin-flowvaadin14

Analyzing the functionality of Express with Mocha and Chai

Currently facing an issue with testing my express server where I am anticipating a 200 response. However, upon running the test, an error occurs: Test server status 1) server should return 200 0 passing (260ms) 1 failing 1) Test server statu ...

javascriptnode.jsexpressmocha.jschai

What is the method to verify if a variable in ES6 is constant?

I'm seeking advice on how to accomplish a specific task. I attempted using the try-catch method, but encountered some limitations: "use strict"; const a = 20; var isConst = false; try { var temp = a; a = a+1; a = temp; } catch (e) { isConst = ...

javascriptecmascript-6

What is the process for changing a DynamoDB table from PROVISIONED to PAY_PER_REQUEST using Node.js?

Currently, I have a DDB table set up with BillingMode: PROVISIONED and ProvisionedThroughput:{...}. My goal is to switch it to BillingMode: PAY_PER_REQUEST, but every time I attempt this change, I encounter the following error: TypeError: Cannot read prop ...

javascriptnode.jsamazon-web-servicesamazon-dynamodbaws-sdk

Attempting to showcase the data stored within MongoDB documents on my website's user interface

I am facing difficulties in showing the data stored in my database on the front end of my grocery list app, which is built using the MERN stack. I have a form that successfully sends data to MongoDB and saves it upon submission. In order to retrieve the d ...

javascriptnode.jsmongodbexpressreact-fullstack

Issues persist with Ajax form submissions; the submitted data never seems to go through

I have encountered variations of this issue multiple times, but despite analyzing numerous examples, I am unable to determine why my code is not functioning properly. <script> $('document').ready(function(){ $('datafixForm' ...

javascriptphpjqueryajaxforms

What is the best way to show a filtered list using a state that was created with useState in React?

Check out my code in CodeSandbox, consisting of 4 divs categorized as "Book" and "Article". There are buttons at the top to toggle between displaying all divs, only books, or only articles. However, clicking on any button currently shows all divs and gives ...

javascriptreactjsfilterreact-hooks

Is it possible to replicate the functionality of "npm run x" without including a "scripts" entry?

If you want to run a node command within the "context" of your installed node_modules, one way to do it is by adding an entry in the scripts field of your package.json. For example: ... "scripts": { "test": "mocha --recursive test/**/*.js --compiler ...

javascriptnode.jsnpmcommand-line-interface

Tips for resolving the issue of table rows becoming detached in Laravel when using Vue.js: How can I prevent my table rows from being split

I am facing an issue while trying to create a table using Vue.js and Laravel. The problem is that each row of the table data is being displayed as a separate table. Despite making changes to the code in both Vue and the controller, I cannot seem to resolv ...

laravelvue.js

Display items in a not predetermined order

Despite its simplicity, I am struggling to get this working. My aim is to create a quiz program using JavaScript. Here is the basic structure: <ul> <li>option1</li> <li>option2</li> <li>option3</li> </ul> &l ...

javascripthtmlcss

Animating a background image to slide in from the bottom to the top using CSS transition

Here is a link to a codepen example: https://codepen.io/jon424/pen/XWzGNLe The current effect in this example involves covering an image with a white square, moving from top to bottom when the "toggle" button is clicked. I am interested in reversing this ...

javascripthtmlcss

Binding Font Awesome icons in Vue.js

Recently, I made some changes to my code that is similar to the Simon game. Initially, everything was running smoothly with buttons for the arrows and using the @mousedown event. However, in an attempt to enhance the appearance by incorporating font awesom ...

vue.js

Tips for Properly Positioning Floating Pop-Up Messages Using CSS and jQuery

I was experimenting with adding a button that triggers a popup message to my website. I followed a coding tutorial using jQuery and CSS, which looks like this: Javascript : !function (v) { v.fn.floatingWhatsApp = function (e) {...} }(jQuery); CSS : .fl ...

javascriptjqueryhtmlcssbutton

execute the execCommand function following an ajax request

I am currently developing a WYSIWYG editor and encountering an issue with image handling using execCommand. Here is a simplified example of my page structure: <div id="buttons_panel"><input id="img_submit" type="button"/></div> <div ...

javascriptajaxexeccommand

The Vue-cli Webpack template is experiencing issues with correctly serving static fonts

Within my configuration file index.js, specifically in the build section, I have specified: assetsSubDirectory: 'static', assetsPublicPath: '/path/to/subdirectory/', This means that the static fonts sourced from a theme template impor ...

webpackvue.jsvuejs2vue-cli