Multiple Instance of FocusPicker onChange

[IronLady]

Hi,

I am trying to build a page background customizer using Image focus.
I setup an element with some id and it has 2 hidden input field to hold the x and y value.

Then I initialize the FocusPicker and if the value changed, the 2 hidden field will get updated and later will be submitted along with the rest of the form.

Everything is fine if I use only single instance of FocusPicker. But, when I have two instance of FocusPicker, whenever I move the first focus, the 2 hidden field from the second instance that get updated instead.

I can see that the data attribute in the first focusPicker is fine, it's just the onChange function from the first instance doesn't get executed.

var _this = this;
var focusedImage = new imageFocus.FocusPicker(this.$('img.focus-picker')[0], {
    onChange: function(focus){
        $('[name="[' + _this.data.key + '][x]"]').val(focus.x);
        $('[name="[' + _this.data.key + '][y]"]').val(focus.y);
    }
});

[IronLady]

I use the unpkg version

[third774]

Hey there! Thanks for opening this issue!

Would you mind putting together an example that demonstrates what you're trying to accomplish on https://codesandbox.io/ and highlights the problem you're encountering?

[IronLady]

Hi,
really appreciate the response.

Here's the code : https://codesandbox.io/s/priceless-framework-6krce?fontsize=14&hidenavigation=1&theme=dark

There are 4 h3 element to hold the value of the focus whenever we move. Unfortunately, only the last set of h3 that get updated by the onChange event.

[third774]

Thanks! That's definitely not intended! Will try to dig into this soon.

[third774]

Whoa, so this is some real strange behavior. I think this might have something to do with the umd bundle? It works when I import things with ES modules.

https://codesandbox.io/s/modest-fire-dk2k3?file=/src/index.js

[third774]

Updated the build toolchain to use tsdx which is pretty great. This solved the issue. Here's an updated sandbox where the only difference is pointing to the newer umd bundle.

https://codesandbox.io/s/solitary-rain-6yz7m?file=/index.html

[third774]

lol, apparently this was a bug that existed in 1.0.2 and was fixed in 1.1.0 🤷‍♂️