Other <input> elements lose focus whenever there is a mouseout on the canvas while in text edit mode

[SLKnutson]

Version

5.2.1

https://jsfiddle.net/6hmuzak0/1/

Information about environment

Any browser

Steps To Reproduce

1. Enter text edit mode on the i-text
2. Click into the text input
3. Move your mouse out of the text input, then back into it
4. Type a character

Expected Behavior

The new character should go into the text input

Actual Behavior

The new character goes into the i-text

Notes

Looks like the code to refocus was added because of #3661

Essentially, the code added makes up for the lack of a click event if you start your click inside of the canvas but finish your click outside of the canvas. The click event is what fabric relies on to focus back into the hidden text area. The focus is lost while the mouse is down because to the browser that is effectively a mousedown event outside of the hidden text area. This manifests itself in things like not being able to type/delete while you are dragging the mouse to change the selection in a text area.

Some ideas I for possible solutions:

• Immediately refocus the hidden text area when the focus is lost to a non-input element while you are in text edit mode, remove the existing focus code in mouse out. Being able to type/delete while selecting could be a good thing, and I'm guessing fabric would be able to handle it.
• Only focus the hidden text area on mouse out if the mouse is currently down
• Move the logic from the textbox onClick function to something that runs on mouse up, remove the existing focus code in mouse out
• Add a 'focusout' event to the textbox that keeps focus when the focus is transferring to the body, remove the existing focus code in mouse out

Thanks!

[ShaMan123]

good catch

[ShaMan123]

https://github.com/fabricjs/fabric.js/blame/be4c6cf4227f75826046f1f10b2778728421a663/src/mixins/canvas_events.mixin.ts#L165

#3759

I don't agree with the solution in the PR

[ShaMan123]

Immediately refocus the hidden text area when the focus is lost to a non-input element while you are in text edit mode, remove the existing focus code in mouse out. Being able to type/delete while selecting could be a good thing, and I'm guessing fabric would be able to handle it.

This is more or less what I did

[SLKnutson]

Wont that solution still take the focus out of the text input if you happen to move the mouse over the canvas at all?

[ShaMan123]

Wont that solution still take the focus out of the text input if you happen to move the mouse over the canvas at all?

focusing will trigger only if in editing mode and after mousedown

Originally posted by @ShaMan123 in #8179 (comment)