ConnectedInput.js

import React, { Component } from "react";
import Humanize from "humanize-plus";

function ConnectedInput(props) {
  const [editedValue, setValue] = React.useState('')
  const [isEditing, setEditing] = React.useState(false)

  const handleChange = (e) => {
    setValue(e.target.value)
    props.inputOnChange(e)
  }

  const handleFocus = ()  => {
    setEditing(true)
    setValue(props.inputDefaultValue)
  }

  const handleBlur = () => {
    setEditing(false)
  }

  let color =
    props.inputRawValue > 0
      ? "primary"
      : props.inputRawValue < 0
      ? "danger"
      : "grey";
  return (
    <div className="field has-addons has-addons-right">
      <p className="control is-expanded">
        <input
          id={props.inputId}
          className={`input is-small has-text-${color} ${
            props.additionalClasses
          }`}
          type={props.inputType}
          step={props.inputStep}
          min={props.inputMin}
          value={isEditing ? editedValue : props.inputDefaultValue}
          onChange={handleChange}
          onFocus={handleFocus}
          onBlur={handleBlur}
        />
      </p>
    </div>
  );
}

export default React.memo(ConnectedInput);