title: Dropdown values are getting selected on space key press
body: <p>I have a multi select dropdown in angular material with search box. There are two problems I am facing with dropdown.</p>
  <ol>
  <li>On click of search text box when pressing space key on keyboard, string passed to keyup function is missing space. Space is also not visible in UI.</li>
  <li>Sometime on space key press dropdown value is getting selected.</li>
  </ol>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;mat-form-field appearance="fill" style="font-size: 12px; width: 100%"
                  (click)="onSearchKeyUp(searchText)"&gt;
                  &lt;mat-label&gt;Select Values(s)&lt;/mat-label&gt;
                  &lt;mat-select formControlName="emp" multiple (closed)="onClose()"&gt;
                      &lt;mat-select-trigger&gt;
                          {{getSelectedValues()}}
                      &lt;/mat-select-trigger&gt;
                      &lt;input class="form-control" placeholder="search" formControlName="search"
                          (keyup)="onSearchKeyUp($event)" /&gt;
                      &lt;mat-option *ngIf="values.length&gt;0" #allSelectedValues
                          (click)="toggleSelectType()" [value]="'0'"&gt;
                          &lt;b&gt;Select
                              All&lt;/b&gt;
                      &lt;/mat-option&gt;
                      &lt;mat-option *ngFor="let item of values" (click)="toggleSelectOneType()"
                          [value]="item"&gt;{{item}}&lt;/mat-option&gt;
                  &lt;/mat-select&gt;
              &lt;/mat-form-field&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Any suggestions?</p>