Bug: defaultValue property missing on select element ref

This issue has been created since 2022-09-18.

React version: 18.2.0

Steps To Reproduce

  1. Set a defaultValue on a <select /> element.
  2. After the element mounts, try to access that defaultValue through a ref of the element.

TypeScript is also missing the definition for defaultValue on HTMLSelectElement type

Link to code example: https://codesandbox.io/s/elated-orla-0p3dw7?file=/src/App.js

The current behavior

defaultValue always returns undefined

The expected behavior

defaultValueshould return the defined value

vkurchatkin wrote this answer on 2022-09-19

This does not have a lot to do with React.

HTMLInputElement has defaultValue property: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#properties

HTMLSelectElement does not: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement#properties

antonio-costa wrote this answer on 2022-09-19

I understand that, but React prompts and console error if I use the "HTML-way" of using selected in <option />.

image

I believe this is was a decision to provide consistency across form elements (which I agree), but if the prop is not returned when I try to access it in a ref, then there's an inconsistency on this implementation, no?

How can I know what is the default value of a select element if React doesn't allow me use the selected prop but also doesn't provide the defaultValue property on the ref?

vkurchatkin wrote this answer on 2022-09-19

if the prop is not returned when I try to access it in a ref, then there's an inconsistency on this implementation, no?

React does indeed provide consistency, but only on the React side of things. It doesn't do anything to unify DOM APIs, because it is not it's job.

How can I know what is the default value of a select element if React doesn't allow me use the selected prop but also doesn't provide the defaultValue property on the ref?

You can definitely read selected when using ref:

useEffect(() => {
    console.log("select default value", selectRef.current.querySelector('option[selected]')?.value);
    console.log("input default value", inputRef.current.defaultValue);
  }, []);

But the most important question is: why do you even want to read defaultValue from DOM? You are the one who provides it, you already know it.

antonio-costa wrote this answer on 2022-09-19

I know I can read selected property, but React strongly advises against using it in the first place.

I'm trying to create a reusable hook for uncontrolled forms (similar to React Hook Form) and I'm comparing the current value with the default value in order to check whether an input has been changed.
This comparison can be done anywhere inside the form context, which may have several components nested and diverging trees.

My solution is to simply keep a reference to the fields registered in the form and access the DOM when I need information. That way I can freely change inputs without any unnecessary re-renders.

I can try to find a way around this, sure, but it just seems inconsistent that I'm advised against the selected property in favor of defaultValue property, but that one is not provided anywhere in the DOM just as selected property is.

vkurchatkin wrote this answer on 2022-09-19

I know I can read selected property, but React strongly advises against using it in the first place.

React advises you agains using selected as React prop, nothing more. It is unreasonable to expect it to actually add a nonexistent property to a DOM node. If you want to work with DOM directly it is up to you to handle differences like this

More Details About Repo
Owner Name facebook
Repo Name react
Full Name facebook/react
Language JavaScript
Created Date 2013-05-24
Updated Date 2022-09-27
Star Count 195296
Watcher Count 6655
Fork Count 40431
Issue Count 1113

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
React Supersampler Crash 1 2020-07-31 2022-09-11
Evaluation and performance 7 2020-10-22 2022-05-18
RuntimeError: Expected to have finished reduction in the prior iteration before starting a new one. 4 2020-11-20 2022-05-18
learning rate when resuming 1 2020-11-10 2022-05-18
FixedOffset.fromutc fails in 2.2.0 under python 3.6 0 2021-08-11 2022-07-06
EER of pre-trained model? 2 2021-02-24 2022-09-22
wrong missed calls count in the notification 5 2022-03-30 2022-09-26
motd.txt reverted to file from template with role migration 2 2021-03-22 2022-09-19
[2.0 beta] Launch program minimized issue 2 2017-01-26 2022-09-20
No .NET Framework installation directory found 5 2011-01-24 2022-09-02
Add `<ViewSwitcher>` component 4 2022-01-27 2022-09-19
Tag component don't use the right color for the text when disabled 1 2022-02-08 2022-07-06
Fix new XLM leak in Validator 1 2021-01-04 2022-07-10
Support dumping json empty configuration at kompile time 0 2021-10-28 2022-02-01
form elements within a <template/> are not isolated 4 2022-03-07 2022-09-16
Cannot run web example 2 2020-12-27 2022-09-11
Extension load failure on GNOME 41 3 2021-11-14 2022-08-30
Error when launching TWS 1012 with IBC 3.12.0 on Linux 4 2022-01-12 2022-08-01
Occasional segfaults 20 2022-08-03 2022-09-19
[误杀] instant.page 3 2021-11-28 2022-01-16
onlyoffice-documentserver-de depends on ttf-mscorefonts-installer 12 2022-05-13 2022-09-04
第三章有很多中文翻译的不通顺 3 2021-11-25 2022-01-15
cannot range over result (type *"database/sql".Rows) 0 2021-10-16 2022-09-08
[Question] How can I Insert an array of a custom postgres type using driver.Value 3 2021-09-29 2022-09-18
Prevent warning during deps.edn jack-in 2 2021-10-21 2022-07-22
The main branch has been protected 0 2021-02-21 2022-07-25
Running Vale with the write-good, Microsoft, or Google styles seems to produce an E201 error, 1 2021-05-02 2022-08-10
ARM Expose location of Spark cluster as a parameter 0 2019-08-05 2022-09-24
使用插件插入图片数据后直接使用特征进行检索,检索失败。 3 2021-02-08 2022-08-04
Enable Default Action for Uploaded Files Via WYSIWYG 0 2022-01-25 2022-09-11
remove/fix broken link 1 2021-08-24 2022-09-19
xhr-upload error handling: Uncaught TypeError: can't access property "log", this.uppy is undefined 1 2021-09-22 2022-09-03
Support for DeepL Glossaries 0 2022-09-14 2022-09-26
[Task] Possibly remove the rest of the 3rd-party CxImage code left in source code 3 2022-02-23 2022-09-10
[Feature Request] fix gruvbox colorscheme foreground color 1 2022-03-27 2022-09-23
UnionMangás 1 2021-10-05 2022-01-10
bring more convenience for i18n in fundamental-ngx components 1 2022-03-02 2022-09-26
mesh的颜色和名字显示不完整,也许是occt-import-js的问题 0 2022-04-02 2022-09-16
Feature request: add colors to meshes 2 2022-03-28 2022-09-16
Is it possible to style an Entity Relation Diagram to indicate a difference in entities? 1 2021-10-07 2022-08-02
[Bug]: \genfrac has bad spacing with (high) custom ruler 3 2022-01-09 2022-09-25
An illegal reflective access operation has occurred 3 2019-04-26 2022-09-23
Blue empty tab space on the website 0 2022-06-25 2022-09-25
Inconsistent relative path behaviour 0 2021-10-22 2022-07-16
Expose more information from ConsulESM in the Consul UI 0 2020-12-15 2022-09-14
Use HTML-to-image to generate story poster image 2 2021-11-11 2022-09-21
Retain selected kernel in untitled notebook when saving notebook 8 2022-06-02 2022-09-19
Text is coming but sound is not coming from Rasa voice interface 4 2020-03-02 2022-09-13
Deprecated ? 0 2021-02-11 2021-12-30
add support for 'fixed' type 4 2018-04-03 2022-09-15