Texboxes are disabled in bootstrap modal, that’s seem wired and your question would be how this is possible? there might be a css issue or maybe other javascript rules conflicting with this page.
But believe me none of these reasons are responsible for this behavior. What was happening like I was using some text boxes on bootstrap modal and problem was every input type was working fine, except text boxes.Well, that’s really annoying situation because I was stuck and can’t proceed further.
I double checked my code to see if any z-index causing problem or not and suddenly I remembered that only text boxes are not working. So I was on same place where I started to find the solution.
Now I one thing was clear to me that there is nothing wrong this css, there might be a case like any javascript causing this problem, so I started to exclude all javascript references from my page one by one to see that javascript causing problem or not and at the end I had only core jquery file and bootstrap js file which were necessary for proper working of bootstrap. So two thing were cleared in my mind that css and javascript not causing any issue, so question arise how this happening?.
Well that’s annoying like its a simple problem and its took more time than expected to be fixed with no any clue, so I thought to do some R&D after spending 45 minutes, finally I found the solution of this problem.
The solution was are follows:
$('#modal-id').on('shown.bs.modal', function () {
$(document).off('focusin.modal');
});
I don’t know the exact reason how it works but these lines of code saved my day.
Place this code inside
$(document).ready(function () {});
This bunch of code, saved my day, so I thought to also share this with you.
Hope, this will also solve your similar problem.
