I am trying to trigger the opening of a calendar date picker when clicking on a related text field. My HTML looks like this:

<form action="test.html" method="post">
   <input type="date" id="dueDate" name="dueDate">
   <input type="text" id="dateText" name="dateText" onclick="dateTextClick()">
</form>

and my Javascript looks like this:

<script>
    function dateTextClick() {
        var $input = document.querySelector("#dueDate");
        $input.focus();
        $input.click();
    }
</script>

The first line does work, and the date input receives the focus. However, the click action is not triggered, so the date picker calendar does not appear.

In case it's relevant, this code is embedded in a Joomla article, but so far in my experience that hasn't made a difference to the use ofJavascript.

I would be grateful for any pointers as to how to fix this!