bug: last option is default in select element

[felix-ico]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

2.7.1

Current Behavior

When building a custom dropdown that accepts nested options, if no option has a selected attribute the last option is selected by default.

Expected Behavior

When no option has a selected attribute the first option should be selected.

Steps to Reproduce

Please have a look at https://codesandbox.io/s/codesandbox-stencil-forked-okptft (index.html and app-dropdown)

<app-dropdown>
  <option value="1">item 1</option>
  <option value="2">item 2</option>
  <option value="3">item 3</option>
  <option value="BAR">BAR</option>
</app-dropdown>

by default the dropdown shows "BAR" as selected, instead it should be "Item 1".

Code Reproduction URL

https://codesandbox.io/s/codesandbox-stencil-forked-okptft

Additional Information

No response

[rwaskiewicz]

Thanks - I've confirmed this behavior and am going to label this to ingest it into the team's backlog. Thanks for the great reproduction case, it was super helpful!

[KevinCarnaille2]

I'm having the same issue on v2.19.x

After some discussions on Slack, @johnjenkins has created a little vanilla snippet (thanks!) :
https://codepen.io/john_jenkins/pen/wvXVygW

From this sourcecode : https://github.com/ionic-team/stencil/blob/main/src/runtime/vdom/vdom-render.ts#L679

Hope it can be easily fixed, as it breaks a native behavior :)