Issue with <select> options

[nathanmarks]

Hey,

I'm having an issue using the library with <select> elements.

Here are the two problems I've encountered so far:

1. When initialising my state with a certain value, the correct select option is not selected on the DOM element, despite the state being correct. The selected option in the DOM is just the first one on the list.

2. Seems somewhat related to the issue above. When using the dev tools to time travel, I noticed that the <select> stops selecting the option as per the state object.

Please let me know if I can provide any more details.

[MrWolfZ]

I am not able to reproduce this issue locally. Can you please post the relevant code here, i.e. the HTML for the select and the relevant component with the property as well as state interface? Please note that if you do not use a string as the value for your select you have to put square brackets around the value do make angular interpret the value properly (see the examples below).

<!-- The value of the option will be a string: "1" or "2" -->
<select>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>

<!-- The value of the option will be a number: 1 or 2 -->
<select>
  <option [value]="1">Option 1</option>
  <option [value]="2">Option 2</option>
</select>

[nathanmarks]

I will setup a repo with the issue shortly -- the value is definitely set properly on the options since the state object is updated properly when options are selected.

[nathanmarks]

@MrWolfZ Here: https://github.com/nathanmarks/ngrx-forms-select-issue

Despite the initial state for someSelect being set to bar, you can see that the foo value option is selected:

That's why when I change to the bar option, the someSelect state value doesn't change:

Changing back to the foo option, the state value has the foo value:

[MrWolfZ]

@nathanmarks thank you very much for the reproduction of the issue. This allowed me to find the cause. In case you are interested, the issue was that I ran the control state directive's initialization code in the ngOnInit hook, which ran before the the options were rendered. Instead I need to run it inside the ngAfterViewInit to make sure that any child elements of the form element are rendered.

I couldn't reproduce the issue when I tried because I used a static list of options instead of a dynamically created one.

I have fixed the bug and published version 1.0.1 on npm. Thanks again for this bug report and the help in finding and fixing the issue.

[nathanmarks]

Thanks for the quick fix!