Merge pull request #1427 from vtex/fix/quantity-selector-in-touch-scr…

…eens

Fix: `NumericStepper` click event

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Fixed
+
+- **NumericStepper** not working after switching from touch devices.
+
 ## [9.146.1] - 2022-03-14
 
 ### Removed

manifest.json

@@ -2,7 +2,7 @@
   "vendor": "vtex",
   "name": "styleguide",
   "title": "VTEX Styleguide",
-  "version": "9.146.1",
+  "version": "9.146.2",
   "description": "The VTEX Styleguide components for the Render framework",
   "builders": {
     "react": "3.x"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtex/styleguide",
-  "version": "9.146.1",
+  "version": "9.146.2",
   "scripts": {
     "lint": "eslint react --ext js,jsx,ts,tsx",
     "test": "node config/test.js",

react/components/NumericStepper/index.js

@@ -185,13 +185,13 @@ class NumericStepper extends Component {
   }
 
   handleIncreaseValue = event => {
+    event.stopPropagation()
     this.changeValue(this.state.value + 1, event, false)
-    event.preventDefault()
   }
 
   handleDecreaseValue = event => {
+    event.stopPropagation()
     this.changeValue(this.state.value - 1, event, false)
-    event.preventDefault()
   }
 
   handleFocusInput = e => {
@@ -283,11 +283,6 @@ class NumericStepper extends Component {
       lean ? 'outline-0' : ''
     } `
 
-    const touchDevice =
-      'ontouchstart' in window ||
-      (typeof navigator !== 'undefined' &&
-        (navigator?.maxTouchPoints || navigator?.msMaxTouchPoints))
-
     const content = (
       <React.Fragment>
         {label && (
@@ -328,8 +323,7 @@ class NumericStepper extends Component {
               disabled={readOnly || isMax}
               aria-label="+"
               tabIndex={0}
-              onClick={touchDevice ? undefined : this.handleIncreaseValue}
-              onTouchEnd={touchDevice ? this.handleIncreaseValue : undefined}>
+              onClick={this.handleIncreaseValue}>
               <div className="vtex-numeric-stepper__plus-button__text numeric-stepper__plus-button__text b">
                 {/* fullwidth plus sign (U+FF0B) http://graphemica.com/%EF%BC%8B */}
                 ＋
@@ -354,8 +348,7 @@ class NumericStepper extends Component {
               // which is the default keyboard character.
               // Used for screen readers.
               tabIndex={0}
-              onClick={touchDevice ? undefined : this.handleDecreaseValue}
-              onTouchEnd={touchDevice ? this.handleDecreaseValue : undefined}>
+              onClick={this.handleDecreaseValue}>
               <span className="vtex-numeric-stepper__minus-button__text numeric-stepper__minus-button__text b">
                 {/* fullwidth hyphen-minus (U+FF0D) http://graphemica.com/%EF%BC%8D */}
                 －