How to fix conflict Zoomooz.js with JQueryUI autocomplete?

Question

When I put zoomooz.js in a web page with jqueryui autocomplete, it work only the first time, drop-down menu no longer accept mouse click. To work I move the mouse on the target and click Enter Key on keyboard.

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/zoomooz/1.1.6/jquery.zoomooz.min.js"></script>
 
<script>
  $( function() {
var availableTags = [
  "ActionScript",
  "AppleScript",
  "Asp",
  "BASIC",
  "C",
  "C++",
  "Clojure",
  "COBOL",
  "ColdFusion",
  "Erlang",
  "Fortran",
  "Groovy",
  "Haskell",
  "Java",
  "JavaScript",
  "Lisp",
  "Perl",
  "PHP",
  "Python",
  "Ruby",
  "Scala",
  "Scheme"
];
$( "#tags" ).autocomplete({
  source: availableTags
});
  } );
</script>
 
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

<img class="zoomTarget" data-targetsize="0.05" data-closeclick="true" src="file.png">

tags autocomplete not work always, only the first time, but if I delete zoomooz, it work fine

Welcome to Stack Overflow. Do you see any errors in Console when the page loads? Do you see any after you try to load Autocomplete? Based onm what I see in GitHub, it does not appear to have conflicting NameSpace, so it's hard to see if there would be an issue. — Twisty, Oct 18 '19 at 03:41
Also it looks like youare not using jQuery UI Autocomplete: https://api.jqueryui.com/autocomplete/ `minChars`, `autoFill`, and `mustMatch` are not part of that library. — Twisty, Oct 18 '19 at 03:43
excuse me, I copied zoomerang but it's zoomooz.js. Now you can run code and see the problem — , Oct 19 '19 at 09:13
Looks like the `click` event is conflicting on the 2nd round. The menu comes up but you cannot select an item in the menu. — Twisty, Oct 19 '19 at 16:07
clickTarget.on("click", function(evt) { // closeclick not available here... if(settings.closeclick && zoomTarget.hasClass("selectedZoomTarget")) { settings.root.click(); } else { zoomTarget.zoomTo(settings); } evt.stopPropagation(); }); the problem is in evt.stopPropagation(); I think — , Oct 20 '19 at 15:26

Twisty · Answer 1 · 2019-10-19T16:25:45.550

I am unable to replicate the issue as you described it. If you're using jQuery UI Autocomplete, you must use the correct options. Here is a working example.

$(function() {
  var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
  ];

  $("#numean").autocomplete({
    source: availableTags,
    minLength: 1,
    open: function() {
      console.log("Open Triggered");
    },
    focus: function() {
      console.log("Focus Triggered");
      return true;
    },
    select: function() {
      console.log("Select Triggered");
      return true;
    }
  });

  $(".zoomTarget").zoomTo({
    duration: 1000,
    closeclick: true,
    targetsize: 0.05
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zoomooz/1.1.6/jquery.zoomooz.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input type="text" id="numean" value="">
<br />
<img class="zoomTarget" width="50%" src="https://i.imgur.com/FThOLcL.jpg">

See More:

Update

After some testing, I can see that bubbling of the click event is being disrupted. For example, in the example above, on the first round, everything works as expected. On the second search, you can ↓ to your selection and press Enter and focus and select is triggered. Yet if you try to move the mouse and click the item, only focus is triggered. I am pretty sure the conflict comes from the closeclick: true setting. I think this is listening on a higher scope after a Zoom then the click event for select.

I would advise setting closeclick: false and then creating another closing method. Either a button or some other more specific event.

You may also notice I loaded Zoomooz first before jQuery. I noticed if they loaded in the other order, there was some weird window conflicts.

excuse me, I copied zoomerang but it's zoomooz.js. Now you can run code and see the problem — , Oct 19 '19 at 09:14
I can't find the solution, I'm going crazy. I think I will have to give up the zoom — , Oct 22 '19 at 09:17

How to fix conflict Zoomooz.js with JQueryUI autocomplete?

tags autocomplete not work always, only the first time, but if I delete zoomooz, it work fine

1 Answers1