How to add custom input option to select?

Question

I'm working with <mat-select> and I need list of options where the last option would be a text input with placeholder Add your custom option. User can select one of the options or click the last option (which is input) and text own option , once he texted he clicked outside of select and value has been set what User has texted.

the problem is when the user add push space to add whitespace, dropdown closes.

<select>
  <option value="option 1"> option 1 </option>
  <option value="option 2"> option 2 </option>
  <option> <input type="text" placeholder="own option" /></option>
</select>

JayNews · Accepted Answer · 2021-11-25 13:18:42Z

1

Adding an $event.stopPropagation should be adequate. In the code block below I used it twice:

on the (click) event, so when the user clicks on the text input area, the select menu does not close
on the (keydown) event as the mat-select directive listens for the space key and closes the menu if it receives it.

<mat-select>
  <mat-option *ngFor="let food of foods" [value]="food.value">
    {{ food.viewValue }}
  </mat-option>
  <mat-option>
    <input
      type="text"
      placeholder="Add your custom option"
      (click)="$event.stopPropagation()"
      (keydown)="$event.stopPropagation()"
    />
  </mat-option>
</mat-select>

answered Nov 25, 2021 at 13:18

JayNews

611 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

Sunstrike527 Over a year ago

Thanks , it works. Dont you know how to update a select value ? When I make on keyup of input this.form.setValue(event.target.value) selected value not changes but formControl.value already updated

Collectives™ on Stack Overflow

How to add custom input option to select?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related