If I have a simple code snippet like the following:
<ListItem
button={true}
>
<Typography variant='caption' color='primary'>
{value}
</Typography>
<Button
onClick={foo}
>
Button
</Button>
</ListItem>
When clicking anything inside the ListItem, the ripple effect is triggered as expected. However, when clicking the button, I do not want the ripple effect of the parent component to be activated. How can this be accomplished?
To prevent event propagation, implement event.stopPropagation() within the button's click handler. Specifically, include it inside the foo() function for your scenario.
If you want to control the ripple effect in a Material-UI ListItem component, you can utilize the disableRipple property. Simply set it to true when clicking on a button and set it to false when clicking on the list item itself. Here's an example:
const disableRipple = () => this.setState(prevState => ({
...prevState,
parentDisableRipple: true
}));
const enableRipple = () => this.state.parentDisableRipple && this.setState(prevState => ({
...prevState,
parentDisableRipple: false
}));
return (
<div>
<Hello name={this.state.name} />
<p>
Start editing to see some magic happen :)
</p>
<ListItem button={true}
disableRipple={this.state.parentDisableRipple}
onClick={enableRipple()}>
<Typography variant='caption' color='primary'>
{value}
</Typography>
<Button onClick={foo} >Button</Button>
</ListItem>
</div>
);
I've created a playground on STACKBLITZ where you can experiment with this setup.
UPDATE
An alternative solution suggested by @Domino987 involves using onMouseDown along with event.stopPropagation(), as well as wrapping the contents in a <ListItemSecondaryAction> wrapper. You can find more details and examples in this thread.
I have updated my STACKBLITZ to showcase both of these solutions.
<ListItem button={true} matRipple #parent>
<Typography variant='caption' color='primary' matRipple [matRippleTrigger]="parent"
[matRippleDisabled]="true">
{value}
</Typography>
<Button onClick={foo}>
Button
</Button>
</ListItem>
For a smooth animation effect, make sure to include a template variable for the element you want to animate. Then, activate the parent ripple by setting the [matRippleTrigger] option on the children elements.
Currently, I am developing a website called "usborroe.com" and have just set up a GeoTrust Business ID SSL Certificate. However, despite my efforts to ensure full encryption on the site, an error message is indicating that it is not fully encrypted and t ...
My current challenge involves dealing with a JSON string structured like this: {"cat1":"m1","cat2":["d1","d2","d3"],"cat3":["m1","m2","m3","m4"]} As part of my learning process in Javascript and AJAX, I am attempting to display the different values based ...
My website is experiencing compatibility issues with certain browsers, such as Firefox. I want to display a message when users visit the webpage using an unsupported browser, similar to how http://species-in-pieces.com shows a notification saying "Works ...
Just curious, how can I make my navigation menu adjust its width to match the div box? Any help would be appreciated! If you'd like to see an example, here's a jsfiddle link: http://jsfiddle.net/AtM2Q/ Below is the code snippet: <html> & ...
Take a look at my simple plunker Within the code, I am attempting to link a scope variable to an object property. $scope.name = 'World'; var obj = { "name":$scope.name } $scope.$watch('name', function(){ console.log(obj["name"]); ...
I recently came across some advice suggesting that a website should still be able to function properly even if the CSS files are not loaded. What approach do you think would work best in this situation? Would it be more effective to use <table width=50 ...
Currently, while working on my NUXT project, I am facing a situation where I find myself repeatedly copying the same actions into multiple store modules. To streamline this process, I have extracted these actions into a separate file and now import them in ...
Encountering errors with the uploadthing and NextJS integration. The upload feature was functional until version 14, but now facing issues. Reverted back to NextJS version 13 only to encounter console errors (Windows VSCode Terminal). PS C:\Users&bsol ...
Hey there! I'm diving into the world of React and TypeScript. My goal is to toggle a boolean state (true/false) using a handler function. While I've come across solutions in ES6, I'm struggling to grasp how it can be implemented in TypeScri ...
I want to create a randomized array with DOM elements, here's what I have so far: var allTargets=$('#target1, #target2, #target3, #target4'); var randomTargets=null; randomTargets = allTargets[Math.floor(Math.random() * allTargets.length)]; ...
During my coding journey, I encountered a situation where I was attempting to return an object from an arrow function. However, I noticed that the code snippet below was simply returning undefined. After some investigation, I determined that the curly br ...
In my current project, I am focused on creating fully customized buttons for the prev/next functionality. Instead of relying on pre-made icon strings like those found in fonts such as font-awesome, I want to build a custom element from scratch. While I hav ...
I successfully compressed and compiled my JavaScript and SCSS files using webpack. The SCSS file is extracted by the 'extract-text-webpack-plugin' into an external CSS file. Below is the code snippet: var path = require('path'); var we ...
I am trying to slowly reveal the h1 tag using jQuery for demonstration purposes. The scroll function is working when I manually click to initiate it, but I am having trouble triggering it automatically. I feel like I might be missing something simple and ...
Looking for assistance with a javascript and DOM code improvement. I currently have a page navigation bar structured like this (used on certain pages): <div id="pagebar"> <a href="iraq_pixra1.html">1</a> <a href="iraq_pixra2.html"> ...
Imagine there is an element with the class .selector. This class defines its style. Once the page has finished loading, some JavaScript code is executed - the specifics are not important. What matters is that the CSS properties have set the object's ...
Is there a way to wrap a 3rd party library that loads asynchronously into an Angular service? What is the best practice for incorporating such libraries as services in Angular? Currently, I am approaching it like this: angular.module('myAPIServices ...
While analyzing a Heap snapshot, I came across a retainer hierarchy that looks like this: Is it possible that the MuiThemeProviderOld element (highlighted in yellow and from the @material-ui/core library) is causing a memory leak for my gui instance as sh ...
Hey there! I'm fairly new to the world of servers, and I've been learning by watching YouTube tutorials. Following one such tutorial, I installed 'connect' using npm in my project folder. Here's the structure of my project: serv ...
Encountering a routing issue while using react-router-dom v6 to manage the functionality of "cart items" in my application. Strangely, the cart items fail to show up when clicking on the "cart" link on the navbar header. However, it functions correctly and ...