Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Pulse effect to perform false trigger on the pulse wave #326

Closed
3 tasks done
afarago opened this issue Jan 4, 2023 · 0 comments
Closed
3 tasks done

[Bug]: Pulse effect to perform false trigger on the pulse wave #326

afarago opened this issue Jan 4, 2023 · 0 comments
Labels
bug Something isn't working

Comments

@afarago
Copy link

afarago commented Jan 4, 2023

Before submitting...

Context

I have created two adjacent buttons for the user to choose from with a pulse effect. The pulse effect caused unexpected trigger of buttons and even false triggers.

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

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

Possible Solutions or Causes

I was able to circumvent the problem by adding

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

Steps to reproduce

  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>

Your Environment

  • Version used: 1.2.1
  • Browser Name and version: Version 108.0.5359.72 (Official Build) (64-bit)
  • Operating System and version (desktop or mobile): Windows, desktop, 11
  • Additional information you want to tell us:
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants