Jira Dashboard config validation issue

Forge Forge UI Kit and Custom UI
, ,
1

Hello,

I am trying to set text field default value instead of the form default value because I need to load value asynchronously. Once the value is retrieved the UI is loaded with default value. This is working as expected.

Issue: When user goes to config form the second time the UI load previously set value. Without making any changes in the form if the user clicks on the submit it throw validation error “This field is required”. However, if user makes any changes on the form it works as expected.

Setting default value on the fields is not recognized by the form.

Code sample:

const { handleSubmit, register, getFieldId, formState } = useForm(config); //form

const [customFilterValue, setCustomFilterValue] = useState(''); // default value
const [isFilterValueSet, setFilterValue] = useState(false); // bool to load UI after default value is set

useEffect(() => {
    invoke('getStorageValue', {storageKey: 'customFilterValue'}).then((result) => {
      setCustomFilterValue(result);
      setFilterValue(true);
    });
  }, [customFilterValue]);

const configureGadget = async (data) => {....};

return (
    <Form onSubmit={handleSubmit(configureGadget)}>
      <FormSection>
        <Stack>

        <Label labelFor={getFieldId("customFilterValue")}>
          Filter name <RequiredAsterisk />
        </Label>
        {isFilterValueSet &&
          <Textfield {...register("customFilterValue", { required: true })} defaultValue={customFilterValue} />
        }
        {formState.errors.customFilterValue && (
          <ErrorMessage>This field is required</ErrorMessage>
        )}

        </Stack>
      </FormSection>
      <FormFooter>
        <Button appearance="primary" type="submit">
          Submit
        </Button>
      </FormFooter>
    </Form>
  );

Thanks,
AP

2

For async initial value form, we ended up using the form default value by just passing the default value as props to our form component, I wonder will this solve the issue you mentioned?

const CustomForm = ({ defaultConfiguration }) => {
  const { handleSubmit, register, getFieldId, formState } = useForm({
    defaultValues: defaultConfiguration
  });

  const configureGadget = async (data) => {....};

  return (
    <Form onSubmit={handleSubmit(configureGadget)}>
      <FormSection>
        <Stack>
          <Label labelFor={getFieldId("customFilterValue")}>
            Filter name <RequiredAsterisk />
          </Label>
          <Textfield {...register("customFilterValue", { required: true })} />
          {formState.errors.customFilterValue && (
            <ErrorMessage>This field is required</ErrorMessage>
          )}
        </Stack>
      </FormSection>
      <FormFooter>
        <Button appearance="primary" type="submit">
          Submit
        </Button>
      </FormFooter>
    </Form>
  );
}

const Parent = () => {
  const [customFilterValue, setCustomFilterValue] = useState(''); // default value

  useEffect(() => {
    invoke('getStorageValue', { storageKey: 'customFilterValue' }).then((result) => {
      setCustomFilterValue(result);
    });
  }, []);

  return <CustomForm defaultConfiguration={{customFilterValue: customFilterValue}}/>
}
3

I think the issue with solution @karming.wan provided will be when the CustomForm load the value of customFilterValue will be undefined. We have to wait until customFilterValue is set then load the CustomForm.