<p dir="auto">When we open three stacked modals a stack problem due to the invocation of enforceFocus function in bootstrap-modal.js file.</p>
<p dir="auto">The following simple html code illustrate the issue.</p>

<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;a href=&quot;#myModal&quot; role=&quot;button&quot; class=&quot;btn&quot; data-toggle=&quot;modal&quot;&gt;Launch demo modal&lt;/a&gt;

&lt;!-- Modal 1 --&gt;
&lt;div id=&quot;myModal&quot; style=&quot;width: 700px;&quot; class=&quot;modal hide fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;myModalLabel&quot; aria-hidden=&quot;true&quot;&gt;

  &lt;div class=&quot;modal-header&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-hidden=&quot;true&quot;&gt;×&lt;/button&gt;
    &lt;h3 id=&quot;myModalLabel&quot;&gt;Modal header 1&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class=&quot;modal-body&quot;&gt;
    &lt;p&gt;One fine body … 1&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class=&quot;modal-footer&quot;&gt;
    &lt;button class=&quot;btn&quot; data-dismiss=&quot;modal&quot; aria-hidden=&quot;true&quot;&gt;Close&lt;/button&gt;      
    &lt;a href=&quot;#myModal2&quot; role=&quot;button&quot; class=&quot;btn btn-primary&quot; data-toggle=&quot;modal&quot;&gt;Launch modal 2&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Modal 2 --&gt;
&lt;div id=&quot;myModal2&quot; class=&quot;modal hide fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;myModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
  &lt;div class=&quot;modal-header&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-hidden=&quot;true&quot;&gt;×&lt;/button&gt;
    &lt;h3 id=&quot;myModalLabel&quot;&gt;Modal header 2&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class=&quot;modal-body&quot;&gt;
    &lt;p&gt;One fine body … 2&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class=&quot;modal-footer&quot;&gt;
    &lt;button class=&quot;btn&quot; data-dismiss=&quot;modal&quot; aria-hidden=&quot;true&quot;&gt;Close&lt;/button&gt;
    &lt;a href=&quot;#myModal3&quot; role=&quot;button&quot; class=&quot;btn btn-primary&quot; data-toggle=&quot;modal&quot;&gt;Launch modal 3&lt;/a&gt;        
  &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Modal 3 --&gt;
&lt;div id=&quot;myModal3&quot; class=&quot;modal hide fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;myModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
  &lt;div class=&quot;modal-header&quot;&gt;
    &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-hidden=&quot;true&quot;&gt;×&lt;/button&gt;
    &lt;h3 id=&quot;myModalLabel&quot;&gt;Modal header 3&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class=&quot;modal-body&quot;&gt;
    &lt;p&gt;One fine body … 3&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class=&quot;modal-footer&quot;&gt;
    &lt;button class=&quot;btn&quot; data-dismiss=&quot;modal&quot; aria-hidden=&quot;true&quot;&gt;Close&lt;/button&gt;                  
  &lt;/div&gt;
&lt;/div&gt;

&lt;script src=&quot;jquery.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;bootstrap-modal.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;bootstrap-transition.js&quot;&gt;&lt;/script&gt;"><pre class="notranslate"><code class="notranslate">&lt;a href="#myModal" role="button" class="btn" data-toggle="modal"&gt;Launch demo modal&lt;/a&gt;

&lt;!-- Modal 1 --&gt;
&lt;div id="myModal" style="width: 700px;" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;

  &lt;div class="modal-header"&gt;
    &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
    &lt;h3 id="myModalLabel"&gt;Modal header 1&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="modal-body"&gt;
    &lt;p&gt;One fine body … 1&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="modal-footer"&gt;
    &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Close&lt;/button&gt;      
    &lt;a href="#myModal2" role="button" class="btn btn-primary" data-toggle="modal"&gt;Launch modal 2&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Modal 2 --&gt;
&lt;div id="myModal2" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
  &lt;div class="modal-header"&gt;
    &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
    &lt;h3 id="myModalLabel"&gt;Modal header 2&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="modal-body"&gt;
    &lt;p&gt;One fine body … 2&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="modal-footer"&gt;
    &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Close&lt;/button&gt;
    &lt;a href="#myModal3" role="button" class="btn btn-primary" data-toggle="modal"&gt;Launch modal 3&lt;/a&gt;        
  &lt;/div&gt;
&lt;/div&gt;

&lt;!-- Modal 3 --&gt;
&lt;div id="myModal3" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
  &lt;div class="modal-header"&gt;
    &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
    &lt;h3 id="myModalLabel"&gt;Modal header 3&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="modal-body"&gt;
    &lt;p&gt;One fine body … 3&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="modal-footer"&gt;
    &lt;button class="btn" data-dismiss="modal" aria-hidden="true"&gt;Close&lt;/button&gt;                  
  &lt;/div&gt;
&lt;/div&gt;

&lt;script src="jquery.js"&gt;&lt;/script&gt;
&lt;script src="bootstrap-modal.js"&gt;&lt;/script&gt;
&lt;script src="bootstrap-transition.js"&gt;&lt;/script&gt;
</code></pre></div>
<p dir="auto">Issue reproducible with: <a href="http://jsbin.com/otuduz/5/" rel="nofollow">http://jsbin.com/otuduz/5/</a></p>
<p dir="auto">Situation:<br>
When using a page involving multiple modals where focus goes from modal 1 -&gt; item within modal 2 without returning to the page itself first an error or crash is recorded (browser dependent).</p>
<p dir="auto">In the above example a button is clicked to open one modal, then a button on that modal opens a 2nd modal. Clicking on the textarea of the 2nd modal causes and issue and possibly crash.</p>
<p dir="auto">The error can either be a Uncaught RangeError: Maximum call stack size exceeded or an  in either case it seems that the issue is the enforceFocus method.</p>
<p dir="auto">On line 838:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="    , enforceFocus: function () {
        var that = this
        $(document).on('focusin.modal', function (e) {
          if (that.$element[0] !== e.target &amp;&amp; !that.$element.has(e.target).length) {
            that.$element.focus()
          }
        })
      }"><pre class="notranslate">    <span class="pl-kos">,</span> enforceFocus: <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">var</span> <span class="pl-s1">that</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span>
        <span class="pl-en">$</span><span class="pl-kos">(</span><span class="pl-smi">document</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">on</span><span class="pl-kos">(</span><span class="pl-s">'focusin.modal'</span><span class="pl-kos">,</span> <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-s1">e</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
          <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">that</span><span class="pl-kos">.</span><span class="pl-c1">$element</span><span class="pl-kos">[</span><span class="pl-c1">0</span><span class="pl-kos">]</span> <span class="pl-c1">!==</span> <span class="pl-s1">e</span><span class="pl-kos">.</span><span class="pl-c1">target</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-c1">!</span><span class="pl-s1">that</span><span class="pl-kos">.</span><span class="pl-c1">$element</span><span class="pl-kos">.</span><span class="pl-en">has</span><span class="pl-kos">(</span><span class="pl-s1">e</span><span class="pl-kos">.</span><span class="pl-c1">target</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">length</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
            <span class="pl-s1">that</span><span class="pl-kos">.</span><span class="pl-c1">$element</span><span class="pl-kos">.</span><span class="pl-en">focus</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
          <span class="pl-kos">}</span>
        <span class="pl-kos">}</span><span class="pl-kos">)</span>
      <span class="pl-kos">}</span></pre></div>