search

tleunen / react-mdl

React Components for Material Design Lite
https://tleunen.github.io/react-mdl/
MIT License
1.76k stars 255 forks source link

Dialogl, ok action is active even when hovering over cancel #444

Open omerts opened 7 years ago

omerts commented 7 years ago

Hey,

When the dialog opens, by default it sets the first button as active, as if it is hovered. If the other button is hovered, without going over the first button, the hovered state stays the same.

You can see it in the demo: https://react-mdl.github.io/react-mdl/components/dialog/ Open the dialog, and hover over "disagree" without going over "agree", you will see "agree" staying active.

kradio3 commented 7 years ago

This is not a bug of react-mdl. The same behavior reproduced on clean mdl see codepen http://codepen.io/kradio3/pen/dOqZQg

omerts commented 7 years ago

@kradio3 On the clean mdl hovering over the agree doesn't remove th accent from it, so even if it is not the best design, it is consistent.

kradio3 commented 7 years ago

@omerts Yes, i found it. That because of .mdl-js-button. http://codepen.io/kradio3/pen/rWqeqB

Button doesn't lose focus on mouseleave

<button class="mdl-button">Agree</button>

Button loses focus on mouseleave

<button class="mdl-button mdl-js-button">Agree</button>

Because of losing focus keyboard's Enter will have different behaviors

react-mdl includes mdl-js-button class by default https://github.com/react-mdl/react-mdl/blob/master/src/Button.js#L27

This .mdl-js-button required by getmdl.io https://getmdl.io/components/index.html#buttons-section