react-component / react-component/input-number
proxyObject will cause "maximum depth exceeded error" when it's working with libs like @radix-ui/react-tooltip due to operations like forwardRef & composeRef.
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 323
- Forks
- 188
- Avg merge
- 20h 3m
- Merged PRs (30d)
- 1
Description
Hi! 👋
Firstly, thanks for your work on this project! 🙂
Today I used patch-package to patch rc-input-number@9.2.0 for the project I'm working on.
Here is the diff that solved my problem:
diff --git a/node_modules/rc-input-number/es/InputNumber.js b/node_modules/rc-input-number/es/InputNumber.js
index 5831c16..f2dc7f1 100644
--- a/node_modules/rc-input-number/es/InputNumber.js
+++ b/node_modules/rc-input-number/es/InputNumber.js
@@ -1,22 +1,21 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _typeof from "@babel/runtime/helpers/esm/typeof";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["prefixCls", "className", "style", "min", "max", "step", "defaultValue", "value", "disabled", "readOnly", "upHandler", "downHandler", "keyboard", "changeOnWheel", "controls", "classNames", "stringMode", "parser", "formatter", "precision", "decimalSeparator", "onChange", "onInput", "onPressEnter", "onStep", "changeOnBlur", "domRef"],
- _excluded2 = ["disabled", "style", "prefixCls", "value", "prefix", "suffix", "addonBefore", "addonAfter", "className", "classNames"];
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
import getMiniDecimal, { getNumberPrecision, num2str, toFixed, validateNumber } from '@rc-component/mini-decimal';
import clsx from 'classnames';
import { BaseInput } from 'rc-input';
+import { triggerFocus } from "rc-input/es/utils/commonUtils";
import { useLayoutUpdateEffect } from "rc-util/es/hooks/useLayoutEffect";
-import proxyObject from "rc-util/es/proxyObject";
import { composeRef } from "rc-util/es/ref";
import * as React from 'react';
import useCursor from "./hooks/useCursor";
+import useFrame from "./hooks/useFrame";
import StepHandler from "./StepHandler";
import { getDecupleSteps } from "./utils/numberUtil";
-import { triggerFocus } from "rc-input/es/utils/commonUtils";
-import useFrame from "./hooks/useFrame";
+var _excluded = ["prefixCls", "className", "style", "min", "max", "step", "defaultValue", "value", "disabled", "readOnly", "upHandler", "downHandler", "keyboard", "changeOnWheel", "controls", "classNames", "stringMode", "parser", "formatter", "precision", "decimalSeparator", "onChange", "onInput", "onPressEnter", "onStep", "changeOnBlur", "domRef"],
+ _excluded2 = ["disabled", "style", "prefixCls", "value", "prefix", "suffix", "addonBefore", "addonAfter", "className", "classNames"];
/**
* We support `stringMode` which need handle correct type when user call in onChange
* format max or min value
@@ -536,9 +535,10 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
}
};
React.useImperativeHandle(ref, function () {
- return proxyObject(inputFocusRef.current, {
- nativeElement: holderRef.current.nativeElement || inputNumberDomRef.current
- });
+ if(inputFocusRef.current) {
+ inputFocusRef.current.nativeElement = holderRef.current.nativeElement || inputNumberDomRef.current;
+ }
+ return inputFocusRef.current
});
return /*#__PURE__*/React.createElement(BaseInput, {
className: className,
diff --git a/node_modules/rc-input-number/lib/InputNumber.js b/node_modules/rc-input-number/lib/InputNumber.js
index 14b07f8..a0f0b65 100644
--- a/node_modules/rc-input-number/lib/InputNumber.js
+++ b/node_modules/rc-input-number/lib/InputNumber.js
@@ -546,9 +546,10 @@ var InputNumber = /*#__PURE__*/React.forwardRef(function (props, ref) {
}
};
React.useImperativeHandle(ref, function () {
- return (0, _proxyObject.default)(inputFocusRef.current, {
- nativeElement: holderRef.current.nativeElement || inputNumberDomRef.current
- });
+ if(inputFocusRef.current) {
+ inputFocusRef.current.nativeElement = holderRef.current.nativeElement || inputNumberDomRef.current;
+ }
+ return inputFocusRef.current
});
return /*#__PURE__*/React.createElement(_rcInput.BaseInput, {
className: className,
This issue body was partially generated by patch-package.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the maximum-depth error with rc-input-number and @radix-ui/react-tooltip, then inspect node_modules/rc-input-number/es/InputNumber.js and lib/InputNumber.js around React.useImperativeHandle and proxyObject. Compare the reported patch behavior and verify that forwardRef and composeRef no longer trigger the error without changing the input's exposed native element behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100