Cannot type in popup

[gomti089]

Hello. Thanks to help from froala's developer, now popup can be displayed (https://github.com/froala/react-froala-wysiwyg/issues/112). However, Now, I have an issue with typing text/focusing input in popup. For example, when I try to modify background color in cell using toolbars in popup and type custom hex string, I cannot type it (no focus). Here is the full code I'm using.

import React, {Component} from "react";
// Require Editor JS files.
import 'froala-editor/js/froala_editor.pkgd.min.js';
// language pack for korean
import 'froala-editor/js/languages/ko.js';
// Require Editor CSS files.
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';
// Require Font Awesome.
import 'font-awesome/css/font-awesome.css';

import FroalaEditor from 'react-froala-wysiwyg';
import $ from "jquery";

window.$ = window.jQuery = $;

const config =  {
    placeholderText: '내용을 입력하세요',
    height: 200,
    language: 'ko',
    fullPage: true,     // for email message
    useClasses: false,  // for email message
    toolbarButtons: [
        'fontFamily', 'fontSize', 'color', 'inlineStyle', 'paragraphStyle', '|',
        'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '|',
        'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', '|',
        'insertLink', 'insertImage', 'embedly', 'insertTable', '|',
        'emoticons', 'specialCharacters', 'insertHR', 'selectAll', 'clearFormatting', '|',
        'spellChecker', 'help', '|', 'undo', 'redo'],
    fontFamilySelection: true,
    imageEditButtons: [
        'imageReplace', 'imageAlign', 'imageCaption', 'imageRemove', '|',
        'imageLink', 'linkOpen', 'linkEdit', 'linkRemove', '-', 'imageDisplay', 'imageStyle', 'imageAlt', 'imageSize'
    ],
    zIndex: 999999,
    events : {
        'froalaEditor.image.beforeUpload': function (e, editor, files) {
            if (files.length) {
                // Create a File Reader.
                var reader = new FileReader();

                // Set the reader to insert images when they are loaded.
                reader.onload = function (e) {
                    var result = e.target.result;
                    editor.image.insert(result, null, null, editor.image.get());
                };

                // Read image as base64.
                reader.readAsDataURL(files[0]);
            }

            editor.popups.hideAll();

            // Stop default upload chain.
            return false;
        }
    }
};

export class HtmlEditor extends Component {
    state = {
        model: ''
    };

    handleModelChange = (model)  => {
        this.setState({model: model},
            () => console.log(this.state.model))
    };

    render() {
        const { html, onChange } = this.props;
        return (
            <div style={{margin: "20px"}}>
                <FroalaEditor
                    tag='textarea'
                    config={config}
                    model={this.state.model}
                    onModelChange={this.handleModelChange}
                />
            </div>
        );
    }
}

Also, when I tried to add image and type text alternative text in popup, I cannot type it. This case also doesn't allow me to focus on popup input. As an effort to fix this problem, I referred to this one in froala editor project (https://github.com/froala/wysiwyg-editor/issues/2110), and I tried to set tabIndex in config. However, it doesn't work.

[Editable when color picker is chosen from toolbar]

[Non-editable when color picker is chosen from table popup's color picker: You can see it is not focused]

[gomti089]

When I run it in fresh facebook-react project, it runs without issue. So, I'm confused. Is there any suggestion for this issue? I think I need to apply some workaround for this issue. @stefanneculai

[stefanneculai]

I believe you might have some CSS / JS code in your app which interferes with the editor as you're saying that it works correctly in a fresh project. I would recommend to check CSS first.

[gomti089]

I don't think it is happening due to css, because on over event seems to be happening (cursor is changed to writing mode). I just cannot focus on input inside the popup. Could you give me any recommendation for this fix? @stefanneculai

[jsonwen]

I'm experiencing the same in a vue.js project, when loading the editor in a bootstrap modal. Navbar input works but not the inline popup. @gomti089 did you solve this problem yet?

[jdigz]

I'm experiencing the same issue. What seemed to solve it for me was there was a tabindex conflict. My Froala editor was inside of a Bootstrap Modal and the Modal has tabIndex=-1. Removing that in the developer tools allowed the input to work.

After some investigating here is the full explanation. Bootstrap modals have tabindex="-1", role="dialog" and aria-modal="true" set for accessibility. What these do is make only what is in the Bootstrap Modal keyboard accessible.

The issue here is that Froala is appending the popup to the body of the document which falls outside of the Bootstrap Modal making the inputs not focus-able due to the accessibility attributes the Bootstrap Modal div.modal has (listed above). This means that you can't focus any inputs within the froala popup in these cases.

[jdigz]

Here is another explanation with a proposed solution where tinyMCE had the same troubles tinyMCE Issue 5169

Edit: Better solution is to set the scrollableContainer option to a selector for your Bootstrap modal or whatever container that has those accessibility attributes. This sets the container of which the popups are added according to Froala docs https://froala.com/wysiwyg-editor/docs/options/#scrollableContainer

[sblattj]

@jdigz thank you - setting the scrollableContainer as my dialog box for the Froala editor fixed this problem.