Merge pull request #3987 from appirio-tech/hotfix/post-release-2.9.1

[DEV] [HOTFIX] Post release 2.9.1 - enforce max values for people and duration in talent picker

Author: maxceem

src/components/PositiveNumberInput/PositiveNumberInput.jsx

@@ -7,10 +7,12 @@ class PositiveNumberInput extends React.PureComponent {
     super(props)
 
     this.isInputValid = true
+    this.previousValue = props.value || ''
 
     this.onKeyDown = this.onKeyDown.bind(this)
     this.onPaste = this.onPaste.bind(this)
     this.onKeyUp = this.onKeyUp.bind(this)
+    this.onChange = this.onChange.bind(this)
   }
 
   onKeyDown(evt) {
@@ -44,26 +46,62 @@ class PositiveNumberInput extends React.PureComponent {
     this.props.onKeyUp(evt)
   }
 
+  onChange(evt) {
+    const { onChange } = this.props
+
+    this.enforceInputBelowMax(evt)
+    onChange(evt)
+  }
+
+  /**
+   * Makes sure the input value is kept below the max value
+   * @param {Event} evt The change event
+   */
+  enforceInputBelowMax(evt) {
+    const value = evt.target.value
+    if (this.isBelowMaxLimit(value)) {
+      this.previousValue = value
+    } else {
+      evt.target.value = this.previousValue
+    }
+  }
+
+  isBelowMaxLimit(text) {
+    const { max = Infinity } = this.props
+    return Number(text) <= max
+  }
+
   render() {
     const props = omit(this.props, ['onValidityChange'])
-    return <input type="number" min={0} {...props} onKeyDown={this.onKeyDown} onPaste={this.onPaste} onKeyUp={this.onKeyUp} />
+    return (
+      <input
+        type="number"
+        min={0}
+        {...props}
+        onKeyDown={this.onKeyDown}
+        onPaste={this.onPaste}
+        onKeyUp={this.onKeyUp}
+        onChange={this.onChange}
+      />
+    )
   }
 }
 
 PositiveNumberInput.defaultProps = {
   onKeyDown: noop,
   onPaste: noop,
   onKeyUp: noop,
-  onValidityChange: noop
-
+  onValidityChange: noop,
+  onChange: noop,
 }
 
 PositiveNumberInput.propTypes = {
+  max: PT.number,
   onKeyDown: PT.func,
   onPaste: PT.func,
   onKeyUp: PT.func,
-  onValidityChange: PT.func
+  onValidityChange: PT.func,
+  onChange: PT.func,
 }
 
-
 export default PositiveNumberInput

src/projects/detail/components/TalentPickerRow/TalentPickerRow.jsx

@@ -100,9 +100,9 @@ class TalentPickerRow extends React.PureComponent {
           People
         </label>
         <PositiveNumberInput
-          type="number"
           styleName="noMargin"
           className={cn('tc-file-field__inputs', { error: isRowIncomplete && value.people <= 0 })}
+          max={10000}
           value={value.people || ''}
           onChange={this.handlePeopleChange}
           onBlur={this.resetPeople}
@@ -116,9 +116,9 @@ class TalentPickerRow extends React.PureComponent {
           Duration (months)
         </label>
         <PositiveNumberInput
-          type="number"
           styleName="noMargin"
           className={cn('tc-file-field__inputs', {error: isRowIncomplete && value.duration <= 0 })}
+          max={10000}
           value={value.duration || ''}
           onChange={this.handleDurationChange}
           onBlur={this.resetDuration}