vue: Click Event Triggers on Complex Buttons are ignored in some environments

2022 and its still a thing…

I can confirm that @ericdrobinson’s PR fixes the issue for me on Photoshop CC 2019 macOS

@posva Sounds good to me. Do you have any input on whether or not I should add the macOS platform check to restrict the fix to macOS?

Ideally, the program should behave the same on CEP osx vs CEP windows

Other than that the checks you wrote look good

I think the problem is actually happend with CEF (Chrome Embeded Framework) I hit this issue https://stackoverflow.com/questions/60473957/cef-vuejs-performance-issue-on-listening-mouse-click-event-after-4-5-times-ren#

note , this question is not asked by me, that mean other people hit it too

Right, thank you for your suggestion @ericdrobinson !

@joaomlemos Then, to be clear, you can only confirm that the proposed fix in #11031 handles the CEF case that @boardend mentioned, yes?

This is important because, if so, you cannot globally declare that #11031 fixes the issue for CEP as well, which your initial comment seemed to somewhat ambiguously imply.

Also, if this is the case, then it may be a good idea to comment on #11031 with a link to @boardend’s comment above and mention on that PR that in your testing it seems to address the CEF problem.

I would still suggest that someone more familiar with the code in question take a good look at the proposed solution in #11031 as it seems that it might be a little too “lenient”.

@ericdrobinson Thanks a lot - I’m actually not a 100% sure which build we use but I’ll check that now, though I think it’s not the ESM one.

I did fork vue and already did create a separate branch - but I ran into trouble trying to build the source code.

Your response tells me I’m on the right path so I’ll keep trying, thanks!

UPDATE: It was my own stupid mistake that I couldn’t build it, resolved it, built the files - and now my project is in good shape again in adobe premiere!

EDIT: I decided to go with patch-package.

Probably wouldn’t work. This PR only contains fixes for the source code - no dist modifications were committed. You’d have to grab this PR and run the correct build command to output the version of Vue that you need.

I wanted to ask how I could get this bugfix into our system?

@atwhiteley Provided you only need the ESM build, you can use the branch I prepared on my own fork of the vue repository. Here’s how you would install it with NPM:

npm uninstall --save vue
npm install --save ericdrobinson/vue#v2.6.10-with-cep-fix

If you need a different build, you can do the following:

1. Fork my vue repository on GitHub.
2. Create your own branch off of my fix-adobe-cep-mouse-events branch.
3. Build the version of Vue that your setup needs and commit it to your branch.
4. Run the following in your project:

   npm uninstall --save vue
   npm install --save atwhiteley/vue#[your-branch-name]
   

This approach works perfectly for us.

Hi all, huge thank you for finding and fixing this bug. I spent the last couple days going crazy over debugging this, and I’m so happy to see this here.

This bug is causing our panel to be practically unusable in production in mac environments, and I wanted to ask how I could get this bugfix into our system? I really rather not wait for this to be merged & published. Is there a way to patch a bugfix such as this?

Again, huge kudos to finding and fixing this bug.

EDIT: I decided to go with patch-package.

EDIT 2 : I really can’t seem to make it work. I am having a lot of trouble building vue from source code. I hope this gets accepted as a fix ASAP.

I don’t own Photoshop so I won’t be able to test nor debug this problem. Can it be on nw.js as well? Maybe that could be tested

@posva We’ve narrowed the repro for this down to Adobe CEP contexts running on macOS. Adobe is aware of the problem but a fix from them will not address released applications.

From what I can gather by reading this comment from @yyx990803 on #6566, there is an issue here in event dispatch/processing with respect to the micro/macro task order.

Further, it appears that the code has subsequently been updated with a few workarounds “for environments that have buggy event.timeStamp implementations”.

It appears that the workaround for the event ordering issue that was implemented in ba0ebd4 to address #6566 ended up breaking things for CEP-on-macOS (as it did with a few other “broken environments”).

I would then propose that a solution would be to follow the examples set in 0bad7e2 and 7591b9d and simply bail out of this special-case processing when we detect that we’re in the “broken environment” that is CEP-on-macOS. This can be done like so:

1. Add the following to env.js

   export const isCEP = inBrowser && window.__adobe_cep__;
   

2. Add the following to events.js

   // #10366 Adobe CEP bug: event.timeStamp is not reliable
   isCEP ||
   

You will note that the above solution does not distinguish between macOS and Windows hosts (the latter of which does not have this issue). This would be for cross-platform consistency. It could easily be amended to check for macOS with something akin to the following:

/mac/.test(window.navigator.platform.toLowerCase()); // True on macOS; false otherwise.

I have tested this locally and the above does appear to resolve the issue. Thoughts? Concerns?

I made a standalone panel to demonstrate this but don’t get the same behavior on Windows 10 and Vue 2.6.10, but I don’t have a Mac to test:

Any Mac user should be able to run a single terminal command: defaults write com.adobe.CSXS.9 PlayerDebugMode 1, then clone the repo into the specified directory in the README and open it in Illustrator, After Effects, Photoshop or Premiere Pro via Windows > Extensions > clicktest, then access the CEF debugger easily via the right-click context menu on the panel.

EDIT: Eric corrected me on the version, this is 2.6.10 (not 2.6.1)