Immediately after `setState` target, the `moveable.target` is still not updated directly

Environments

• Framework name: moveable
• Framework version: v0.25.4-beta0 to v0.27.2
• Moveable Component version: -
• Testable Address(optional): https://codesandbox.io/s/silly-dream-ihd5s?file=/src/index.ts

Description

I need to handle the scenario when the user mousedown the targeted element, it can immediately be dragged.

To do it, I need to run this kind of code on mousedown the element:

target.addEventListener("mousedown", (e) => {
  moveable.setState({
    target: [target]
  });
  moveable.dragStart(e);
});

It was working before, until recently I realized after upgrade to the latest package, it doesn’t work anymore. The reason seems like because right after moveable.setState({ target: targetElem }), it doesn’t immediately set the moveable.target.

I created the codesandbox to replicate the issue. This is the screenshot:

[daybrush]

@chenxeed

• moveable 0.28.0
• react-moveable 0.31.1
• preact-moveable 0.30.0
• ngx-moveable 0.24.0
• svelte-moveable 0.18.0
• lit-moveable 0.5.0
• vue-moveable 2.0.0-beta.6
• vue3-moveable 0.3.0

moveable’s new version is released. and forceUpdate method is added. Check it again.

[daybrush]

@chenxeed

setState is asynchronous and forceUpdate is a synchronous method.

I will add a forceUpdate method to the moveable.