TextArea onChange not working

Forge
1

I tired to bind textarea to a usestate variable and it partially works but when the form(#jira-story) gets submitted I see the textarea(#res) value being submitted as **undefined**

After submitting the form(#jira-story) through create jira story button I am seeing the textarea(#res) value is undefined.

{userprompt: ‘hi’, res: undefined}

What i noticed is whenever I use onChange the value of textarea is undefined. Is this a bug with textarea component or am i doing something wrong?

Here is the code

import React, { useEffect, useState } from 'react';
import ForgeReconciler, {
  Form,
  Button,
  useForm,
  ButtonGroup,
  TextArea,
  FormHeader,
} from "@forge/react";
import { Heading, Box, Stack, Link, xcss, Inline } from '@forge/react';

const CreateJiraStory = () => {
  const [res, setRes] = useState('');
  const { handleSubmit, register } = useForm();

  const submitToExternalService = (submitData) => {
    // handle data inputs
    setRes(submitData.userprompt);
  };

  const addJiraStory = (addJiraStory) => {
    // handle data inputs
    console.log(addJiraStory);
  };

  const handleJiraStoryChange = (e) => {
    setRes(e.target.value);
  }

  return (
    <>
      <Form id="generate-jira-story" onSubmit={handleSubmit(submitToExternalService)}>
        <Stack space="space.200" alignBlock="start">
          <Box>
            <TextArea
              {...register("userprompt")}
              placeholder="Enter user prompt...."
            />
          </Box>
            <Stack space="space.100" alignInline="center">
              <ButtonGroup>
                <Button appearance="primary" type="submit">
                  Generate Jira Story
                </Button>
                <Button appearance="primary" type="submit">
                  Generate Jira Lord Story
                </Button>
              </ButtonGroup>
            </Stack>
        </Stack>
      </Form>
      {res && (
        <Form id="jira-story" onSubmit={handleSubmit(addJiraStory)}>
          <FormHeader title="External Generated Jira Story" />
          <Box>
            <Stack space="space.400" alignBlock="start">
              <TextArea 
                placeholder="Genrated Jira Story...."
                {...register("res")}
                isReadOnly={false}
                resize='smart'
                defaultValue={res}
                value={res}
                onChange={handleJiraStoryChange}
              />
              <Button appearance="primary" type="submit">
                Create Jira Story
              </Button>
            </Stack>
          </Box>
        </Form>
      )}
    </>
  );
};

ForgeReconciler.render(
  <React.StrictMode>
    <CreateJiraStory />
  </React.StrictMode>
);
2

This has come up before (so you’re not the only one with this issue). When you register a form element, you can’t use onChange. You can do it without registering.

3

@AaronCollier Is there any roadmap to fix this in future releases. Is this a bug or a feature?

4

I don’t have any special insights, but I don’t think there are plans to change this.