redux-form-material-ui icon indicating copy to clipboard operation
redux-form-material-ui copied to clipboard

Button inside input's endAdornment updates input value to empty string

Open Undefitied opened this issue 7 years ago • 1 comments

screenshot from 2018-01-30 10-27-13 screenshot from 2018-01-30 10-27-41

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

Undefitied avatar Jan 30 '18 08:01 Undefitied

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

veryscarycary avatar Jul 25 '18 21:07 veryscarycary