I have a modal in a Bootstrap 4 design that has two XEditable text field on it.
If I set the XEditable option to inline, it works fine (thought the table gets pushed aside, but I guess that's just a CSS fix). However, if it is set to popup, which I want, I can't click the textbox in the pop over? Anyone have any idea why? I was thinking maybe the order, but not sure on how to change that?
Screenshot attached.
You can solve this issue by removing tabindex property from modal div.
Here tabindex property of modal div conflicts with select2 property of xeditable.
So simply remove
tabindex=-1
or set
tabindex=10 or any other value.
Answer borrowed from. When we use X-editable's "select2" into bootstrap-modal ,it can not focus on search input and not input key word #206
Edit: if using Jquery:
$(document).off('focusin.modal');
On modal shown event
The popup option is not compatible with Bootstrap 4, only inline is working at the moment. The plugin was written for Bootstrap 3 and there are differences in markup that cause this issue.
There is a development branch available for Bootstrap 4, you can try to download it to see if it fixes your issue:
https://github.com/Talv/x-editable/tree/develop/dist/bootstrap4-editable
