rc-input-number - npm Package Compare versions

Comparing version 8.0.0 to 8.0.1

es/StepHandler.js

@@ -7,2 +7,3 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import useMobile from "rc-util/es/hooks/useMobile";
+import raf from "rc-util/es/raf";
 
@@ -27,4 +28,8 @@ /**
   var stepTimeoutRef = React.useRef();
+  var frameIds = React.useRef([]);
   var onStepRef = React.useRef();
   onStepRef.current = onStep;
+  var onStopStep = function onStopStep() {
+    clearTimeout(stepTimeoutRef.current);
+  };
 
@@ -34,2 +39,3 @@ // We will interval update step when hold mouse down
     e.preventDefault();
+    onStopStep();
     onStepRef.current(up);
@@ -46,7 +52,9 @@
   };
-  var onStopStep = function onStopStep() {
-    clearTimeout(stepTimeoutRef.current);
-  };
   React.useEffect(function () {
-    return onStopStep;
+    return function () {
+      onStopStep();
+      frameIds.current.forEach(function (id) {
+        return raf.cancel(id);
+      });
+    };
   }, []);
@@ -62,7 +70,16 @@
   var downClassName = classNames(handlerClassName, "".concat(handlerClassName, "-down"), _defineProperty({}, "".concat(handlerClassName, "-down-disabled"), downDisabled));
+
+  // fix: https://github.com/ant-design/ant-design/issues/43088
+  // In Safari, When we fire onmousedown and onmouseup events in quick succession, 
+  // there may be a problem that the onmouseup events are executed first, 
+  // resulting in a disordered program execution.
+  // So, we need to use requestAnimationFrame to ensure that the onmouseup event is executed after the onmousedown event.
+  var safeOnStopStep = function safeOnStopStep() {
+    return frameIds.current.push(raf(onStopStep));
+  };
   var sharedHandlerProps = {
     unselectable: 'on',
     role: 'button',
-    onMouseUp: onStopStep,
-    onMouseLeave: onStopStep
+    onMouseUp: safeOnStopStep,
+    onMouseLeave: safeOnStopStep
   };
@@ -69,0 +86,0 @@ return /*#__PURE__*/React.createElement("div", {

lib/StepHandler.js

@@ -14,2 +14,3 @@ "use strict";
 var _useMobile = _interopRequireDefault(require("rc-util/lib/hooks/useMobile"));
+var _raf = _interopRequireDefault(require("rc-util/lib/raf"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -37,4 +38,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
   var stepTimeoutRef = React.useRef();
+  var frameIds = React.useRef([]);
   var onStepRef = React.useRef();
   onStepRef.current = onStep;
+  var onStopStep = function onStopStep() {
+    clearTimeout(stepTimeoutRef.current);
+  };
 
@@ -44,2 +49,3 @@ // We will interval update step when hold mouse down
     e.preventDefault();
+    onStopStep();
     onStepRef.current(up);
@@ -56,7 +62,9 @@
   };
-  var onStopStep = function onStopStep() {
-    clearTimeout(stepTimeoutRef.current);
-  };
   React.useEffect(function () {
-    return onStopStep;
+    return function () {
+      onStopStep();
+      frameIds.current.forEach(function (id) {
+        return _raf.default.cancel(id);
+      });
+    };
   }, []);
@@ -72,7 +80,16 @@
   var downClassName = (0, _classnames.default)(handlerClassName, "".concat(handlerClassName, "-down"), (0, _defineProperty2.default)({}, "".concat(handlerClassName, "-down-disabled"), downDisabled));
+
+  // fix: https://github.com/ant-design/ant-design/issues/43088
+  // In Safari, When we fire onmousedown and onmouseup events in quick succession, 
+  // there may be a problem that the onmouseup events are executed first, 
+  // resulting in a disordered program execution.
+  // So, we need to use requestAnimationFrame to ensure that the onmouseup event is executed after the onmousedown event.
+  var safeOnStopStep = function safeOnStopStep() {
+    return frameIds.current.push((0, _raf.default)(onStopStep));
+  };
   var sharedHandlerProps = {
     unselectable: 'on',
     role: 'button',
-    onMouseUp: onStopStep,
-    onMouseLeave: onStopStep
+    onMouseUp: safeOnStopStep,
+    onMouseLeave: safeOnStopStep
   };
@@ -79,0 +96,0 @@ return /*#__PURE__*/React.createElement("div", {

package.json

 {
   "name": "rc-input-number",
-  "version": "8.0.0",
+  "version": "8.0.1",
   "description": "React input-number component",
@@ -5,0 +5,0 @@ "keywords": [

No alert changes

Improved metrics

Total package byte prevSize

77650

increased by1.95%

Lines of code

1689

increased by1.93%

No dependency changes