angular / angular/components

*reduce* need for displayWith function on mat-autocomplete

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

Description

#### Bug, feature request, or proposal:
Proposal

#### What is the expected behavior?
A simple way to display the selected autocomplete value in an input field.

#### What is the current behavior?
Currently when you setup an autocomplete and bind a [value] to the , the autocomplete displays the value UNLESS you assign a displayWith function. However, it makes no sense to me to default to showing the [value] since that is intended to be the behind-the-scenes value, not the displayValue. If we simply default to displaying the viewValue somehow, we would no longer need a displayWith function, and that would eliminate numerous other headaches reported in other issues on this forum.

#### What are the steps to reproduce?
Providing a StackBlitz/Plunker (or similar) is the *best* way to get the team to see your issue.

Plunker starter (using on `@master`): https://goo.gl/uDmqyY

StackBlitz starter (using latest `npm` release): https://goo.gl/wwnhMV

This proposal relies on an understanding of the typical autocomplete implementation e.g. here: https://plnkr.co/edit/W9vdWaGcoG90LKM8hHgI?p=preview

#### What is the use-case or motivation for changing an existing behavior?
displayWith function has numerous issues reported. For my purpose I see it as a potential blocker to generating dynamic forms in particular, for reasons i'm glad to detail if need be but I'll spare at this time.

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

#### Is there anything else we should know?
i'm guessing the displayWith function was created in the first place to address a legitimate challenge. Namely, the autocomplete control needs a way to know what the displayValue is.

so in the demo example here:

```


None
{{ state.name }}

```
the displayValue is state.name. Perhaps the new syntax that requires no displayValue would be like this:

```


None

```
Such a design would continue to allow flexibility to assign the whole object or a particular field to the [value]..which is important to various use cases out there.

I don't see any downside to eliminating the displayWith function as long as the viewValue is always shown I doubt people would care.

Contributor guide

Open the contributing guide

Research direction

Run the linked Plunker and StackBlitz examples first to reproduce the current autocomplete behavior and compare the proposed alternatives. The work is done when a selected value can display its viewValue without requiring displayWith, while still allowing a distinct underlying value.

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
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.