From 835a2dc1455cdeb01ded3ac3a1bc21a074515734 Mon Sep 17 00:00:00 2001
From: Vigneshkumar Chinnachamy M <thegardenerwhocodes@gmail.com>
Date: Tue, 5 May 2020 03:30:05 +0530
Subject: [PATCH 1/3] enforce max values for people and duration in talent
 picker

---
 .../PositiveNumberInput.jsx                   | 31 ++++++++++++++++++-
 .../TalentPickerRow/TalentPickerRow.jsx       |  4 +--
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/components/PositiveNumberInput/PositiveNumberInput.jsx b/src/components/PositiveNumberInput/PositiveNumberInput.jsx
index 7f01cf7ff..b5794f64c 100644
--- a/src/components/PositiveNumberInput/PositiveNumberInput.jsx
+++ b/src/components/PositiveNumberInput/PositiveNumberInput.jsx
@@ -21,6 +21,7 @@ class PositiveNumberInput extends React.PureComponent {
     if (isPrintableKey && !digitPattern.test(evt.key)) {
       evt.preventDefault()
     }
+    isPrintableKey && this.enforceInputBelowMax(evt)
     this.props.onKeyDown(evt)
   }
 
@@ -32,6 +33,7 @@ class PositiveNumberInput extends React.PureComponent {
     if (!digitsPattern.test(text)) {
       evt.preventDefault()
     }
+    this.enforceInputBelowMax(evt)
     this.props.onPaste(evt)
   }
 
@@ -44,8 +46,34 @@ class PositiveNumberInput extends React.PureComponent {
     this.props.onKeyUp(evt)
   }
 
+  /**
+   * Makes sure the input value is kept below the max value
+   * @param {Event} evt The keydown or paste event
+   */
+  enforceInputBelowMax(evt) {
+    const { onChange } = this.props
+    const previousValue = evt.target.value
+    if (this.isBelowMaxLimit(previousValue)) {
+      // persists the synthetic event. So that we can use it inside setTimeout
+      evt.persist()
+
+      // setTimeout to let the input element set the actual value after the keydown/paste
+      setTimeout(() => {
+        if (!this.isBelowMaxLimit(evt.target.value)) {
+          evt.target.value = previousValue
+          onChange && onChange(evt)
+        }
+      })
+    }
+  }
+
+  isBelowMaxLimit(text) {
+    const { max = Infinity } = this.props
+    return Number(text) <= max
+  }
+
   render() {
-    const props = omit(this.props, ['onValidityChange'])
+    const props = omit(this.props, ['onValidityChange', 'max'])
     return <input type="number" min={0} {...props} onKeyDown={this.onKeyDown} onPaste={this.onPaste} onKeyUp={this.onKeyUp} />
   }
 }
@@ -59,6 +87,7 @@ PositiveNumberInput.defaultProps = {
 }
 
 PositiveNumberInput.propTypes = {
+  max: PT.number,
   onKeyDown: PT.func,
   onPaste: PT.func,
   onKeyUp: PT.func,
diff --git a/src/projects/detail/components/TalentPickerRow/TalentPickerRow.jsx b/src/projects/detail/components/TalentPickerRow/TalentPickerRow.jsx
index d6ab115be..ce777caaf 100644
--- a/src/projects/detail/components/TalentPickerRow/TalentPickerRow.jsx
+++ b/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}

From 815c57935580d4c83276c090bd50046f8a5737fc Mon Sep 17 00:00:00 2001
From: Vigneshkumar Chinnachamy M <thegardenerwhocodes@gmail.com>
Date: Wed, 6 May 2020 20:32:32 +0530
Subject: [PATCH 2/3] fix issue in max validation of positive number input
 component

---
 src/components/PositiveNumberInput/PositiveNumberInput.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PositiveNumberInput/PositiveNumberInput.jsx b/src/components/PositiveNumberInput/PositiveNumberInput.jsx
index b5794f64c..cc68c46a9 100644
--- a/src/components/PositiveNumberInput/PositiveNumberInput.jsx
+++ b/src/components/PositiveNumberInput/PositiveNumberInput.jsx
@@ -73,7 +73,7 @@ class PositiveNumberInput extends React.PureComponent {
   }
 
   render() {
-    const props = omit(this.props, ['onValidityChange', 'max'])
+    const props = omit(this.props, ['onValidityChange'])
     return <input type="number" min={0} {...props} onKeyDown={this.onKeyDown} onPaste={this.onPaste} onKeyUp={this.onKeyUp} />
   }
 }

From 95e4db3e4b356a5ef1901121dc1d7d68c81994c5 Mon Sep 17 00:00:00 2001
From: Vigneshkumar Chinnachamy M <thegardenerwhocodes@gmail.com>
Date: Wed, 6 May 2020 21:22:15 +0530
Subject: [PATCH 3/3] fix a user experience issue in max validation of Positive
 number input

---
 .../PositiveNumberInput.jsx                   | 51 +++++++++++--------
 1 file changed, 30 insertions(+), 21 deletions(-)

diff --git a/src/components/PositiveNumberInput/PositiveNumberInput.jsx b/src/components/PositiveNumberInput/PositiveNumberInput.jsx
index cc68c46a9..b042858c4 100644
--- a/src/components/PositiveNumberInput/PositiveNumberInput.jsx
+++ b/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) {
@@ -21,7 +23,6 @@ class PositiveNumberInput extends React.PureComponent {
     if (isPrintableKey && !digitPattern.test(evt.key)) {
       evt.preventDefault()
     }
-    isPrintableKey && this.enforceInputBelowMax(evt)
     this.props.onKeyDown(evt)
   }
 
@@ -33,7 +34,6 @@ class PositiveNumberInput extends React.PureComponent {
     if (!digitsPattern.test(text)) {
       evt.preventDefault()
     }
-    this.enforceInputBelowMax(evt)
     this.props.onPaste(evt)
   }
 
@@ -46,24 +46,23 @@ 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 keydown or paste event
+   * @param {Event} evt The change event
    */
   enforceInputBelowMax(evt) {
-    const { onChange } = this.props
-    const previousValue = evt.target.value
-    if (this.isBelowMaxLimit(previousValue)) {
-      // persists the synthetic event. So that we can use it inside setTimeout
-      evt.persist()
-
-      // setTimeout to let the input element set the actual value after the keydown/paste
-      setTimeout(() => {
-        if (!this.isBelowMaxLimit(evt.target.value)) {
-          evt.target.value = previousValue
-          onChange && onChange(evt)
-        }
-      })
+    const value = evt.target.value
+    if (this.isBelowMaxLimit(value)) {
+      this.previousValue = value
+    } else {
+      evt.target.value = this.previousValue
     }
   }
 
@@ -74,7 +73,17 @@ class PositiveNumberInput extends React.PureComponent {
 
   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}
+      />
+    )
   }
 }
 
@@ -82,8 +91,8 @@ PositiveNumberInput.defaultProps = {
   onKeyDown: noop,
   onPaste: noop,
   onKeyUp: noop,
-  onValidityChange: noop
-
+  onValidityChange: noop,
+  onChange: noop,
 }
 
 PositiveNumberInput.propTypes = {
@@ -91,8 +100,8 @@ PositiveNumberInput.propTypes = {
   onKeyDown: PT.func,
   onPaste: PT.func,
   onKeyUp: PT.func,
-  onValidityChange: PT.func
+  onValidityChange: PT.func,
+  onChange: PT.func,
 }
 
-
 export default PositiveNumberInput