angular / angular/components

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

Open
#10,185 7 comments 5 reactions 0 assignees View on GitHub
area: material/select feature P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### 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?

Contributor guide

Open the contributing guide

Research direction

Start by reading the Angular Material mat-select and matInput entry points, then review how their associated FormControls currently expose values. Define how an optional "other" choice and custom text should interact with mat-select and the FormControl, and establish tests for predefined and custom selections before implementation.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.