EditableViewer cannot be clicked on mobile

[alexconstantin]

Environments

• Framework name: Any
• Framework version:
• Moveable Component version: 0.35.0
• Testable Address(optional): https://codesandbox.io/s/9ogvkk?file=/src/App.tsx:1044-1058 https://9ogvkk.csb.app/ (can be reproduced by opening this with Chrome device simulation)

Description

Clicking the + / - buttons works on desktop, but on mobile it has no effect. This functionality was working in previous versions of Moveable.

[daybrush]

@alexconstantin I'll fix it soon.

[daybrush]

@alexconstantin

• lit-moveable 0.12.1
• moveable 0.35.1
• preact-moveable 0.37.1
• react-compat-moveable 0.23.1
• react-moveable 0.38.1
• svelte-moveable 0.27.1
• vue-moveable 2.0.0-beta.33
• vue3-moveable 0.10.1
• ngx-moveable 0.32.1

moveable's new version is released. Check it again.

[alexconstantin]

@daybrush Thank you! The button is now clickable again on mobile. However I found another scenario. Please check this link: https://codesandbox.io/s/gracious-wu-0ri1kz?file=/src/App.tsx

On the top of the page there is a button. Clicking it will alert the value "1". I've changed a bit the functionality for the +/ - buttons so that they will trigger a click event (using jQuery) on that button. However, nothing happens, both on desktop and mobile. Is the propagation of the click event stopped somehow? Is there a way to trigger click events in this scenario?

[daybrush]

@alexconstantin

In Moveable, stopPropagationd is applied to the click event.

And click event in react is SyntheticEvent. A problem may occur due to the difference in the order of react events and native events.

The following method is recommended.

const onButtonClick = () => {
      console.log(jQuery("#test"));
      requestAnimationFrame(() => {
        jQuery("#test").trigger("click");
      });
};

[alexconstantin]

@daybrush Thank you! It works now.