Form inside Owl Carousel version 1&2

Question

I am building a simple form inside an Owl Carousel but I can't get it to work on their version 2.

The problem is when the user click inside the input type on the second version the console log gives an error :Uncaught TypeError: Cannot read property 'name' of undefined.

on the first version everything works fine. Here is a fiddle for v1 I was just wondering if somebody can take a look, I tried using mouseDrag:false but it doesn't do the trick.

And here is the link for version 2 and the code goes like this:

$(document).ready(function () {
    var owl = $('.owl-carousel');
    owl.owlCarousel({
        items:1,
        mouseDrag:false
    });
    // Go to the next item
    $('.customNextBtn').click(function () {
        owl.trigger('next.owl.carousel');
    })
});

Answer 1

This post is over 3 years old, but I came across the same issue. It took me hours to find a solution, so I want to share it with anyone who might be interested.

I don't know what exactly causes the error, but I figured that the error is thrown whenever the focusout event is triggered. Unfortunately, preventing focusout from bubbling didn't solve my problem.

After browsing the project's issues on GitHub, I came across this article where user with nickname "ghost" suggests a solution. The problem can be avoided by disabling onclick and onchange events of the input.

This code worked for me:

$("#controls").on('click change', function(event) {
    event.stopPropagation();
});

where #controls is a <div> wrapper around all my form controls