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" />
            <input type="checkbox" class="i" />
            <input type="radio" class="i" />
            <input type="file" class="i" id="i" />
            <a href="#" class="t">I'm a trigger for the input file!</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?");
        $("#i").click();
        return false;
    });
    
});