I use featherlight for an image gallery, but it causes an error when I click on an input field in a form (not modal)

Question

I have images appearing in a repeating region — each region is a recordset of an item in an auction.

Clicking the images loads a featherlight gallery. However, in each item's region, there is a form that the user can submit to make a bid on the item.

As soon as I click inside the input field before even entering a dollar amount with the form as of yet unsubmitted, somehow featherlight interferes and throws an error : "Featherlight: no content filter found (no target specified)".

To be clear : the form doesn't pop up in a modal window... and there is no connection between the form and featherlight apart from the fact that the form is inside the section that contains this : data-featherlight-gallery data-featherlight-filter="a.gallery".

I'm not sure why there is this interference in the first place.

I've searched online and some people have mentioned that using id may be the problem, so I have removed the text input's id and left only the name, but the error persists.

I found a page on github "forms with dynamic content impossible in featherlight?" at https://github.com/noelboss/featherlight/issues/122 but while the title sounds promising, the comments are mostly beyond me and don't seem to be relevant to my situation.

<form id="encanform<?=$cordre?>" name="encanform<?=$cordre?>" action="encan.php" method="post" onSubmit="storeValues(this);miseNote(<?=$latestbid+10;?>,'<?=$lang?>',this.form.miseamount.value)" class="encanclass">


<input type="text" required class="frmess" name="miseamount" title="This field is required." value="" />


var cordre = 'section#<?=$cordre?> a.gallery';
$(document).ready(function(){
$(cordre).featherlightGallery();
});

Any time I click the field, that error happens :

Featherlight: no content filter found (no target specified)

Even though featherlight is supposed to be bound only to a.gallery, the input field/form is catching its attention.

Thanks in advance for your time!

Answer 1

OK I finally managed to work it out. I had to remove the data-featherlight string that bound everything, even if I specified only links with class of gallery.

But removing it from the HTML and only apply the class to the image links and then specifying the correct selector in jQuery fixed it for me.

Thanks anyway!