TextField - charCount UX change

src/components/chipsInput/__tests__/index.spec.js

@@ -41,7 +41,7 @@ describe('ChipsInput', () => {
     });
 
     it('should update state - tagIndexToRemove with last tag index', () => {
-      const pressEvent = {nativeEvent: {key: 'Backspace'}};
+      const pressEvent = {nativeEvent: {key: Constants.backspaceKey}};
       uut.onKeyPress(pressEvent);
       expect(uut.state.tagIndexToRemove).toBe(2);
     });
@@ -54,7 +54,7 @@ describe('ChipsInput', () => {
     });
 
     it('should not update state if there are not tags', () => {
-      const pressEvent = {nativeEvent: {key: 'Backspace'}};
+      const pressEvent = {nativeEvent: {key: Constants.backspaceKey}};
       _.set(uut.state, 'tags', []);
       uut.onKeyPress(pressEvent);
       expect(uut.state.tagIndexToRemove).toBe(undefined);
@@ -71,7 +71,7 @@ describe('ChipsInput', () => {
     });
 
     it('should not update state if input value is not empty', () => {
-      const pressEvent = {nativeEvent: {key: 'Backspace'}};
+      const pressEvent = {nativeEvent: {key: Constants.backspaceKey}};
       _.set(uut.state, 'tags', [{}, {}, {}]);
       _.set(uut.state, 'value', 'some text');
       uut.onKeyPress(pressEvent);
@@ -89,7 +89,7 @@ describe('ChipsInput', () => {
     });
 
     it('should not set last tag index if it is already set to last index, instead call remove tag', () => {
-      const pressEvent = {nativeEvent: {key: 'Backspace'}};
+      const pressEvent = {nativeEvent: {key: Constants.backspaceKey}};
       _.set(uut.state, 'tagIndexToRemove', 2);
       uut.onKeyPress(pressEvent);
       expect(removeTagSpy).toHaveBeenCalled();

src/components/chipsInput/index.js

@@ -213,7 +213,7 @@ export default class ChipsInput extends BaseComponent {
     const tagsCount = _.size(tags);
     const keyCode = _.get(event, 'nativeEvent.key');
     const hasNoValue = _.isEmpty(value);
-    const pressedBackspace = Constants.isAndroid || keyCode === 'Backspace';
+    const pressedBackspace = Constants.isAndroid || keyCode === Constants.backspaceKey;
     const hasTags = tagsCount > 0;
 
     if (pressedBackspace) {

src/components/tagsInput/index.js

@@ -216,7 +216,7 @@ export default class TagsInput extends BaseComponent {
     const tagsCount = _.size(tags);
     const keyCode = _.get(event, 'nativeEvent.key');
     const hasNoValue = _.isEmpty(value);
-    const pressedBackspace = Constants.isAndroid || keyCode === 'Backspace';
+    const pressedBackspace = Constants.isAndroid || keyCode === Constants.backspaceKey;
     const hasTags = tagsCount > 0;
 
     if (pressedBackspace) {

src/components/textField/index.js

@@ -197,7 +197,8 @@ export default class TextField extends BaseInput {
       value: props.value, // for floatingPlaceholder functionality
       floatingPlaceholderState: new Animated.Value(this.shouldFloatPlaceholder(props.value) ? 1 : 0),
       showExpandableModal: false,
-      floatingPlaceholderTranslate: 0
+      floatingPlaceholderTranslate: 0,
+      charCountColor: CHAR_COUNTER_COLOR_BY_STATE.default
     };
 
     this.generatePropsWarnings(props);
@@ -318,6 +319,23 @@ export default class TextField extends BaseInput {
     return 0;
   }
 
+  setCharCountColor(key) {
+    this.maxReached = key === Constants.backspaceKey ? false : this.isCounterLimit();
+    const color = this.state.focused && this.maxReached ?
+      CHAR_COUNTER_COLOR_BY_STATE.error : CHAR_COUNTER_COLOR_BY_STATE.default;
+
+    if (color !== this.state.charCountColor) {
+      this.setState({charCountColor: color});
+    }
+  }
+
+  getCharCountColor() {
+    const {charCountColor} = this.state;
+    const {disabledColor} = this.getThemeProps();
+
+    return this.isDisabled() && disabledColor ? disabledColor : charCountColor;
+  }
+
   getTopPaddings() {
     return this.shouldFakePlaceholder() ? (this.shouldShowTopError() ? undefined : 25) : undefined;
   }
@@ -458,14 +476,11 @@ export default class TextField extends BaseInput {
   }
 
   renderCharCounter() {
-    const {focused} = this.state;
-    const {maxLength, showCharacterCounter, disabledColor} = this.getThemeProps();
+    const {maxLength, showCharacterCounter} = this.getThemeProps();
 
     if (maxLength && showCharacterCounter) {
       const counter = this.getCharCount();
-      const textColor =
-        this.isCounterLimit() && focused ? CHAR_COUNTER_COLOR_BY_STATE.error : CHAR_COUNTER_COLOR_BY_STATE.default;
-      const color = this.isDisabled() && disabledColor ? disabledColor : textColor;
+      const color = this.getCharCountColor();
 
       return (
         <Text
@@ -620,7 +635,7 @@ export default class TextField extends BaseInput {
 
       return (
         <TouchableOpacity
-          {...others} accessibilityLabel={accessibilityLabel} 
+          {...others} accessibilityLabel={accessibilityLabel}
           style={[this.styles.rightButton, style]} onPress={this.onPressRightButton}
         >
           <Image
@@ -698,13 +713,14 @@ export default class TextField extends BaseInput {
 
   onKeyPress = event => {
     this.lastKey = event.nativeEvent.key;
+    this.setCharCountColor(this.lastKey);
     _.invoke(this.props, 'onKeyPress', event);
   };
 
   onChangeText = text => {
     // when character count exceeds maxLength text will be empty string.
     // HACK: To avoid setting state value to '' we check the source of that deletion
-    if (text === '' && this.lastKey && this.lastKey !== 'Backspace') {
+    if (text === '' && this.lastKey && this.lastKey !== Constants.backspaceKey) {
       return;
     }
 

src/helpers/Constants.ts

@@ -136,7 +136,10 @@ const constants = {
   /* Accessibility */
   get accessibility() {
     return accessibility;
-  }
+  },
+  /* Keyboard */
+  backspaceKey: 'Backspace',
+  enterKey: 'Enter'
 };
 
 setStatusBarHeight();