If is use select2 dropdown then then conditional rule is not apply

[usolfarman]

Hello,

I am using your code library, and it is amazing. Thanks for that. I am utilizing a country dropdown with the applied select2 functionality. However, if I use the select2 class in JS, the conditions rule is not executed. Can you please assist me with how I can use this? Below is the select2 example:

https://select2.org/dropdown

Thanks,

[bomsn]

Hey, you can specify the name of the actual target/conditional select field [name="xxx"] then use the class of the container to hide/show.

If this doesn't work for you, you might have to share some code samples.

[usolfarman]

Hello,
The name is already specified below is the code screenshot. when changed the dropdown to normal i mean remove select2 functionality then it is working fine. Please check and confirm
Thanks in advance.

[usolfarman]

Hello,
This is also not working if i use jquery datetime picker i mean the fields not visible or hide if i selected date from calendar. Can you please check this as well?

[bomsn]

Thanks, but can you share the actual rules that created for these fields so I can try and replicate the issue on my side?

Sure, will check the jquery datetime picker as well, just waiting for code samples from you.

[usolfarman]

Hello,

Click the below link to see the videos.
Backend
https://www.loom.com/share/d7f60faf4e3b4e8f9dbbc4ee5362fde6?sid=f7c772b6-8ec3-4a0e-be10-8ddbbb3eeb8b

Frontend
https://www.loom.com/share/43e258a7397b41d5af96cabe8373c0fd?sid=ed6feb87-6131-4502-a08e-3c58dc37b141

Also, if I change your JS code at line# 507 The date picker is working when the mouse move event is triggered and in the video, I have explained the issue regarding when select2 functionality is enabled then your code is not working. Please check this asap and fix it.

line# 507 From trigger[c].addEventListener("change", self.fieldListener, false);

TO
trigger[c].addEventListener("mousemove", self.fieldListener, false);

Thanks,

[bomsn]

Hello,

It seems that the issue is related to how these libraries make changes. They don't trigger the "change" event correctly on the original field. So, to fix this, you'll have to trigger this change yourself using something like this:

$('#select2_parent_v1').on('select2:select', function (e) {
    var originalSelect = this; // 'this' refers to the original select element
    var event = new Event('change', { bubbles: true, cancelable: true });
    originalSelect.dispatchEvent(event);
});

And same thing for datepicker field, it have its own set of change triggers, it doesn't necessarily call the 'change' event that we are listening to, so you have to trigger it yourself as well. When you initialize, make sure sure the 'change' event is triggered like this:

$("#datepicker_parent_v1").datepicker({
  onSelect: function (dateText, inst) {
    var originalSelect = document.querySelector('#datepicker_parent_v1');
    var event = new Event('change', { bubbles: true, cancelable: true });
    originalSelect.dispatchEvent(event);
  }
});

Let me know if this works for you.

[usolfarman]

Hello,

Great, your solution is working thanks so much.

[usolfarman]

Hello,
If input type is time like then it is not working

[bomsn]

do you mean as in <input type="time" />? if you're referring to a library, it's probably the same issue, you need to figure out how to trigger change event when the field is populated.

[usolfarman]

Yes I am referring to <input type="time" /> if I set this field is perent and select the time then the child/dependent field is not showing.

[bomsn]

I just tested and it works perfectly fine. Make sure you've setup the rules correctly. Also, the rule value should match the format of the time field (eg; 12:00)

[bomsn]

You can read more about this issue and how to fix here.

[usolfarman]

Thank you very much for the amazing code.