angular / angular/components

bug(CHIPS): chip-listbox is setting formControl as undefined after unselection - inconsistency with .setValue(null)

オープン
#32,084 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る
area: material/chips P3
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

### Description

### Inconsistent behaviour between chip unselection vs. unselecting the chip by setting null value as formControl

When I want to programatically unselect a chip within a formGroup I can not setValue(undefined) only setValue(null).
I find that the behaviour is inconsistent and I understand why the initial value is undefined in case nothing was put onto the component. But after unselection I think it would be more rational to have it set up as null. Or preferably having null always as a default value within formGroup.

- I find this behaviour inconsistent and in case that I need to programatically unselect chipbox, then I need to map the final undefined value to null to have it correctly set in my project

Image

### Reproduction

[StackBlitz link: ](https://stackblitz.com/edit/components-issue-starter-wrxvkjqq?file=src%2Fmain.ts)
Steps to reproduce:
1. Select one of the three chips, for example 'Large'
2. Click on the button set as null
3. This works as expected, and the chips has value null.
4. Try to click on Large again
5. Unselect the selection by clicking on 'Large' again

You receive undefined

Image

Image

### Expected Behavior

Expected behaviour is to have either always undefined or null, or be able to set undefined programatically.
But preferably null over undefined

### Actual Behavior

Inconsistent behaviour between `myControl.setValue(null) ` - which is unselecting chip from the component
And the actual clicking on the selected chip which it makes unselected but automatically set value as undefined

### Environment

- Angular:
- CDK/Material:
- Browser(s):
- Operating System (e.g. Windows, macOS, Ubuntu):

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

リンクされた StackBlitz の再現手順から始め、setValue(null) を呼び出した後と、選択されている chip をクリックして選択解除した後の chip-listbox のフォームコントロール値を比較します。完了条件は、どちらの経路でもコンポーネントが合意された null または undefined の値を一貫して使用することです。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
frontend
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。