9

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>
5
  • 1
    Did you try to init tinyMCE when modal is shown (not on page load)?
    – max
    Commented Jul 8, 2016 at 21:31
  • thanks for the suggestion @makshh - just tried this and unfortunately I have the same issue :(
    – GJKH
    Commented Jul 10, 2016 at 13:51
  • 2
    Can you reproduce in a snippet/jsfiddle...?
    – shramee
    Commented Jul 10, 2016 at 18:44
  • Might be a red herring but... I found tinyMCE (which is used in a 3rd party app that I provide some support for) would sometimes (but not always!) add a class "mceNonEditable" to the text/controls within the editor. Switch to code view to check that tinyMCE isn't sneakily inserting this class - if it is then that's your problem. In theory this behaviour can be switched off. Unfortunately the switch didn't work in my specific implementation. See... tinymce.com/docs/plugins/noneditable
    – cymorg
    Commented Jul 13, 2016 at 0:17
  • @makshh is right. TinyMCE has problems when init in hidden context. Try changing the selector and only init when shown.bs.modal event is raised by bootstrap.
    – Alex
    Commented Dec 21, 2016 at 17:15

1 Answer 1

2

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.