Button focus shadow and wave flicker

[yanickrochon]

I have two issues with the Button component.

1. The button shadow disappears when it receives focus. I would actually expect the button not to have shadow until it is focused, so this looks off compared to other material UI libraries (e.g., MUI)
2. The wave effect when clicking on the button causes flickers when hovering rapidly off and on, as demonstrated in the example below:

https://github.com/creativetimofficial/material-tailwind/assets/78461/c5aab791-70e7-412f-a41c-3c9bf3ea79ca

Note that all this is taken directly from the documentation site, not from a custom project.

[krakz999]

@yanickrochon Fixed the flickering, it is an upstream issue with the material-ripple-effects dependency. Created a PR for it -> https://github.com/sajadevo/material-ripple-effects/pull/1

In the meantime, this patch can be used with patch-package:

diff --git a/node_modules/material-ripple-effects/index.js b/node_modules/material-ripple-effects/index.js
index 3b41f14..49fd872 100644
--- a/node_modules/material-ripple-effects/index.js
+++ b/node_modules/material-ripple-effects/index.js
@@ -50,6 +50,7 @@ module.exports = class Ripple {
       {
         duration: 500,
         easing: 'linear',
+        fill: 'forwards'
       },
     );
   }
diff --git a/node_modules/material-ripple-effects/ripple.js b/node_modules/material-ripple-effects/ripple.js
index a40e898..6c79816 100644
--- a/node_modules/material-ripple-effects/ripple.js
+++ b/node_modules/material-ripple-effects/ripple.js
@@ -50,6 +50,7 @@ class Ripple {
       {
         duration: 500,
         easing: 'linear',
+        fill: 'forwards'
       },
     );
   }

or if you don't want to use patch-package you can use this yarn resolution in package.json:

"resolutions": {
    "@material-tailwind/react/**/material-ripple-effects": "krakz999/material-ripple-effects"
  }

Make sure to delete any cached builds after applying any of those above.

I'll take a look at the shadow as well later sometime.