[BUG] Using the Select component with a form control, the component ignores the initial value

[silviu4444]

Please provide the environment you discovered this bug in.

Angular v19
Node v22.11.00
@spartan-ng/cli 0.0.1-alpha.387

Which area/package is the issue in?

select

Description

The select component does not take into consideration the initial value of the form.
A workaround would be to set the form value in the ngAfterViewInit hook.

Please provide the exception or error you saw

No response

Other information

No response

I would be willing to submit a PR to fix this issue

• Yes
• No

[goetzrobin]

@silviu4444 can you create a reproduction for this? This should be working and is actually covered by our e2e tests, so there must be something we are missing

spartan/libs/ui/select/select.stories.ts

Line 176 in 42f36c1

export const ReactiveFormControlWithForAndInitialValue: Story = {

[silviu4444]

@goetzrobin have u made changes to the hlm select component recently?
I updated the brain package to version 400 and the issue's still there.

If you haven't made updated to the hlm component the issue should reproduce when you initialize the form before the component is mounted (constructor, onInit).

If you made updates lately to the select component than my code might be outdated.

[dev-franco]

I believe the described issue refers to the visual display of the placeholder when a value is pre-set.

When using formControl, the value is indeed set but the placeholder does not reflect the selected value.
In this case I have a FormGroup with 2 controls emails and role. In the screen below, the role value is set to 'admin', but the placeholder reflects the placeholder I've manually defined as Select Placeholder.

Clicking on the dropdown correctly reflects that the value is indeed set via the checkmark (I guess this is where the tests pass):

Using ngModel works as expected though (as not only it reflects the value, but also updates the placeholder to show the selected value:

[hillin]

I'm pretty sure this problem exists since or before version 0.0.1-alpha.356. We did not went too deep into it, but our workaround is to reset the form group a little bit later after it has been created:

const formGroup = createFormGroup();
setTimeout(() => {
  // at this time, the form group should have been bound to the view
  formGroup.reset();
}, 1);

[thatsamsonkid]

I was able to reproduce the issue in our storybook, I think the issue was 2 fold then we have some mix of static and for-looped options for that story and it's oddly defaulting to the first static option for some reason instead of what's defined in formcontrol. I guess we haven't noticed since it was still initializing with a value but it's a wrong value and i guess the test needs to be looked at because it should be checking visually that both the button and dropdown option are properly displaying the initial value. Also thanks for the example @dev-franco I did see it only happens with reactive form, ng-model is working fine

[thatsamsonkid]

Ok so actually maybe I spoke too soon, we do have an odd issue with mixed static and dynamic options, but seems in story itself we had also configured initial value arg incorrectly so that's why it wasn't taking the value. Once I updated the story I see it working fine.

I also created this Stackblitz showing reactive form with initial value working both in single and multi-mode. Now this is initial value defined on form control creation, but is anyone seeing the issue maybe while patching the value or something maybe some time after form control creation? If someone could create a stackblitz with the issue that would be great also

[silviu4444]

I believe the described issue refers to the visual display of the placeholder when a value is pre-set.

When using formControl, the value is indeed set but the placeholder does not reflect the selected value. In this case I have a FormGroup with 2 controls emails and role. In the screen below, the role value is set to 'admin', but the placeholder reflects the placeholder I've manually defined as Select Placeholder.

Clicking on the dropdown correctly reflects that the value is indeed set via the checkmark (I guess this is where the tests pass):

Using ngModel works as expected though (as not only it reflects the value, but also updates the placeholder to show the selected value:

This is exactly what I meant

[ashley-hunter]

Its interesting, as part of updating the repo to Angular 19 (#612) unit tests for this seem to be failing now, so I wonder is this picking up the issue we are seeing here - now that I have a reproduction I will see if I can find a solution as part of that work.