driver.js icon indicating copy to clipboard operation
driver.js copied to clipboard

Problem when element position changes after popover opens

Open vitorleonel opened this issue 5 years ago • 1 comments

In my application has a sidebar with button for toggle width (hide or show). When add step in this button, and user click in this button, the stage position crash.

Exists idea for fix this or options in current version for fix this?

See this simulation: simulation

This is because the red circle changes position when clicked.

Since, Thank you.

vitorleonel avatar Oct 19 '19 21:10 vitorleonel

I saw that we have driver.refresh (), which reloads the current step.

I made a click and mouseover event on the element to fire driver.refresh (). It worked.

Is there any better way to do this, something native, for example? I'm feeling that the way I did it is a problem.

vitorleonel avatar Oct 19 '19 22:10 vitorleonel

I am using the code below to refresh the overlay position with a small delay (here 500ms). This allows the clicked element to handle any of its own logic and move into a new position.

The user can keep interacting with the highlighted element using mouse clicks and the overlay and popover will follow (with a small delay of 500ms).

const DRIVERJS_REFRESH_DELAY_ms = 500;

driver = new Driver( {
    onHighlighted: function (el) {
      // set up event handler to catch clicks on the highlighted element:
      $(el.getNode()).on(
        "mousedown.mydriverjs", function (ev) {
          // Need to call driver.refresh() with a delay to allow element to handle it's own events
          // and move itself into new position
          window.setTimeout(function () { driver.refresh(); }, DRIVERJS_REFRESH_DELAY_ms);
        }
      );
    },
    onDeselected: function (el) {
      $(el.getNode()).off("mousedown.mydriverjs");  // deregister event handler from onHighlighted
  }
}

Note:

  • This code uses jQuery to register and deregister event handlers, but of course one could also use plain JS addEventListener() / removeEventListener()
  • If the user can interact in other ways with the highlighted element, e.g. key presses, one would have to hook into those events as well.

mlisowsk avatar Dec 02 '22 09:12 mlisowsk

You can use refresh method as suggested.

We also just released v1.0 of driver.js which has been rewritten from the ground up. This issue should no longer exist. Please have a look at the docs and do let me know if you face any issues.

kamranahmedse avatar Jul 05 '23 17:07 kamranahmedse