Wysiwyg-editor: Can't write in input created in the edit image popup

[MrToph]

I have the same issue as 1671, but unfortunately it was closed. To me it doesn't look like an implementation issue, as the code worked fine in a previous Froala version.

Expected behavior.

I should be able to write in an input element as usual.

Actual behavior.

The input doesn't take any onInput, onChange etc. events and I cannot write in it.
This also happens with any other text element like<div contenteditable />.

Steps to reproduce the problem.

Write a custom popuper plugin and show it from the edit image popup:

// The image _tooltip_ popup is defined inside a plugin
$.FroalaEditor.PLUGINS.imageTooltip = function imageTooltip(editor) {
    // Create custom popup.
    function initPopup() {
        // Load popup template.
        let template = $.FroalaEditor.POPUP_TEMPLATES.customPopup;
        if (typeof template === 'function') {
            template = template.apply(editor);
        }

        // Create template for tooltip
        const tooltipPopupLayer = `
            <div class="imageTooltipLayer">
<input type="text" value="" class="imageTooltipEditorInput">
            </div>
        `;

        // Load popup template.
        template = {
            customLayer: tooltipPopupLayer,
        };

        // Create popup.
        const $popup = editor.popups.create('imageTooltip.popup', template);

        return $popup;
    }

    function showPopup() {
        // Get the popup object defined above.
        let $popup = editor.popups.get('imageTooltip.popup');

        /* If popup doesn't exist then create it.
        To improve performance it is best to create the popup when it is first needed
        and not when the editor is initialized. */

        if (!$popup) $popup = initPopup();

        // Set the body as the popup's container.
        editor.popups.setContainer('imageTooltip.popup', $('body'));

        // Get the button's object in order to place the popup relative to it.
        const $btn = $('.fr-command[data-cmd="showTooltipEditor"]');

        // Compute the popup's position.
        const btnOffset = $btn.offset();
        const left = btnOffset.left - 10;
        const top = btnOffset.top - 10;

        const currentTooltipText = 'Test 123';

        // Set initial value for input inside of popup
        const tooltipInput = $popup.find('.imageTooltipEditorInput');
        tooltipInput.val(currentTooltipText);

        // call our callback on blur
        tooltipInput.on('blur', (evt) => {
            // do stuff
        });
        /*  Show the custom popup. The button's outerHeight is required in case
            the popup needs to be displayed above it. */
        editor.popups.show('imageTooltip.popup', left, top, $btn.outerHeight());
    }

    function hidePopup() {
        editor.popups.hide('imageTooltip.popup');
    }

    // Methods visible outside the plugin.
    return {
        showPopup,
        hidePopup,
    };
};

$.FroalaEditor.DefineIcon('imageTooltipIcon', {
    NAME: 'speech-bubble',
});

$.FroalaEditor.RegisterCommand('showTooltipEditor', {
    title: 'Tooltip',
    icon: 'imageTooltipIcon',
    undo: false,
    focus: true,
    plugin: 'imageTooltip',
    callback() {
        const editor = this;
        editor.selection.save();
        // Open tooltip popup
        editor.imageTooltip.showPopup();
    },
});

Froala

The code works as expected in Froala 2.3.5, but doesn't work in 2.6.3 anymore.

OS.

Mac OS 10.12.5

Browser.

Latest Google Chrome, but happens everywhere

[stefanneculai]

@MrToph could you please make a jsFiddle or CodePen? Thanks.

[stefanneculai]

@MrToph we tried to reproduce it based on the code you provided, but it appears to work just fine. Could you please provide a jsFiddle or CodePen? We can type in the input without problems.

[stefanneculai]

I am closing this due to lack of response.

[cristianst]

@stefanneculai please consider reopening this issue since this is still happening.
I created a jsFiddle: https://jsfiddle.net/wc5c3jhk/1913/

Reproduction Steps:

• Add Image
• Click last (custom) Change size button
• Its not possible to write in an input

[stefanneculai]

@cristianst you should also add tabIndex attribute to inputs: https://jsfiddle.net/froala/wc5c3jhk/1921/.