title: How to make component appear and set keyboard focus to its input field in iOS Safari?
body: <p>So I figured out how to make iOS select text by using <code>e.target.setSelectionRange(0, 999)</code>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    onUp(e){
        e.preventDefault() // By default, on mouse up the caret is placed between characters. That has to be negated.
        e.target.setSelectionRange(0, 999) // Set the selection to (what is likely) all the text in the input field.
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;input @mouseup="onUp" v-model="input"/&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://codepen.io/kslstn/pen/ZvoEQa" rel="nofollow noreferrer">https://codepen.io/kslstn/pen/ZvoEQa</a></p>
  
  <p>However, this only works for trusted events: events that are a direct effect of user input (<a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted</a>). I want to show an initially hidden Vue component when the user requests it with a click. When it has appeared, the input field inside that component should get its content selected.</p>
  
  <p>I tried the following:</p>
  
  <ol>
  <li>Do the setSelectionRange when the component appears (on mounted() of the component). Doesn't work, because it is not a trusted event (I think).</li>
  <li>Let the click event that summons my component set the selection on the component by finding its ID. It would be an ugly solution as it does not cleanly separate my components. It also does not work, because at the time of the click, the component is not in the DOM and the ID of the input field  can't be found.</li>
  <li>Adding a setTimeout to solution 2. No success: the text selection is triggered by the untrusted timeout event.</li>
  </ol>
  
  <p>Do I want too much?</p>