Replace setError: with setError:animated: to fix layout bug when an error message is displayed on load

Author: Stephanie Sharp

MaterialTextField/MFTextField.h

@@ -60,10 +60,17 @@ IB_DESIGNABLE
  */
 @property (nonatomic) IBInspectable UIColor *underlineColor;
 
-/** 
+/**
  * To display an error under the text field, provide an NSError with a localized description.
+ *
+ * @param animated Set to YES to animate showing & hiding the error message.
+ */
+- (void)setError:(NSError *)error animated:(BOOL)animated;
+
+/**
+ * The error displayed under the text field.
  */
-@property (nonatomic) NSError *error;
+@property (nonatomic, readonly) NSError *error;
 
 /**
  * The font for the error displayed under the text field.

MaterialTextField/MFTextField.m

@@ -266,10 +266,10 @@ - (UIFont *)defaultPlaceholderFont
 
 #pragma mark Error
 
-- (void)setError:(NSError *)error
+- (void)setError:(NSError *)error animated:(BOOL)animated
 {
     _error = error;
-    [self layoutErrorLabelAnimated:YES];
+    [self layoutErrorLabelAnimated:animated];
 }
 
 - (void)setErrorColor:(UIColor *)errorColor

MaterialTextFieldDemo/MaterialTextFieldDemo/Base.lproj/Main.storyboard

@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="9059" systemVersion="15B42" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" initialViewController="BYZ-38-t0r">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="9531" systemVersion="15C50" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" initialViewController="BYZ-38-t0r">
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="9049"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="9529"/>
         <capability name="Constraints to layout margins" minToolsVersion="6.0"/>
     </dependencies>
     <scenes>
@@ -20,7 +20,6 @@
                         <subviews>
                             <textField opaque="NO" clipsSubviews="YES" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" text="some text" placeholder="placeholder" adjustsFontSizeToFit="NO" minimumFontSize="17" clearButtonMode="whileEditing" translatesAutoresizingMaskIntoConstraints="NO" id="Wbu-R9-PKC" customClass="MFTextField">
                                 <rect key="frame" x="20" y="160" width="560" height="40"/>
-                                <animations/>
                                 <fontDescription key="fontDescription" type="system" pointSize="20"/>
                                 <textInputTraits key="textInputTraits"/>
                                 <connections>
@@ -29,7 +28,6 @@
                             </textField>
                             <textField opaque="NO" clipsSubviews="YES" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" placeholder="placeholder" adjustsFontSizeToFit="NO" minimumFontSize="17" clearButtonMode="whileEditing" translatesAutoresizingMaskIntoConstraints="NO" id="vrI-fI-vIo" customClass="MFTextField">
                                 <rect key="frame" x="20" y="100" width="560" height="40"/>
-                                <animations/>
                                 <constraints>
                                     <constraint firstAttribute="width" constant="280" id="UwL-Iq-bVI"/>
                                 </constraints>
@@ -47,7 +45,6 @@
                             </textField>
                             <textField opaque="NO" clipsSubviews="YES" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" borderStyle="line" placeholder="Password" minimumFontSize="17" clearButtonMode="always" translatesAutoresizingMaskIntoConstraints="NO" id="A1d-5c-S25" customClass="MFTextField">
                                 <rect key="frame" x="20" y="220" width="560" height="32.5"/>
-                                <animations/>
                                 <fontDescription key="fontDescription" type="system" pointSize="14"/>
                                 <textInputTraits key="textInputTraits" secureTextEntry="YES"/>
                                 <userDefinedRuntimeAttributes>
@@ -64,16 +61,32 @@
                             </textField>
                             <textField opaque="NO" clipsSubviews="YES" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" placeholder="number" textAlignment="right" adjustsFontSizeToFit="NO" minimumFontSize="17" translatesAutoresizingMaskIntoConstraints="NO" id="gNx-E7-aGq" customClass="MFTextField">
                                 <rect key="frame" x="20" y="20" width="560" height="60"/>
-                                <animations/>
                                 <fontDescription key="fontDescription" type="system" pointSize="37"/>
                                 <textInputTraits key="textInputTraits" keyboardType="decimalPad"/>
                                 <connections>
                                     <action selector="textFieldDidChange:" destination="BYZ-38-t0r" eventType="editingChanged" id="WVM-lw-vpg"/>
                                     <outlet property="delegate" destination="BYZ-38-t0r" id="0u6-qT-cZ2"/>
                                 </connections>
                             </textField>
+                            <textField opaque="NO" clipsSubviews="YES" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" placeholder="placeholder" adjustsFontSizeToFit="NO" minimumFontSize="17" clearButtonMode="whileEditing" translatesAutoresizingMaskIntoConstraints="NO" id="Z0L-Ka-jzP" customClass="MFTextField">
+                                <rect key="frame" x="20" y="272.5" width="560" height="40"/>
+                                <color key="tintColor" white="0.0" alpha="1" colorSpace="calibratedWhite"/>
+                                <constraints>
+                                    <constraint firstAttribute="width" constant="280" id="goQ-az-rpx"/>
+                                </constraints>
+                                <fontDescription key="fontDescription" type="system" pointSize="20"/>
+                                <textInputTraits key="textInputTraits"/>
+                                <variation key="default">
+                                    <mask key="constraints">
+                                        <exclude reference="goQ-az-rpx"/>
+                                    </mask>
+                                </variation>
+                                <connections>
+                                    <action selector="textFieldDidChange:" destination="BYZ-38-t0r" eventType="editingChanged" id="7p3-ay-HPi"/>
+                                    <outlet property="delegate" destination="BYZ-38-t0r" id="xHD-DP-ky4"/>
+                                </connections>
+                            </textField>
                         </subviews>
-                        <animations/>
                         <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
                         <gestureRecognizers/>
                         <constraints>
@@ -82,13 +95,16 @@
                             <constraint firstAttribute="trailingMargin" secondItem="gNx-E7-aGq" secondAttribute="trailing" id="I3m-w6-1eA"/>
                             <constraint firstItem="gNx-E7-aGq" firstAttribute="leading" secondItem="8bC-Xf-vdC" secondAttribute="leadingMargin" id="JGp-OO-Lj7"/>
                             <constraint firstItem="vrI-fI-vIo" firstAttribute="leading" secondItem="8bC-Xf-vdC" secondAttribute="leadingMargin" id="OcS-24-SuD"/>
+                            <constraint firstItem="Z0L-Ka-jzP" firstAttribute="top" secondItem="A1d-5c-S25" secondAttribute="bottom" constant="20" id="Tsl-Z9-wd4"/>
                             <constraint firstItem="Wbu-R9-PKC" firstAttribute="top" secondItem="vrI-fI-vIo" secondAttribute="bottom" constant="20" id="TxR-tX-kSq"/>
                             <constraint firstItem="A1d-5c-S25" firstAttribute="leading" secondItem="8bC-Xf-vdC" secondAttribute="leadingMargin" id="V7P-NO-erp"/>
                             <constraint firstAttribute="trailingMargin" secondItem="vrI-fI-vIo" secondAttribute="trailing" id="XRC-Do-j64"/>
                             <constraint firstItem="vrI-fI-vIo" firstAttribute="top" secondItem="gNx-E7-aGq" secondAttribute="bottom" constant="20" id="YpL-as-BsA"/>
+                            <constraint firstItem="Z0L-Ka-jzP" firstAttribute="trailing" secondItem="8bC-Xf-vdC" secondAttribute="trailingMargin" id="aEg-nt-aHp"/>
                             <constraint firstItem="Wbu-R9-PKC" firstAttribute="leading" secondItem="vrI-fI-vIo" secondAttribute="leading" id="fuU-6H-anJ"/>
                             <constraint firstItem="gNx-E7-aGq" firstAttribute="top" secondItem="y3c-jy-aDJ" secondAttribute="bottom" id="lwY-Tl-Xmh"/>
                             <constraint firstItem="A1d-5c-S25" firstAttribute="top" secondItem="Wbu-R9-PKC" secondAttribute="bottom" constant="20" id="sAh-8l-mox"/>
+                            <constraint firstItem="Z0L-Ka-jzP" firstAttribute="leading" secondItem="8bC-Xf-vdC" secondAttribute="leadingMargin" id="yzG-BW-5DI"/>
                         </constraints>
                         <connections>
                             <outletCollection property="gestureRecognizers" destination="c8Q-pN-pP5" appends="YES" id="9Q4-no-6ng"/>
@@ -97,6 +113,7 @@
                     <connections>
                         <outlet property="textField1" destination="gNx-E7-aGq" id="1pI-Mq-qvh"/>
                         <outlet property="textField2" destination="vrI-fI-vIo" id="e8w-3k-NaW"/>
+                        <outlet property="textField5" destination="Z0L-Ka-jzP" id="lDR-gK-uuK"/>
                     </connections>
                 </viewController>
                 <placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>

MaterialTextFieldDemo/MaterialTextFieldDemo/MaterialTextFieldDemoViewController.m

@@ -16,6 +16,7 @@ @interface MaterialTextFieldDemoViewController () <UITextFieldDelegate>
 
 @property (weak, nonatomic) IBOutlet MFTextField *textField1;
 @property (weak, nonatomic) IBOutlet MFTextField *textField2;
+@property (weak, nonatomic) IBOutlet MFTextField *textField5;
 
 @end
 
@@ -27,6 +28,7 @@ - (void)viewDidLoad
 
     [self setupTextField1];
     [self setupTextField2];
+    [self setupTextField5];
 }
 
 #pragma mark - Setup
@@ -51,6 +53,11 @@ - (void)setupTextField2
     self.textField2.attributedPlaceholder = [[NSAttributedString alloc] initWithString:@"Attributed placeholder" attributes:@{NSFontAttributeName:font}];
 }
 
+- (void)setupTextField5
+{
+    [self validateTextField5Animated:NO];
+}
+
 #pragma mark - Actions
 
 - (IBAction)dismissKeyboard
@@ -59,29 +66,27 @@ - (IBAction)dismissKeyboard
 }
 
 - (IBAction)textFieldDidChange:(UITextField *)textField
-{
-    [self updateTextField:textField];
-}
-
-#pragma mark - Text field validation
-
-- (void)updateTextField:(UITextField *)textField
 {
     if (textField == self.textField1) {
         [self validateTextField1];
     }
     else if (textField == self.textField2) {
         [self validateTextField2];
     }
+    else if (textField == self.textField5) {
+        [self validateTextField5Animated:YES];
+    }
 }
 
+#pragma mark - Text field validation
+
 - (void)validateTextField1
 {
     NSError *error = nil;
     if (![self textField1IsValid]) {
         error = [self errorWithLocalizedDescription:@"Maximum of 6 characters allowed."];
     }
-    self.textField1.error = error;
+    [self.textField1 setError:error animated:YES];
 }
 
 - (void)validateTextField2
@@ -90,7 +95,16 @@ - (void)validateTextField2
     if (![self textField2IsValid]) {
         error = [self errorWithLocalizedDescription:@"This is an error message that is really long and should wrap onto 2 or more lines."];
     }
-    self.textField2.error = error;
+    [self.textField2 setError:error animated:YES];
+}
+
+- (void)validateTextField5Animated:(BOOL)animated
+{
+    NSError *error = nil;
+    if (![self textField5IsValid]) {
+        error = [self errorWithLocalizedDescription:@"An error message"];
+    }
+    [self.textField5 setError:error animated:animated];
 }
 
 - (BOOL)textField1IsValid
@@ -103,6 +117,11 @@ - (BOOL)textField2IsValid
     return self.textField2.text.length < 3;
 }
 
+- (BOOL)textField5IsValid
+{
+    return self.textField5.text.length > 0;
+}
+
 - (NSError *)errorWithLocalizedDescription:(NSString *)localizedDescription
 {
     NSDictionary *userInfo = @{NSLocalizedDescriptionKey: localizedDescription};