Focus blocked in Filerobot Image Editor within a Modal

[shalmaxb]

Hi everyone,

I am integrating the Filerobot Image Editor (Vanilla JS version) into a custom modal view in EspoCRM.

The Problem: When the editor's "Save" dialog opens, I cannot type into any input fields (e.g., Image Quality, Dimensions). It seems like the EspoCRM Modal (Bootstrap) is stealing the focus or enforcing a focus trap that prevents typing in third-party library inputs.

What I've tried so far:

1. Disabling _enforceFocus on the bootstrap modal: $(window).off('focusin.bs.modal').
2. Removing the tabindex attribute from the modal element: this.$el.closest('.modal').removeAttr('tabindex').
3. Using e.stopPropagation() on keyboard events within the view.
4. Configuring Filerobot to use a local container for popups (getPopupContainer) so the inputs stay within the modal's DOM tree.

Observations:

• If I run the editor in a standalone HTML page (outside Espo), it works perfectly.
• Inside the Espo Modal, I can click the inputs, but keyboard events are ignored.

Question: Is there a specific EspoCRM mechanism or a global event listener that enforces focus within Modals? How can I white-list these external inputs or temporarily disable the focus trap while the editor is active?

Thanks for any insights!

[yuri]

Does the problem happens the moment the modal is shown? It's not clear for me. When the modal is shown, it receives focus. If you want to override that focus, you can apply 0-1 second delay with setTimeout before applying a new focus. It might work.

[shalmaxb]

It works in that way, that the filerobot editor opens in the modal, where I actually can edit any displayed field and configuration. The problem occurs, when I want to save the edits, as filerobot opens inside the espoCRM-modal a kind of an own modal (dialogue), where you can make some other configurations (changing the file name, choose the file format and the modify the file name and - in case of jpg - the quality). In this save dialogue I am able to choose the file format (enum field) and the quality (slider). The filename is an input field and it does not accept input in that state. The size fields (width and height) are input fields with spin arrows to increase or decrease the value, what works. A direct input does not work in these two fields.
Even though the cursor over theses fields turns a text cursor, I am not able to set the cursor into the field.
The timeout I already tried without success..

[yuri]

It's hard to say what may cause the problem. Something at DOM level maybe. We don't apply any focus other than when things are shown, as I believe.

[shalmaxb]

Meanwhile I found the reason and the solution. It has to do with Bootstrap Modal and I found it, as other users of the filerobot image editor had similar problems, that only text-inmputs had not been accessible. One user postet a code snippet, that solved the problem.
The respective thread in the filerobot forum: https://github.com/sweetalert2/sweetalert2/issues/374