CODEWITHSUNDEEP
javascriptreactjsecmascript-6antdreact-simple-keyboard
Mrr Eluu
Mrr Eluu

Reputation: 81

Value not updating for Input inside ANTD Form.Item

sorry to ask this simple question but I'm new to React and I am trying to use the keyboard library from hodgef/react-simple-keyboard, along with Ant Design to try creating a login page. I pretty much followed the code sample from this Codesandbox Example and things works fine, until I replaced the default input tag into Ant-Design's Input component.

From this:

 <input
        id="firstName"
        value={getInputValue("firstName")}
        onFocus={() => setInputName("firstName")}
        placeholder={"First Name"}
        onChange={onChangeInput}
      />

Into this

<Form.Item
          label={<text style={{ color: 'white' }}>Username</text>}
          name="username"
          rules={[{ required: true, message: 'Please input your username!' }]}
          style={{ color: 'white' }}
        >
          <Input
            id="inputUserName"
            value={getInputValue('inputUserName')}
            onFocus={() => setInputName('inputUserName')}
            placeholder="User Name"
            onChange={onChangeInput}
          />
        </Form.Item>

After using Ant Design's Components, the input will not update anymore when I press the keyboard buttons.

Anyone in this community know what is the problem causing this? Is it because the <Input> is nested inside <Form.Item> , which made the ref not working anymore?

So if I were to use only input, without nested inside Form.Item it will still works:

    <Input
      id="inputUserName"
      value={getInputValue('inputUserName')}
      onFocus={() => setInputName('inputUserName')}
      placeholder="User Name"
      onChange={onChangeInput}
    />

Much appreciated if anyone could answer this stupid question, I'm really new and I don't even know what to search for to begin with, and really sorry for my poor English, I don't know how to explain or elaborate further.

Upvotes: 3

Views: 13131

Answers (3)

Bradleo
Bradleo

Reputation: 190

Try removing the onChange() on the inner <Input>. Ant Design's Form.Item passes a custom onChange to the Input through props.

If you really need a custom onChange, turn your inner Input into a component with the props id, value, and onChange that come from Form.Item. You should be able to then make your own custom change handler then call props.onChange or similar.

Upvotes: 0

cshdev
cshdev

Reputation: 39

For anyone who comes to this question using React 18 and antd version 4+, leaving how I fixed my issue. My file used antD form and I had a Form.Item with a custom Input inside. Like this:

 <Col span={24}>
          <Form.Item
            name='street'
            rules={[
              {
                required: true,
                message: f(messages.departmentAddressRequired),
              },
              {
                min: 10,
                message: f(messages.departmentAddressMin),
              },
              {
                max: 256,
                message: f(messages.departmentAddressMax),
              },
            ]}
          >
            <TextInput
              label={f(messages.departmentAddressLabel)}
              fullWidth
              placeholder={f(messages.departmentAddressPlaceholder)}
              required
            />
          </Form.Item>
        </Col>

I could not type inside any fields with a CustomTextInput within a Form Item. I tried everything for a day. What ended up fixing the issue was deleting node_modules and yarn.lock, re-running yarn (or npm if you have that). I had been updating to different versions of antd (v4.8.2 -> v4.25.15 -> v5+), which jumbled up some library bits, evidently. Try deleting those and re run the project to see if that fixes it.

Upvotes: 1

Mrr Eluu
Mrr Eluu

Reputation: 81

Fixed by following this code sample from ANTD.

Basically I added following lines to call the form method.

const [form] = Form.useForm();

Then assigning the input values in the onChangeAll listener in the keyboard component as follows:

      const onChangeAll = (inputs) => {
        setInputs({ ...inputs });
        form.setFieldsValue({
          username: `${inputs.inputUserName}`,
          password: `${inputs.inputPassword}`,
    });
   };

Also don't forgot to add this line in the Form component

  <Form
    form={form}
    ...
  >

Upvotes: 4

Related Questions