JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <title>jquery input type file change bug</title>            
    </head>
    <body>
        <form id="f">
            <input type="text" class="i" />
            <br/>
            <input type="checkbox" class="i" />
            <br/>
            <input type="radio" class="i" />
            <br/>
            <input type="file" class="i" id="i" />
            <br/>
            <a href="#" class="t api">I'm a trigger for the input file! (classic click)</a>
            <br/>
            <a href="#" class="t jq">I'm a trigger for the input file! (jQuery click)</a>
        </form>
    </body>
</html>

JavaScript

$(function(){
    
    $("#f").on("change", ".i", function(){
        console.log($(this));
        console.log($(this).val());
    }).on("click", ".t", function(){
        console.log("click?"); //this doesn't triggers on FF3.6
        if($(this).hasClass("jq")){
            $("#i").click();
        }else{
            $("#i")[0].click();
        }
        return false;
    });
    
});