Dogfalo / materialize

Materialize, a CSS Framework based on Material Design
https://materializecss.com
MIT License
38.87k stars 4.74k forks source link

Pulse effect to perform false trigger on the pulse wave #6677

Closed afarago closed 1 year ago

afarago commented 1 year ago

Expected Behavior

When clicking adjacent with a click handler to an element with pulse effect on I expect nothing to happen.

I think the right element should be clicked when one click on the element, and for the white-space, either no click handler or the current behaviour.

image

Current Behavior

The problem is coming up if there are multiple elements with pulse effect. When you click on the item the topmost (placing order or z-index) will get the click event. The pulse will even overlap to the adjacent item.

image

Possible Solution

I was able to circumvent the problem by adding

.pulse::before {
  pointer-events: none;
}

Steps to Reproduce (for bugs)

  1. Add any two buttons even as suggested in the documentation.
  2. Just leave the display: flex from the container to keep them close
  3. Try to click on the first button (when the pulse wave gets to the leftmost point from the right button)
  4. Check: is the first first button clicked?
<div id="test">
  <a class="btn-floating pulse"><i class="material-icons">menu</i></a>
  <a class="btn-floating btn-large pulse"><i class="material-icons">cloud</i></a>
  <a class="btn-floating btn-large cyan pulse"><i class="material-icons">edit</i></a>
</div>
<script>
  $("#test a:nth-child(1)").click(()=>console.log("first"));
  $("#test a:nth-child(2)").click(()=>console.log("second"));
  $("#test a:nth-child(3)").click(()=>console.log("third"));
</script>

Context

No additional context.

Your Environment

Jerit3787 commented 1 year ago

Hi, this project is no longer maintained! The community-managed fork is still being maintained. Please open an issue there instead. Thanks! https://www.github.com/materializecss/materialize

afarago commented 1 year ago

Many thanks, I have changed my project, and checked the Materialize v1.2.1 version. Unfortunately the issue still persists - I will post the issue there as well.

https://github.com/materializecss/materialize/issues/326