Element focus function not focus correctly

[Bulldozer323]

Hello, on mobile device (ios 15.0.2) focus function on element not show keyboard.

Package version – react-imask 6.2.2

To Reproduce: Open from mobile device – https://codesandbox.io/s/little-thunder-rwkkt?file=/src/App.js and refresh sandbox window if needed, input has active but keyboard not showing.

Code:

import { IMaskInput } from "react-imask";
import { useEffect, useRef } from "react";

export default function App() {
  const inputRef = useRef(null);

  useEffect(() => {
    if (inputRef.current && inputRef.current.element) {
      inputRef.current.element.focus();
    }
  }, [inputRef]);

  return (
    <div className="App">
      <IMaskInput unmask value="123" mask={Number} ref={inputRef} />
    </div>
  );
}

[AdrianoSilvaACIN]

Hello, I'm having the same problem.

If you focus the input with element.focus() it wont behave as it should but if you click it its fine.

[cutterbl]

You'll have to try this to be sure, but looking at the latest documentation IMaskInput now can now take a ref and an inputRef. The inputRef is the ref to the inner input itself, whereas ref is a ref to the mask itself. Also, when that ref is applied the inputRef.current is the reference to the actual element, so your code would become:

import { IMaskInput } from "react-imask";
import { useEffect, useRef } from "react";

export default function App() {
  const inputRef = useRef(null);

  useEffect(() => {
      inputRef?.current?.focus();
  }, [inputRef]);

  return (
    <div className="App">
      <IMaskInput unmask value="123" mask={Number} inputRef={inputRef} />
    </div>
  );
}