Resizing on touch devices loses selection

[sirkosi]

Reduced Test Case

https://codepen.io/sirsir1/pen/GRZJaZG

Bug Description

When providing simple HTML-Markup to eventContent, the dragged (to be resized) Element loses the resize markers before the resize can be done.
This only occurs when you touch within the text area, if you tap in the part of the Element without text it works as expected (resize markers stay and can be used).

Also, when providing plain text content to eventContent it seems to work fine.

Screenshots

[arshaw]

Could this issue be related to this other issue? #5691

[sirkosi]

@arshaw from what I understand the element in #5691 keeps freezing, which is definitely not the case with this issue here. The element stays fully functional, only the resize markers disappear.

[sirkosi]

A functional workaround at the moment for this issue is to reconstruct any html-markup via createElement functions.

Instead of:

eventContent: { html: '<span>F2<br><i>18:00</i></span>' }

Use this:

eventContent: function(arg, createElement) {
  return createElement('span', {}, createElement('span', {}, 'F2'), createElement("br"), createElement('i',{}, "18:00"));
}

[arshaw]

@Sir-ko , could you clarify what you mean by "This only occurs when you touch within the text area"? What text area? Shouldn't you be interacting with the circle resizers? If you could post a video or animated GIF with you interacting with it, that would be really helpful.

Also, what type of browser/device are you using?

[sirkosi]

@arshaw Of course, I will try my best to explain my findings.

Regarding "This only occurs when you touch within the text area" I was refering to the text and blank space inside the element, see the following screenshot (I hope the image is not too confusing).

In the following video I'm trying 2 times to select the element by clicking on the text. The third time I clicked into the upper right area of the element without text. Only on the last attempt the resize markers stay in it's place. The first two times it is not possible to select the element in order to resize it.

Screenvideo: https://www.dropbox.com/s/5cq8rr23vb0efls/broken_element_selection.mov?dl=0

Please let me know if this was clear or if you need more information.

To reproduce this, I am using Safari on iPhone (iOS 13.5.1) and Chrome v84.0 on Android.

[sirkosi]

@arshaw I could reproduce it easily on MacOS (10.15.5) with Chrome (84.0.4147.105) Mobile view.

https://www.dropbox.com/s/32vy7bv6v400r10/broken_element_selection_2.mov?dl=0

[arshaw]

@Sir-ko thank you so much. I finally understand and can reproduce. I'll work on a fix for the next minor release

[arshaw]

this has been fixed in 5.3.0