RTE Dialogs unwanted behavior on Enter keys pressed

[Khalid Mahmood]

I am using RTE inside form. RTE with Image, Link and Clean Paste Options enabled each of them show a dialog accordingly. Dialog Actions buttons works fine but when Enter key is pressed any of dialog is open it submits the form that is not intended. it should close dialog only instead of submitting form. very strange behavior 

[Gokulraj Devarajan]

Hi Khalid,

We have validated your query.

We have created a sample to achieve this use case. We used the "DialogOpen" event, which will be triggered after the dialog is opened. We then added an event listener to the respective dialog element. Now, when the enter key is pressed, the newly added event listener checks for the code value and calls the "preventDefault()" method. After this, we removed the event listener in the "BeforeClose" event, which will be triggered before the dialog is closed.

Please find the attached code snippet and the sample for your reference.

Code Snippet:

@using Syncfusion.EJ2.RichTextEditor

 

<form method="post">

    <ejs-richtexteditor id="api" dialogOpen="onDialogOpen" beforeDialogClose="beforeClose" enterKey="DIV" shiftEnterKey="BR">

        <e-richtexteditor-toolbarsettings items="@ViewBag.tools"></e-richtexteditor-toolbarsettings>

        <e-richtexteditor-pastecleanupsettings Prompt="true"></e-richtexteditor-pastecleanupsettings>

    </ejs-richtexteditor>

    <div id="submitbutton">

        <button id="submitButton" type="submit">Submit</button>

    </div>

</form>

<script>

    var dialogElem;

    function onDialogOpen(args) {

        var tableDialog = document.getElementById("_tabledialog");

        var pasteCleanupDialog = document.getElementById("api_pasteCleanupDialog");

        var insertLinkDialog = document.getElementById("_rtelink");

        var dialog = (tableDialog && tableDialog.classList.contains("e-dialog")) ? tableDialog :

                (pasteCleanupDialog && pasteCleanupDialog.classList.contains("e-dialog")) ? pasteCleanupDialog :

                (insertLinkDialog as&& insertLinkDialog.classList.contains("e-dialog")) ? insertLinkDialog : null;

        if (dialog) {

            dialog.addEventListener('keypress', handleEnterKeyPress);

            dialogElem = dialog;

        }

    }

    function handleEnterKeyPress(args) {

        if (args.code === "Enter") {

            args.preventDefault();

            console.log("Enter action prevented");

        }

    }

    function beforeClose() {

        if (dialogElem) {

            dialogElem.removeEventListener('keypress', handleEnterKeyPress);

        }

    }

</script>

API: https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.richtexteditor.richtexteditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_DialogOpen

NOTE: Please check the id for the respective dialog element variables used above in your application.

Regards

Gokulraj Devarajan

Attachment: RTE_Inside_Form_5c49752.zip

[Khalid Mahmood]

HI, Gokulraj Devarajan.
I have RTE in too many pages of web application it is not feasible to add this code to all of pages.
this should be Dialog default behavior to handle Enter key when dialog is opened. I think this should be treated as bug of RTE and should fixed!

[Khalid Mahmood]

Hi Gokulraj Devarajan,

Still looking forward.
Enter Key should be automatically handed by the dialogs instead of Manually register and unregister event of RTE dialog because they are so many in RTE and Adding custom code handling isn't viable in every page.

I think this should be treated as bug of RTE and fix it.

[Gokulraj Devarajan]

Hi Khalid,

We are validating your query. We need to analyze this use case; fixing it at the source level might break all the other use cases related to the dialog and Rich Text Editor. We will update you with more details on or before July 27th.

Regards

Gokulraj Devarajan

[Khalid Mahmood]

Hi Gokulraj Devarajan,

Waiting for updates how I can solve this problem?

[Gokulraj Devarajan]

Hi Khalid,

We are still investigating the query "Source level fix to prevent enter action on Rich Text Editor dialogs when the control is inside a form". We have found that "By default, when a radio button type input is used inside a form,  and it is selected pressing the enter key results in form submit action." Please check the code snippet below for your reference.

Code Snippet:

    <form action="/submit_form" method="post">

        <h2>Choose your options:</h2>

       

        <label>

            <input type="radio" name="option" value="option1">

            Option 1

        </label>

        <br>

       

        <label>

            <input type="radio" name="option" value="option2">

            Option 2

        </label>

        <br>

        <input type="submit" value="Submit">

    </form>

Regards

Gokulraj Devarajan

[Gokulraj Devarajan]

Hi Khalid,

We have validated your query on the "Enter key press submits the form when Rich Text Editor control is used inside the Form element". We have considered this as a bug from our end we will include the fix in the 22nd August weekly patch release. You can track the status of the issue by the below feedback link.

Feedback Link : https://www.syncfusion.com/feedback/45919 ​

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

Regards

Gokulraj Devarajan

[Gokulraj Devarajan]

Hi Khalid,

We are still working on the issue the fix is in the testing phase we will provide the fix in the next weekly patch release.

Regards

Gokuilraj Devarajan

[Gokulraj Devarajan]

Hi Khalid,

We have fixed the issue in the 22.2.12. Could you please update the scripts to the 22.2.12 version to solve the issue on your end?

Release Notes:

https://ej2.syncfusion.com/angular/documentation/release-notes/22.2.12?type=all#richtexteditor

Regards

Gokulraj Devarajan

Attachment: RTE_Sample_51cc2421.zip