CODEWITHSUNDEEP
javascriptreactjs
Steve Rogers
Steve Rogers

Reputation: 41

Input focus is not working with specific component react

I have component PhoneConformition which uses input :

 <Flexbox>
            {CODE_INPUTS.map((input, index) => (
              <Controller
                key={input.name}
                name={input.name}
                control={control}
                defaultValue=""
                // rules={{ required: true }}
                render={(props) => (
                  <InputCode
                    {...props}
                    ref={inputListRefs.current[index]}
                    className={styles.phoneConfirmation__formInput}
                    onValueSet={() => handleOnValueSet(index)}

                  />
                )} // props contains: onChange, onBlur and value
              />
            ))}
          </Flexbox>

Where InputCode is =



type Props = {
  className?: string;
  name: string;
  onChange: (...event: any[]) => void;
  onValueSet: (value: string) => void;
};

const InputCode = forwardRef<HTMLInputElement, Props>(
  ({ className, name, onChange, onValueSet }, ref) => {
    const classNames = [styles.inputCode, className].join(" ");

    const [valueState, setValueState] = useState<string>("");

    const handleChange = (event: React.SyntheticEvent<HTMLInputElement>) => {
      event.preventDefault();
    };

    const handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
      const value: number = parseInt(event.key, 10);

      if (!isNaN(value)) {
        const valueString: string = value.toString();

        setValueState(valueString);
        onChange(valueString);
        onValueSet(valueString);
      }
    };

    return (
      <div className={classNames}>
        <input
          ref={ref}
          name={name}
          className={styles.inputCode__input}
          type="text"
          onChange={handleChange}
          onKeyPress={handleKeyPress}
          value={valueState}
        />
      </div>
    );
  }
);

export default InputCode;

BUT if i want to use the function on value set function where it focus on another function according to index.Everything is wokring instead of .focus

  const handleOnValueSet = (index: number) => {
    const formvalues = getValues();

    onCodeChange(formvalues);

    if (index + 1 < CODE_INPUTS.length) {
      inputListRefs.current[index + 1].current?.focus();
    }
  }

.focus is not working with the onValueSet however with onChange or onKeyDown working correctly.

Upvotes: 0

Views: 128

Answers (1)

Steve Rogers
Steve Rogers

Reputation: 41

Found the solution. The issue was that the second onCodeChange call started before the first one finished.

I just added a setTimeOut of 10ms on the second call and it worked.

Thanks all

Upvotes: 1

Related Questions