Undo changes to Input and pass down showInvalidWithoutValue

common/components/AmountField.tsx

@@ -10,13 +10,15 @@ interface Props {
   hasSendEverything?: boolean;
   showAllTokens?: boolean;
   customValidator?(rawAmount: string): boolean;
+  showInvalidWithoutValue?: boolean;
 }
 
 export const AmountField: React.SFC<Props> = ({
   hasUnitDropdown,
   hasSendEverything,
   showAllTokens,
-  customValidator
+  customValidator,
+  showInvalidWithoutValue
 }) => (
   <AmountFieldFactory
     withProps={({ currentValue: { raw }, isValid, onChange, readOnly }) => (
@@ -30,7 +32,7 @@ export const AmountField: React.SFC<Props> = ({
             value={raw}
             readOnly={!!readOnly}
             onChange={onChange}
-            showInvalidWithoutValue={true}
+            showInvalidWithoutValue={showInvalidWithoutValue}
           />
           {hasSendEverything && <SendEverything />}
           {hasUnitDropdown && <UnitDropDown showAllTokens={showAllTokens} />}

common/components/ui/Input.tsx

@@ -40,17 +40,16 @@ class Input extends React.Component<Props, State> {
     const hasValue = !!this.props.value && this.props.value.toString().length > 0;
 
     // Currently we don't ever highlight valid, so go empty string instead
-    const validDueToValue = !hasValue && !showInvalidWithoutValue;
-    const validDueToBlur = !hasBlurred && !showInvalidBeforeBlur;
     let validClass = isValid ? '' : 'invalid';
-
-    // Override validity based on initial conditions.
-    if (isStateless || validDueToValue || validDueToBlur) {
+    if (isStateless) {
       validClass = '';
     }
-
-    // Show an error with no value only after blurring.
-    if (!isStateless && !validDueToBlur && !hasValue && showInvalidWithoutValue) {
+    if (!hasValue && !showInvalidWithoutValue) {
+      validClass = '';
+    } else if (!hasBlurred && !showInvalidBeforeBlur) {
+      validClass = '';
+    }
+    if (!isStateless && !hasValue && showInvalidWithoutValue) {
       validClass = 'invalid';
     }
 

common/containers/Tabs/SendTransaction/components/Fields/Fields.tsx

@@ -54,7 +54,11 @@ class FieldsClass extends Component<StateProps> {
                   <div
                     className={schedulingAvailable ? 'col-sm-9 col-md-10' : 'col-sm-12 col-md-12'}
                   >
-                    <AmountField hasUnitDropdown={true} hasSendEverything={true} />
+                    <AmountField
+                      hasUnitDropdown={true}
+                      hasSendEverything={true}
+                      showInvalidWithoutValue={true}
+                    />
                   </div>
                   {schedulingAvailable && (
                     <div className="col-sm-3 col-md-2">

common/containers/Tabs/SendTransaction/components/RequestPayment.tsx

@@ -101,7 +101,7 @@ class RequestPayment extends React.Component<Props, {}> {
               <AmountField
                 hasUnitDropdown={true}
                 showAllTokens={true}
-                customValidator={isValidAmount(decimal)}
+                showInvalidWithoutValue={true}
               />
             </div>
           </div>