JSFiddle - React, Tailwind, and code Playground

HTML

<div class="draggable">
    <input type="file" style="z-index:1" />
</div>
<div class="draggable">
    <button>button</button>
</div>
<div class="draggable">
    <label>text here</label>
</div>

CSS

.draggable {
    border: 1px solid black;
    z-index:2;
}

JavaScript

$(".draggable").draggable({
    start: function (event, ui) {
        $(this).data('preventBehaviour', true);
    }
});
$(".draggable").find(":input").on('mousedown', function (e) {
    var mdown = new MouseEvent("mousedown", {
        screenX: e.screenX,
        screenY: e.screenY,
        clientX: e.clientX,
        clientY: e.clientY,
        view: window
    });
    $(this).closest('.draggable')[0].dispatchEvent(mdown);
}).on('click', function (e) {
    var $draggable = $(this).closest('.draggable');
    if ($draggable.data("preventBehaviour")) {
        e.preventDefault();
        $draggable.data("preventBehaviour", false)
    }
});