title: Input keep reverting change made at cursor position on unfocus
body: <blockquote>
  <p>EDIT: It seems like the behaviour is only showing up on IOS based
  devices (Macbook and iPhone) but doesn't appear on Windows, regardless
  of the browser</p>
  </blockquote>
  <p>Good morning!</p>
  <p>I have an input to which I append some text (a selected emoji from <a href="https://picmojs.com/" rel="nofollow noreferrer">Picmojs</a>) at the cursor position using Vanilla JS.
  It's working well but for some reason, the last edit made by my code is always immediately reverted when I unfocus the input.</p>
  <p><a href="https://www.loom.com/share/9405c7bfeb3e4727be9420d8caab9730" rel="nofollow noreferrer">Here's a short live video example (0:10s)</a></p>
  <p><a href="https://i.stack.imgur.com/Sz9HV.gif" rel="nofollow noreferrer">GIF Image</a></p>
  <p>I know that the popup picker from Picmojs has a built-in feature that automatically sets focus back to the element when closed, but I need to set it to another one (the input instead of the trigger button).</p>
  <p><strong>What I have tried</strong></p>
  <p>I tried using a <code>timeout</code> function to set the focus back and the cursor position after Picmojs but it still appears to not be working.</p>
  <p>Do you have any hints?</p>
  <p><strong>Here's my function:</strong></p>
  <pre><code>    function bind(Input,Emoji) {
  
          var startPos = Input.selectionStart;
          var endPos = Input.selectionEnd;
          var length = startPos+Emoji.length
          Input.value = Input.value.substring(0, startPos) +
              Emoji +
              Input.value.substring(endPos, Input.value.length);
          Input.selectionStart = startPos + Emoji.length;
          Input.selectionEnd = startPos + Emoji.length;
          
          if (properties.hideOnEmojiSelect === false) {return}
          setTimeout(() =&gt; Input.setSelectionRange(length, length), 225)
          setTimeout(() =&gt; Input.focus(), 225)
          
      }
  </code></pre>
  <p><strong>And here's the full code:</strong></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>function initialize(instance, properties, context) {    
      
  // BINDING
      
      function bind(Input,Emoji) {
  
          var startPos = Input.selectionStart;
          var endPos = Input.selectionEnd;
          var length = startPos+Emoji.length
          Input.value = Input.value.substring(0, startPos) +
              Emoji +
              Input.value.substring(endPos, Input.value.length);
          Input.selectionStart = startPos + Emoji.length;
          Input.selectionEnd = startPos + Emoji.length;
          
          if (properties.hideOnEmojiSelect === false) {return}
          setTimeout(() =&gt; Input.setSelectionRange(length, length), 225)
          setTimeout(() =&gt; Input.focus(), 225)
          
      }
      
  window.addEventListener('load', (event) =&gt; {
      //DEFINE TRIGGER BUTTON + INPUT
      var Button = document.getElementById(properties.button_id);
      var Reference = document.getElementById(attach_to);
      var Input = ""
      if (properties.input) {Input = document.getElementById(properties.input_id);}
  
      // Create the picker
      const picker = createPopup({
      
          hideOnClickOutside: properties.hideOnClickOutside,
          hideOnEmojiSelect: properties.hideOnEmojiSelect,
          hideOnEscape: properties.hideOnEscape,
          showCloseButton: properties.showCloseButton
  
      }, {
        // The element that triggers the popup
        triggerElement: Button,
  
        // The element to position the picker relative to - often this is also the trigger element,
        referenceElement: Reference,
  
      });
  
      //
      // EVENTS
      //
      // Event : Select
      picker.addEventListener('emoji:select', event =&gt; {
        if (properties.input) {setTimeout(() =&gt; bind(Input,event.emoji), 225)}
        instance.publishState("selected", event.emoji);
        instance.triggerEvent("selected");
      });
      
      // Event : Opened
      picker.addEventListener('picker:open', event =&gt; {
        instance.triggerEvent("opened");
      });
      
      // Event : Closed
      picker.addEventListener('picker:close', event =&gt; {
        instance.triggerEvent("closed");
      });
  
      // Event : Click
      Button.addEventListener('click', event =&gt; {
        if (properties.disabled === false) {picker.toggle();}
      });
      
  
  });
        
      }</code></pre>
  </div>
  </div>
  </p>