This is a migrated thread and some comments may be shown as answers.

"Insert hyperlink" not working when editor inside a bootstrap modal

2 Answers 366 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Mathias
Top achievements
Rank 1
Mathias asked on 29 Oct 2015, 01:36 PM

When i use the editor inside a bootstrap modal the "insert hyperlink" shows the window but i can not write in the fields.

Example:
http://jsfiddle.net/keebj1t3/

2 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 02 Nov 2015, 03:16 PM
Hi Mathias,

The Kendo UI Editor uses a popup for the "Insert hyperlink" tool. The popup is rendered as a child of the <body>, i.e. it is outside the Bootstrap modal dialog. As a result, the Bootstrap modal dialog does not allow anything in the popup to be focused.

Please disable the Bootstrap dialog's modality, or use a modal Kendo UI Window instead.

http://docs.telerik.com/kendo-ui/using-kendo-with-twitter-bootstrap#known-limitations

Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Nishchal
Top achievements
Rank 1
commented on 23 Feb 2022, 10:56 AM

Hi Dimo,

could you please help on how to disable the bootstrap dialog modality. I am also facing the same issue and not able to fix it.

 

Regards,

Nishchal

0
Janson
Top achievements
Rank 2
Iron
Iron
answered on 26 Jan 2023, 12:54 PM

As the answer above stated, Bootstrap Modal restricts the focus to items within the modal.  This is done so that when you tab between elements, the browser isn't selecting elements behind the modal. 

One solution would be to "turn off" the focusin.  Depending on your situation, you can do this when the modal opens, or just on the editor's execute event.

Adding to the original poster's fiddle.  http://jsfiddle.net/5o4mzt3s/4/

Something like this:

$('#myModal').on('shown.bs.modal', function() {
        $(document).off('focusin.modal');
 });

For Bootstrap 4, you could overrite the _enforceFocus function.

$.fn.modal.Constructor.prototype._enforceFocus = function() {};


Tags
Editor
Asked by
Mathias
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Janson
Top achievements
Rank 2
Iron
Iron
Share this question
or