Editable React-MaterialUI TextField component

Question

I'm creating an editable text field using Material-UI and React.

• When you are outside the text field it appears like a div or a span element:

• But when you mouseover it, an edit icon appear:

• And when you ckick it, the message becomes like a classic text field:

• The issue I have is that everything works fine except the fact that I can't click on the edit icon (it becomes flashing)

• I'm sharing what I already did: https://codesandbox.io/s/jny3704v63

• I know the source of the problem but I don't know how to fix it! The problem is that when you mouseover the edit icon, we are in a mouseout event of the text field and the handleMouseOut function will be executed.

• You can check that by commenting the content of handleMouseOut but the icon will not disappear when you leave the text field!

Any idea ?

Answer 1

You can fix this by using onMouseEnter and onMouseLeave instead of onMouseOver and onMouseOut. You can read about the differences here: https://javascript.info/mousemove-mouseover-mouseout-mouseenter-mouseleave