redux-form-material-ui

redux-form-material-ui copied to clipboard

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 "".