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.

Open
#664 1 comment 0 reactions 0 assignees View on GitHub

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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.