bug: last option is default in select element

Open
#3,301 2 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
35/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
typescript
Domain
frontend

Research direction

Start with the linked CodeSandbox reproduction, especially index.html and app-dropdown, and confirm the selection behavior when nested option elements have no selected attribute. Trace the Stencil rendering or select-handling entry point responsible for the default selection; done means the first option is selected in this case, with relevant regression coverage if the repository location is identified.

Written by the indexing model from the issue text.

Description

Bug: Validated
Prerequisites
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

Dominant language
TypeScript
Stars
13.1k
Forks
855
Avg merge
4h 7m
Merged PRs (30d)
44

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from stenciljs/core

All issues in stenciljs/core

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.