Describe the bug
When an AutoCompleteComponent field is displayed in a form (especially within dynamically loaded lists), the raw key value briefly flashes before the correct display value appears. This creates a jarring user experience.
Example: An autocomplete field with options {key: "CD_0001", value: "Customer Option 1"} briefly shows "CD_0001" then switches to "Customer Option 1".
To Reproduce
Steps to reproduce the behavior:
Put autocomplete in FieldGroupTemplateComponent
The autocomplete briefly shows the raw key before switching to the display value
Expected behavior
The field should either:
Option A (Preferred): Display the display value immediately without showing the key flash, OR
Option B: Show a placeholder/empty state until options are loaded and value mapped
Desktop (please complete the following information):
- OS: macOS, Windows, Linux
- Browser: Chrome, Firefox, Safari
- Angular version: 15+
- @pega/angular-sdk-components: Latest
Additional context
The issue is particularly noticeable when:
- Adding/deleting rows in a FieldGroupTemplateComponent (child components re-initialize)
- Auto-populating forms with async data sources
- Using large option lists that take time to load
Root issue:
fieldControl.setValue() is called with the raw key before the async options are available for lookup. The component needs to defer setting the display value until after options are loaded and can be mapped.
Related issues
This bug often cascades from FieldGroupTemplateComponent re-creating child components when list items are added/deleted, forcing AutoCompleteComponent.updateSelf() to run even for existing rows.
Describe the bug
When an AutoCompleteComponent field is displayed in a form (especially within dynamically loaded lists), the raw key value briefly flashes before the correct display value appears. This creates a jarring user experience.
Example: An autocomplete field with options {key: "CD_0001", value: "Customer Option 1"} briefly shows "CD_0001" then switches to "Customer Option 1".
To Reproduce
Steps to reproduce the behavior:
Put autocomplete in FieldGroupTemplateComponent
The autocomplete briefly shows the raw key before switching to the display value
Expected behavior
The field should either:
Option A (Preferred): Display the display value immediately without showing the key flash, OR
Option B: Show a placeholder/empty state until options are loaded and value mapped
Desktop (please complete the following information):
Additional context
The issue is particularly noticeable when:
Root issue:
fieldControl.setValue() is called with the raw key before the async options are available for lookup. The component needs to defer setting the display value until after options are loaded and can be mapped.
Related issues
This bug often cascades from FieldGroupTemplateComponent re-creating child components when list items are added/deleted, forcing AutoCompleteComponent.updateSelf() to run even for existing rows.