voice search for input tag (search input) doesn't work properly in iOS

Question

I have an input tag on my website that is used for searching data by the user. It works perfectly with keyboard input, however, if one tries to do the voice-over search in iOS it only inputs the first word and the mic icon appears. If I click on the icon, it enters the entire search string.

<div fxFlex.gt-sm="38" fxFlex.lt-md="100" fxLayout="row" fxLayoutAlign="center center">
  <img class="toolbar-logo " [src]="cusLogoSmall" (click)="selNav='home'; onSelLink('home')" style="margin-right: 16px;" matTooltip="Home" (click)="navigateModule('home')" />
  <input mat-input placeholder="Search" [(ngModel)]="qrySearch" type="text" class="searchinput" spellcheck="true" lang="en" (keydown)="fnSearch($event.keyCode, $event.key)" (input)="updateLocalStorage()">
  <div class="search" fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="5px">
  </div>
</div>