Fix select default option

[mmarkelov]

This is related to #24469

I'm not sure, but this changes from 2016 set default selection for the first non-disabled option, which is lead to inconsistency between pure html and react.

Also there are passed tests which should covered the right logic (we should have unselected options). But the actual browser behavior is the different :(

[sizebot]

Comparing: d20c3af...4e611b3

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	=	131.58 kB	131.51 kB	=	42.15 kB	42.13 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	=	136.82 kB	136.75 kB	=	43.70 kB	43.68 kB
facebook-www/ReactDOM-prod.classic.js	=	440.68 kB	440.58 kB	=	80.35 kB	80.32 kB
facebook-www/ReactDOM-prod.modern.js	=	425.89 kB	425.79 kB	=	78.17 kB	78.14 kB
facebook-www/ReactDOMForked-prod.classic.js	=	440.68 kB	440.58 kB	=	80.35 kB	80.32 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 4e611b3

[eps1lon]

I'm not sure, but this changes from 2016 set default selection for the first non-disabled option, which is lead to inconsistency between pure html and react.

Could you link the change and maybe find out why the prior behavior was chosen?

Verified that this works in https://codesandbox.io/s/react-pr-select-value-with-value-not-matching-option-forked-7xr72e but it would still be nice to add an automated test.

[mmarkelov]

@eps1lon seems like that was a fix when we got some disabled options. And here we got the unexpected behavior, when we pass selected to the first non-disabled property.
PR: #10456
I tried to understand possible scenarios, which we covered in this PR, but couldn't understand them :(

I wanted to add the test case for this, but seems like it's already exists

react/packages/react-dom/src/__tests__/ReactDOMSelect-test.js

Line 365 in d20c3af

it('does not select an item when size is initially set to greater than 1', () => {

But the weird thing that it passed, but it shouldn't cause it has a different behavior in the browser

[eps1lon]

it('does not select an item when size is initially set to greater than 1', () => {

That case is different though since there's no value . That test case is already matching the browser behavior. So it seems like you can just copy that test but then set a value on <select /> that doesn't match any <option />.

I tried to understand possible scenarios, which we covered in this PR, but couldn't understand them :(

Maybe @aweary could take a look at the proposed change to verify the new behavior is still correct.

[github-actions]

This pull request has been automatically marked as stale. If this pull request is still relevant, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize reviewing it yet. Your contribution is very much appreciated.

[github-actions]

Closing this pull request after a prolonged period of inactivity. If this issue is still present in the latest release, please ask for this pull request to be reopened. Thank you!