",
@@ -99,4 +99,4 @@
"prop-types": "^15.7.2",
"warning": "^4.0.3"
}
-}
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 82a774c..942efce 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,4 @@
import React, { useLayoutEffect, forwardRef } from "react";
-import { findDOMNode } from "react-dom";
import PropTypes from "prop-types";
import { useInputState, useInputElement, usePrevious } from "./hooks";
@@ -13,7 +12,6 @@ import { defer } from "./utils/defer";
import { isInputFocused } from "./utils/input";
import { isFunction, toString, getElementDocument } from "./utils/helpers";
import MaskUtils from "./utils/mask";
-import ChildrenWrapper from "./children-wrapper";
const InputMask = forwardRef(function InputMask(props, forwardedRef) {
const {
@@ -144,6 +142,9 @@ const InputMask = forwardRef(function InputMask(props, forwardedRef) {
// https://github.com/sanniassin/react-input-mask/issues/108
function onMouseDown(event) {
const input = getInputElement();
+ if (!input) {
+ return;
+ }
const { value } = getInputState();
const inputDocument = getElementDocument(input);
@@ -220,6 +221,9 @@ const InputMask = forwardRef(function InputMask(props, forwardedRef) {
}
const input = getInputElement();
+ if (!input) {
+ return;
+ }
const isFocused = isInputFocused(input);
const previousSelection = lastSelection;
const currentState = getInputState();
@@ -261,33 +265,35 @@ const InputMask = forwardRef(function InputMask(props, forwardedRef) {
setInputState(newInputState);
});
+ const refCallback = node => {
+ inputRef.current = node;
+
+ // if a ref callback is passed to InputMask
+ if (isFunction(forwardedRef)) {
+ forwardedRef(node);
+ } else if (forwardedRef !== null && typeof forwardedRef === "object") {
+ forwardedRef.current = node;
+ }
+ };
+
const inputProps = {
...restProps,
onFocus,
onBlur,
onChange: isMasked && isEditable ? onChange : props.onChange,
onMouseDown: isMasked && isEditable ? onMouseDown : props.onMouseDown,
- ref: ref => {
- inputRef.current = findDOMNode(ref);
-
- if (isFunction(forwardedRef)) {
- forwardedRef(ref);
- } else if (forwardedRef !== null && typeof forwardedRef === "object") {
- forwardedRef.current = ref;
- }
- },
value: isMasked && isControlled ? lastValue : props.value
};
if (children) {
validateChildren(props, children);
- // We wrap children into a class component to be able to find
- // their input element using findDOMNode
- return {children} ;
+ // {@link https://stackoverflow.com/q/63149840/327074}
+ const onlyChild = React.Children.only(children);
+ return React.cloneElement(onlyChild, { ...inputProps, ref: refCallback });
}
- return
';
const container = document.getElementById("container");
@@ -34,10 +33,6 @@ async function waitForPendingSelection() {
}
function getInputDOMNode(input) {
- if (!isDOMElement(input)) {
- input = ReactDOM.findDOMNode(input);
- }
-
if (input.nodeName !== "INPUT") {
input = input.querySelector("input");
}
@@ -53,16 +48,18 @@ function createInput(component) {
const originalRef = component.ref;
let { props } = component;
let input;
- component = React.cloneElement(component, {
- ref: ref => {
- input = ref;
+ const refCallback = node => {
+ input = node;
- if (typeof originalRef === "function") {
- originalRef(ref);
- } else if (originalRef !== null && typeof originalRef === "object") {
- originalRef.current = ref;
- }
+ if (typeof originalRef === "function") {
+ originalRef(node);
+ } else if (originalRef !== null && typeof originalRef === "object") {
+ originalRef.current = node;
}
+ };
+
+ component = React.cloneElement(component, {
+ ref: refCallback
});
function setProps(newProps) {
@@ -139,16 +136,24 @@ async function simulateDeletePress(input) {
}
// eslint-disable-next-line react/prefer-stateless-function
-class ClassInputComponent extends React.Component {
+class InnerClassInputComponent extends React.Component {
render() {
+ // eslint-disable-next-line react/prop-types
+ const { innerRef, ...restProps } = this.props;
return (
-
);
}
}
+const ClassInputComponent = React.forwardRef((props, ref) => {
+ // simulate if a ref is defined on an upper div
+ // instead of directly on the input
+ return
@@ -1088,7 +1093,7 @@ describe("react-input-mask", () => {
});
it("should allow to modify value with beforeMaskedStateChange", async () => {
- function beforeMaskedStateChange({ nextState }) {
+ const beforeMaskedStateChange = ({ nextState }) => {
const placeholder = "DD/MM/YYYY";
const maskPlaceholder = "_";
const value = nextState.value
@@ -1105,7 +1110,7 @@ describe("react-input-mask", () => {
...nextState,
value
};
- }
+ };
const { input, setProps } = createInput(