Submit on Enter

[cospin]

The normal behavior of Antd inputs within a Form is that pressing ENTER submits the form. If you press enter after entering the code, nothing happens.

[Ralfarios]

Hello, and thank you for using antd-input-otp.. I will work on this ASAP on the next update 1.1.1 with fix for #13 .. Please stay tune for the next update! 😁

Cheers, R.

[cospin]

Thank you!

Perhaps, while you're at it and if it's feasible, an optional function could be added to automatically trigger the submit when the last digit of the OTP is entered. Many websites also have this functionality.

[Ralfarios]

Hello @cospin ,

Thanks for waiting for the updates. The Enter key behaviour has been fixed now.

For the auto-submit feature still under experiment, you can use it for an uncontrolled field by adding __EXPERIMENTAL_autoSubmit prop with Form.useForm() as a value. Just don't use it if you are using useState.

Cheers, R.

[cospin]

I can confirm both things are working as expected. Thank you!

[anserwaseem]

Hello @cospin ,

Thanks for waiting for the updates. The Enter key behaviour has been fixed now.

For the auto-submit feature still under experiment, you can use it for an uncontrolled field by adding __EXPERIMENTAL_autoSubmit prop with Form.useForm() as a value. Just don't use it if you are using useState.

Cheers, R.

I'm using controlled component like this, but autoSubmit is not working for me, can you please point out the issue?

const { id, length, onChange, onComplete, styles, ...otherProps } = props;

  const [form] = Form.useForm();

  const [text, setText] = useState("");

  const onChangeAction = useAction(onChange);
  const onCompleteAction = useAction(onComplete);

  const handleChange = (value: string[]): void => {
    setText(value.join(""));

    onChangeAction?.callback({
      [id as string]: {
        text: value.join(""),
        setText,
      },
    });
  };

  // FIXME: not triggering, investigate
  const handleComplete = () => {
    console.log("handleComplete");
    // onCompleteAction?.callback();
  };

   const customStyles = `
      .confirmationInput:focus {
        border-color: ${
          styles?.activeFieldBorderColor || defaultStyles.activeFieldBorderColor
        } !important;
        background-color: ${
          styles?.activeFieldBackgroundColor ||
          defaultStyles.activeFieldBackgroundColor
        } !important;
      }

      .confirmationInput[value]:not([value=""]) {
        border-color: ${
          styles?.filledFieldBorderColor || defaultStyles.filledFieldBorderColor
        } !important;
        background-color: ${
          styles?.filledFieldBackgroundColor ||
          defaultStyles.filledFieldBackgroundColor
        } !important;
      }
    `;

return (
    <Form form={form} onFinish={(values) => console.log("valuesa: ", values)}>
      <Form.Item name="confirmationItem">
        <style>{customStyles}</style>
        <InputOTP
          length={length || 4}
          onChange={handleChange}
          autoSubmit={(values) => console.log("values: ", values)}
          inputType={styles?.inputType === "text" ? "all" : "numeric"}
          inputClassName="confirmationInput"
        />
      </Form.Item>
    </Form>
  );

@Ralfarios

[Ralfarios]

Hi, @anserwaseem

just do autoSubmit={handleComplete} and add the values params on handleComplete function.

[anserwaseem]

hey @Ralfarios, nope it doesnt work, tried passing handleComplete in onFinish of Form as well, it just does not trigger at all!

[Ralfarios]

@anserwaseem Wait, this is not controlled, your case is uncontrolled one.. So I suggest you do autoSubmit={form} and set the handleComplete to onFinish on Form component.

[anserwaseem]

@Ralfarios nope brother, that didnt work :(

[Ralfarios]

@anserwaseem Try this codesandbox.. https://codesandbox.io/s/antd-input-otp-auto-submit-uncontrolled-forked-v44wsg?file=/src/App.js

And make sure to upgrade the package to the latest version.

[anserwaseem]

@Ralfarios Thank you so much for your help, i'm applying styles within js (refer to code above) which was causing this issue, fixed, everything working ❤️