Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Bootstrap modal dialog in ASP Update Panel prevents input focus in tinyMCE plugins

I have the same issue as this question although my circumstances are slightly different, none of the solutions provided work for me.

I have a bootstrap modal dialog inside an ASP update panel with a tinyMCE control which works fine apart from any modal popups from tinyMCE - all input controls are non focus-able, clicking and tabbing has no effect.

The general consensus is to use e.stopImmediatePropagation() although this does nothing in my setup.

<asp:Panel ID="EditShowDetailsPanel" runat="server" CssClass="modal fade" TabIndex="-1" role="dialog" aria-labelledby="EditShowDetailsPanel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <asp:UpdatePanel ID="EditShowDetailsUpdatePanel" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <div class="modal-header">
                        <h4 class="modal-title">Edit Show Details</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-xs-12">
                                <asp:TextBox ID="ShowInfoTextBox" TextMode="MultiLine" runat="server" ClientIDMode="Static" />
                                ....
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <asp:LinkButton ID="SaveEditShowDetailsLinkButton" runat="server" OnClientClick="mceSave();" OnClick="SaveEditShowDetailsLinkButton_Click" CssClass="btn btn-success">Save Changes</asp:LinkButton>
                        <button type="button" class="btn btn-danger waves-effect" data-dismiss="modal">Cancel</button>
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </div>
</asp:Panel>


<script type="text/javascript">

        function mceSave() {
            //save contents to textbox
            tinyMCE.triggerSave();
        }

        function pageLoad() {

            var prm = Sys.WebForms.PageRequestManager.getInstance();
            prm.add_beginRequest(BeginRequestHandler);

            function BeginRequestHandler(sender, args) {
                //remove mce editor
                tinymce.execCommand('mceRemoveEditor', true, 'ShowInfoTextBox');
            }

            //TinyMCE init
            $(document).ready(function () {
                tinymce.init({
                    selector: "textarea#ShowInfoTextBox",
                    menubar: false,
                    theme: "modern",
                    height: 300,
                    plugins: [
                        "link lists hr anchor media code"
                    ],
                    toolbar: "undo redo | bold italic underline | bullist numlist | link | media | code"

                });
            });
}
</script>
like image 854
GJKH Avatar asked Jul 01 '16 12:07

GJKH


1 Answers

The Bootstrap modal has a feature that prevents focusing of any elements outside the modal itself. This can be seen in the Bootstrap modal code (the enforceFocus function). Since the TinyMCE dialogs are rendered outside the bootstrap modal, the modal does not allow them to be focused.

In Bootstrap 4, this functionality can be disabled by setting focus: false in the modal configuration.

In Bootstrap 3, this functionality cannot be suppressed. Here are two possible workarounds:

  • Override the enforceFocus function before the Bootstrap modal is initialized, via

    $.fn.modal.Constructor.prototype.enforceFocus = $.noop;
    

    This will disable the feature for all modals thereafter.

  • Remove the focus event handler once the dialog has been initialized.

    $(document).off('focusin.bs.modal');
    

    This will disable the functionality in the currently opened modals, but newly opened ones will still have it.

like image 186
Alex Gyoshev Avatar answered Sep 19 '22 23:09

Alex Gyoshev