Tweet
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:
Observations:
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!
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:
- Disabling _enforceFocus on the bootstrap modal: $(window).off('focusin.bs.modal').
- Removing the tabindex attribute from the modal element: this.$el.closest('.modal').removeAttr('tabindex').
- Using e.stopPropagation() on keyboard events within the view.
- 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!