How can I interact with form inputs in the Fancybox3 caption block?

Question

I'm using the custom templating to add input fields for a form in the caption region:

..fancybox({
  caption: function (instance, item) {
    return "FORM CONTAINING AN INPUT FIELD";
  }
}

The fields display nicely, but I can't actually click any of the form elements. Fancybox just steals the input for interacting with the image. Is there a way to make the stuff in the div.fancybox-caption-wrap be able to handle their own input and keep the image above it? Basically, just to make it work like the div.fancybox-controls which allows interactivity (and acts as a top for the image).

I tried searching for options on the documentation page but nothing seemed to fit or work. The "touch" event seemed like it might steal events, but on/off made no difference. Disabling "closeClickOutside" also doesn't help. Interacting with form elements worked with Fancybox2 without any extra steps. What else can I try?

Answer 1

By default all Pointer events are disabled in caption area.

To enable input text or any other html fields inside fancybox caption box add this css rule.

.fancybox-caption-wrap {
    pointer-events: all;
}

I am using fancybox-3.1.20 with .fancybox-custom-layout

here is my working code.

            caption: function (instance, item) {
                var caption = $(this).data('caption') || '';

                if (item.type === 'image') {
                    caption = '(<span data-fancybox-index></span>/<span data-fancybox-count></span>)' + '<br />' + (caption.length ? caption + '<br />' : '') +
                    '<input type="text" value="comment">' +
                    $('#comments_panel').html()
                    ;
                }
                return caption;
            }

Checkout the screenshot of my fancybox image comments panel inside caption area.