feat(slider, numberinput): add onKeyUp callback prop for input (#11230

) * feat(slider): add onKeyUp callback prop for input * feat(numberinput): add onKeyUp callback prop for input
carbon-design-system · Apr 21, 2022 · 4d2a4b6 · 4d2a4b6
1 parent 2527236
commit 4d2a4b6
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/packages/react/src/components/NumberInput/next/NumberInput.js b/packages/react/src/components/NumberInput/next/NumberInput.js
@@ -45,6 +45,7 @@ const NumberInput = React.forwardRef(function NumberInput(props, forwardRef) {
     min,
     onChange,
     onClick,
+    onKeyUp,
     readOnly,
     size = 'md',
     step = 1,
@@ -162,6 +163,7 @@ const NumberInput = React.forwardRef(function NumberInput(props, forwardRef) {
             min={min}
             onClick={onClick}
             onChange={handleOnChange}
+            onKeyUp={onKeyUp}
             pattern="[0-9]*"
             readOnly={readOnly}
             step={step}
@@ -329,6 +331,11 @@ NumberInput.propTypes = {
    */
   onClick: PropTypes.func,
 
+  /**
+   * Provide an optional function to be called when a key is pressed in the number input
+   */
+  onKeyUp: PropTypes.func,
+
   /**
    * Specify if the component should be read-only
    */

diff --git a/packages/react/src/components/Slider/Slider.js b/packages/react/src/components/Slider/Slider.js
@@ -127,6 +127,11 @@ export default class Slider extends PureComponent {
      */
     onChange: PropTypes.func,
 
+    /**
+     * Provide an optional function to be called when a key is pressed in the number input
+     */
+    onInputKeyUp: PropTypes.func,
+
     /**
      * The callback to get notified of value on handle release.
      */
@@ -653,6 +658,7 @@ export default class Slider extends PureComponent {
                   step={step}
                   onChange={this.onChange}
                   onBlur={this.onBlur}
+                  onKeyUp={this.onInputKeyUp}
                   data-invalid={isValid ? null : true}
                   aria-invalid={isValid ? null : true}
                 />