JustinGuruTech / todo-react-firebase

Todo web-app made using react, firebase, and materialUI.
0 stars 1 forks source link

Strange behavior when clicking "sign in" from sign up page #17

Closed TheDizruptor closed 4 years ago

TheDizruptor commented 4 years ago

When clicking the text under the submit button that takes the user to the sign in page, sometimes it activates the onBlur of the selected element and doesn't open the sign in page. Not sure the cause yet.

TheDizruptor commented 4 years ago

This is happening because onClick requires both mouseUp and mouseDown to be triggered on the element. What's currently happening is:

  1. mouseDown on the link below the submit
  2. onBlur of the selected input causing the helperText to show up.
  3. helperText appears and adds a bit of space on the form, making the cursor now hover over the submit button
  4. mouseUp on the submit button, not fulfilling the onClick of the link below submit

This can be fixed by using the mouseDown event rather than onClick. It could also be bandaged using setTimeout on the onBlur functions, but this assumes the user only holds down the mouse button for whatever duration the setTimeout is. I'm sure there's another, better fix, but mouseDown will do just fine.

TheDizruptor commented 4 years ago

onClick changed to onMouseDown in various areas. Sort of a bandage and allows middle and right click to trigger the event, but it's still a better user experience than what it was before. Changes in user-accounts branch.