feat(mat-select): add "select other" optional functionality

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

Add “select other” / “select custom” optional functionality to mat-select. This would provide a seamless way for a dev to let a user select from a predefined list of drop down items or to provide a custom selection. I imagine if someone chose the “other” option of a mat-select dropdown, a matInput text field would appear and accept input. Crucially, user updates to this “other” matInput field would change the value of the FormControl associated with the mat-select field.

What is the current behavior?

Currently, this functionality can already be achieved however it is not easy. In my app I have made a custom “select-other” form control by combining a mat-select and matInput controls, both of which have their own FormControl. The component needs to flatten output from both of these controls so that I can interact with the component by just giving it one FormControl as input. It works, but it’s not super clean. I’m assuming that a “select other” option (similar to a Google Form’s “other” radio button option) is a pretty common design need.

What is the use-case or motivation for changing an existing behavior?

Increase developer happiness.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

5.x

Is there anything else we should know?

[jorroll]

@julianobrasil an autocomplete is a good suggestion for a stand in. I don’t think it’s quite the same as a “select other” option though (from a UX standpoint), because it makes it too easy for the user to add a custom option. In my case, I’d prefer it if the user select one of the predefined options, but if they must go with something else, they can. In the select other scenario, the user is forced to first evaluate the predefined options, then select the “other” option from the drop down before entering a custom option. With an autocomplete, someone can just immediately start typing a custom option without evaluating the predefined options.

While it’s not my use case, an example of this might be a “race/ethnicity” question on a sign up form. In an attempt to normalize statistics, you might prefer users choose from the predefined options, but still want to give them a custom option. I think an autocomplete would noticeably increase the likelihood someone would submit a custom response (note, I’m speculating).

Anyway, it’s possible “select other” functionality is nitch and doesn’t make sense for the Angular Material library, but my guess is that this is a fairly common need.

[Sreya1]

@thefliik thanks 😃)