@@ -1625,15 +1625,39 @@ describe('ReactDOMInput', () => {
1625
1625
const originalCreateElement = document . createElement ;
1626
1626
spyOnDevAndProd ( document , 'createElement' ) . and . callFake ( function ( type ) {
1627
1627
const el = originalCreateElement . apply ( this , arguments ) ;
1628
- let value = '' ;
1628
+ const getDefaultValue = Object . getOwnPropertyDescriptor (
1629
+ HTMLInputElement . prototype ,
1630
+ 'defaultValue' ,
1631
+ ) . get ;
1632
+ const setDefaultValue = Object . getOwnPropertyDescriptor (
1633
+ HTMLInputElement . prototype ,
1634
+ 'defaultValue' ,
1635
+ ) . set ;
1636
+ const getValue = Object . getOwnPropertyDescriptor (
1637
+ HTMLInputElement . prototype ,
1638
+ 'value' ,
1639
+ ) . get ;
1640
+ const setValue = Object . getOwnPropertyDescriptor (
1641
+ HTMLInputElement . prototype ,
1642
+ 'value' ,
1643
+ ) . set ;
1629
1644
if ( type === 'input' ) {
1645
+ Object . defineProperty ( el , 'defaultValue' , {
1646
+ get : function ( ) {
1647
+ return getDefaultValue . call ( this ) ;
1648
+ } ,
1649
+ set : function ( val ) {
1650
+ log . push ( `node.defaultValue = ${ strify ( val ) } ` ) ;
1651
+ setDefaultValue . call ( this , val ) ;
1652
+ } ,
1653
+ } ) ;
1630
1654
Object . defineProperty ( el , 'value' , {
1631
1655
get : function ( ) {
1632
- return value ;
1656
+ return getValue . call ( this ) ;
1633
1657
} ,
1634
1658
set : function ( val ) {
1635
- value = '' + val ;
1636
1659
log . push ( `node.value = ${ strify ( val ) } ` ) ;
1660
+ setValue . call ( this , val ) ;
1637
1661
} ,
1638
1662
} ) ;
1639
1663
spyOnDevAndProd ( el , 'setAttribute' ) . and . callFake ( function ( name , val ) {
@@ -1648,12 +1672,18 @@ describe('ReactDOMInput', () => {
1648
1672
if ( disableInputAttributeSyncing ) {
1649
1673
expect ( log ) . toEqual ( [
1650
1674
'node.setAttribute("type", "date")' ,
1651
- 'node.setAttribute("value", "1980-01-01")' ,
1675
+ 'node.defaultValue = "1980-01-01"' ,
1676
+ // TODO: it's possible this reintroduces the bug because we don't assign `value` at all.
1677
+ // Need to check this on mobile Safari and Chrome.
1652
1678
] ) ;
1653
1679
} else {
1654
1680
expect ( log ) . toEqual ( [
1655
1681
'node.setAttribute("type", "date")' ,
1682
+ // value must be assigned before defaultValue. This fixes an issue where the
1683
+ // visually displayed value of date inputs disappears on mobile Safari and Chrome:
1684
+ // https://github.com/facebook/react/issues/7233
1656
1685
'node.value = "1980-01-01"' ,
1686
+ 'node.defaultValue = "1980-01-01"' ,
1657
1687
] ) ;
1658
1688
}
1659
1689
} ) ;
0 commit comments