Search code examples
reactjsmaterial-uitextfield

Editable React-MaterialUI TextField component

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: enter image description here

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

enter image description here

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

  • 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 ?

Solution

  • 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

    Edit React-MaterialUI-EditableTextField