title: AutoFocus TinyMCE Editor TextArea Inside Bootstrap Modal When Modal is Displayed
body: <p>So I'm using TinyMCE Editor for all my textarea's inside of my project. More documentation can be found <a href="https://www.tiny.cloud/docs/" rel="nofollow noreferrer">here</a> about the TinyMCE Editor.</p>
  
  <p>I have four different buttons, however let's just focus on one button, and I'm sure that the code can be copied from one button to the others as I want all the buttons to have the same funcationality.</p>
  
  <p>Here's the buttons:</p>
  
  <p><a href="https://i.stack.imgur.com/b0UGK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b0UGK.png" alt="Four Buttons"></a></p>
  
  <p>These buttons bring up a Bootstrap v4 modal. Documentation can be found <a href="https://getbootstrap.com/docs/4.1/components/modal/" rel="nofollow noreferrer">here</a> about Modal's. An Example of the modal is below.</p>
  
  <p><a href="https://i.stack.imgur.com/YXFzn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YXFzn.png" alt="Bootstrap Modal"></a></p>
  
  <p>For right now let's just focus on the <strong>Reminders Modal</strong>. This is obviously apart of a form. I'm having an issue autofocusing the textarea when I'm bringing up the modal. I'm loading the modal onto the page, but keeping it hidden until activated but the button click. I'm not rendering this modal dynamically and it is a static modal.</p>
  
  <p>So lets go over my code. Remember we are only focusing on the <strong>Reminder Button and Modal</strong> at this time, so only the code relevant to that modal will be displayed below.</p>
  
  <blockquote>
    <p><strong>Note:</strong> I am using Laravel 5.6 and I'm including the modal using Laravel
    Blade to put the modal into the page. This information should not make
    a difference to the answer to this question, just saying it just
    incase for some off chance it might be relevant.</p>
    
    <p>I'm also using Laravel Collective in order to display the textarea on
    the page. More documentation can be found <a href="https://laravelcollective.com/docs/master/html#text" rel="nofollow noreferrer">here</a> about the Laravel
    Collective textarea. Laravel Collective is not native anymore with the
    Laravel Framework, so this information might be relevant as well, but
    highly unlikely.</p>
  
  <pre><code>@include('components.form.part.modals.reminder')
  </code></pre>
  </blockquote>
  
  <p><strong>Modal</strong> (/resources/views/components/form/part/modals/reminder.blade.php)</p>
  
  <pre><code>&lt;!-- Modal --&gt;
  &lt;div class="modal fade" id="reminderModal" tabindex="-1" role="dialog" aria-labelledby="reminderModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false"&gt;
      &lt;div class="modal-dialog" role="document"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;h5 class="modal-title" id="reminderModalLabel"&gt;Reminder&lt;/h5&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  {{ Form::textarea('reminder', null, ['class' =&gt; 'form-control', 'id' =&gt; 'reminderInput']) }}
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-secondary reminderCancel" data-dismiss="modal"&gt;Close Without Saving&lt;/button&gt;
                  &lt;button type="button" class="btn btn-primary reminderSave" data-dismiss="modal"&gt;Save&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Buttons Code</strong> (/resources/views/part/create.blade.php)</p>
  
  <pre><code>&lt;div class="col-sm-6 mt-3"&gt;
      {{-- Reminder Modal Button --}}
      &lt;button type="button" class="btn btn-primary btn-block reminderButton" data-toggle="modal" data-target="#reminderModal"&gt;
        &lt;i class="fas fa-bell"&gt;&lt;/i&gt; Reminders
      &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So it all boils down to this: <strong>How do I auto focus the TinyMCE Editor when the modal pop's up?</strong></p>
  
  <p><strong>My Attempts:</strong></p>
  
  <p>I've tried multiple things such as the TinyMCE Editor Commands, particularly the execCommand(), but I can't seem to get this command to work. Maybe thats not even the right command, but maybe I'm going in the right direction? Documentation can be found <a href="https://www.tiny.cloud/docs/api/tinymce/tinymce.editorcommands/#execcommand" rel="nofollow noreferrer">here about the execCommand()</a>.</p>
  
  <p>I've also tried using jQuery, however whenever TinyMCE takes control of a textarea, it changes the textarea from a <code>&lt;textarea&gt;</code> HTML tag, to numerous HTML div boxes. So it's kind of hard to figure out what to target to focus.</p>
  
  <p><strong>References:</strong></p>
  
  <p><a href="https://stackoverflow.com/questions/2212552/how-do-you-set-the-focus-of-a-tinymce-textarea-element">How do you set the focus of a TinyMCE textarea element?</a></p>