Pressing Enter in Multi Select is automatically submitting the form

Hello

I’m using aui-field-issuepicker

<fieldset>
        <div class="field-group">
            <label for="linked">Issue <span class="aui-icon icon-required"> required</span></label>
            <select class="aui-field-issuepicker hidden" multiple="multiple" id="linked-issues"
                    name="$name:selectedIssuesList"
                    data-remove-on-un-select="true"
                    data-ajax-options.query="true"
                    data-ajax-options.url="${req.contextPath}/rest-api/?currentJQL=$jqlQuery"
                    data-ajax-options.data.current-issue-key="$issueKey"
                    data-ajax-options.data.show-sub-tasks="false"
                    data-ajax-options.data.show-sub-task-parent="false"
                    data-ajax-options.data.current-project-id="">
            </select>
            <div class="description">Type issues you want to link</div>
            <div class="description" style="color:red" id="error"></div>
        </div>

however when i click enter in the select the form is being submitted, I tried several ways to prevent submit action.

First way was using aui-validation-form

AJS.$('#form-id').on('aui-valid-submit', function(event) {
        event.preventDefault();
    })

This is the form:

<form id="form-id" class="aui" action="ABC.jspa" method="POST">

Second way is onsubmit listener using jquery, however either ways form is being sent when pressing enter

Can you help in stopping form from being submitted

Thanks,
Ibrahim

Hi @IbrahimItani

In jQuery you can try this :

$(document).ready(function() {
    $('#form-id').on('keypress', function(e) {
        var keyCode = e.keyCode || e.which;
        if (keyCode === 13) { // 13 is the Enter key
            e.preventDefault();
            return false;
        }
    });
});

In AJS you can try this :

AJS.toInit(function() {
    AJS.$('#form-id').keypress(function(e) {
        var keyCode = e.keyCode || e.which;
        if (keyCode === 13) { // 13 is the Enter key
            e.preventDefault(); 
            return false;
        }
    });
});

Fabien

Hello @FabienPenchenat

thanks for the above, however weirdly it is till submiting the form no matter what I do

Regards,
Ibrahim

You can try that, it allows you to be more specific and perhaps prevent the submit in case your dropdown is open. Maybe adapt the code to validate the option when you click enter.

AJS.toInit(function() {
    AJS.$('.aui-field-issuepicker').on('keydown', function(e) {
        if (e.keyCode === 13) { 
            var isOpen = AJS.$(this).attr('aria-expanded') === 'true';
            if (isOpen) {
                e.preventDefault();
                e.stopPropagation(); // Stop the event from propagating to the form
            }
            // If the dropdown is not open, the Enter key behaves normally (e.g., for form submission)
        }
    });
});

Hello @FabienPenchenat
Thanks again for the above :slight_smile:
however stopping the propogation is ruining functionality of the above select
(pressing enter when choosing an issue). I did a workaround which is that I deleted the form and handled form submission using js

Thanks however for the above suggestions :slight_smile:

1 Like