redux-form-material-ui
redux-form-material-ui copied to clipboard
Button inside input's endAdornment updates input value to empty string
If I press "Close" button, then redux-form reducer takes value of this button (which is empty string) and put it to the BLUR
reducer, which updates input value to empty string.
Input:
<Field
id="cvv"
name="cvv"
component={TextField}
label={codeName}
margin="normal"
normalize={numericMaxLength(codeSize)}
InputProps={{
endAdornment: CVVHint,
}}
type="password"
fullWidth
/>
Adornment:
<Fragment>
<InputAdornment position={position}>
<HelpIcon
onClick={this.handleClickShowPopover}
ref={node => {
this.helpIconNode = node
}}
className={classes.adornmentIcon}
/>
</InputAdornment>
<Popover
open={this.state.open}
anchorEl={this.state.anchorEl}
onClose={this.handleClose}
anchorOrigin={{
vertical: 'top',
horizontal: 'left'
}}
transformOrigin={{
vertical: 'bottom',
horizontal: 'right',
}}
>
<Card className={classes.cardContainer}>
<CardContent>
<Text h2 tid={headerTextId} className={classes.controls}/>
<Text h3 tid={hintTextId} className={classes.controls}/>
<PaymentHintImage className={classes.controls} />
</CardContent>
<CardActions className={classes.root}>
**<Button color="primary" onClick={this.handleClose}>
<Text tid="CLOSE" />
</Button>**
</CardActions>
</Card>
</Popover>
</Fragment>
handleClose:
handleClose = () => {
this.setState({
open: false,
});
};
Note: if I change Button to div, then everything is fine, because divNode.value === undefined
I am having nearly the exact same problem. Once you tab over the endAdornment and then blur off of the endAdornment, the input field gets updated to "".