ComposeEmailInput.jsx

class EmailInput extends React.Component<Props, State> {
  state = {
    emailList: [],
    inputValue: '',
  }

  setValues = (value: string) => {
    let v = value;
    if (v.length > 1 && (v.slice(-1) === ',' || v.slice(-1) === ' ')) {
      let list = [...this.state.emailList, v.slice(0, -1)];

      this.setState({ emailList: list, inputValue: "" });
      // clean input
      this.imputRef.value = "";

      switch (this.props.id) {
        case EMAIL_HEADER_INPUT_ID.to:
          this.props.setTo(list);
          break;
        case EMAIL_HEADER_INPUT_ID.cc:
          this.props.setCc(list);
          break;
        case EMAIL_HEADER_INPUT_ID.bcc:
          this.props.setBcc(list);
          break;
      }
    } else {
      this.setState({ inputValue: v });
    }
  };

  onHandleKeyUp = (event) => {
    const { value } = event.target;

    if(event.key === 'Backspace' && value === this.state.inputValue) {
      const emailListUpdated = this.state.emailList;
      emailListUpdated.pop();
      this.setState({ emailList: emailListUpdated });
      return;
    } else {
      this.setValues(event.target.value)
    }
  }

  render(): React.Node {
    const {
      value,
      focus,
      handleExpand,
      isBccMinimized,
      isCcMinimized,
      label,
      id,
      type,
    } = this.props;

    if (isCcMinimized || isBccMinimized) {
      return (
        <Anchor className="pp-email-compose-minimal" onClick={handleExpand} title={label} id={id}>
          {label}
        </Anchor>
      );
    }

    return (
      <label className="pp-display-flex pp-email-compose-fields">
        <span className="pp-email-compose-infos">{label}</span>
        <div className="pp-display-flex">
          {value.map(v => (
            <Badge theme={validateEmail(v) ? 'info' : 'danger'} border>
              {v}
            </Badge>
          ))}
          <input
            ref={ref => this.imputRef = ref}
            autoFocus={focus}
            className="pp-email-compose-input"
            id={id}
            type={type}
            onKeyUp={this.onHandleKeyUp}
            multiple
          />
        </div>
      </label>
    );
  }
}