JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css">
<form action="/echo/js/?js='default form action'" method="post">
    <button>Default Action</button> <br>
    <button formaction="/echo/js/?js='test 2'"><span>Test 2</span></button> <br>
    <button formaction="/echo/js/?js='test 3'" class='ui'>Test 3</button>
</form>

<hr>
<button class="trigger">Trigger Click Event on Test3</button>
<hr>
<p><b>Default Action:</b> Should go to 'default form action'</p>
<p><b>Test 2:</b> Should go to 'test 2'</p>
<p><b>Test 3:</b> Should go to 'test 3'</p>

<p>Test 3 ignores the formaction attribute whenever directly clicked (with a mouse, etc.). The click event handler, however, works as expected.</p>

JavaScript

$(".ui").button();
$(".trigger").on("click", function(){
    $(".ui").click();
});