I'm working on a chat app and I'm facing a weird problem with the dictation feature on iOS.

Here is the scenario:

• The user focuses the input field and starts to dictate some text (using the native dictation offered by iOS)
• Now they click the send button, which creates the chat messages, clears the text of the input and focuses the input again (to enable the user to write the next message right away).
• But the dication doesn't seem to be stopped. When the user clicks the input field again, the text that has already been sent will re-appear and anything the user said in the meantime will also show up.

Does anyone know how to tell iOS to stop the dictation (preferably using JavaScript but a solution in Swift would also help).

Thanks! Jesse

Minimal example:

const input = document.getElementById('input');
const button = document.getElementById('button');
button.addEventListener('click', () => {
  input.value = '';
  input.focus();
})

<input id="input"/>
<button id="button">Send</button>

<ul>
  <li>Open this page on iOS</li>
  <li>Focus the input and start dication</li>
  <li>Click send => input is cleared</li>
  <li>Click on the input => text is entered again :(</li>
</ul>

https://codepen.io/jjd/pen/vYZMGBy