Skip to main content
Participant
March 18, 2024
Question

Facing Error Blocked form submission to '' because the form's frame is sandboxed and the 'allow-form

  • March 18, 2024
  • 1 reply
  • 301 views

Hello,  I am a beginner and I am facing one issue when I used 

@adobe/react-spectrum form or formik.

Does anyone have any idea regarding this?

Thanks in advance.

Here is my code.


 

Formik form example
<form
        onSubmit={(e) => {
          e.preventDefault();
          handleSubmit();
        }}
        noValidate
      >
        <Grid
          areas={["content content", "footer footer"]}
          
          gap="size-100"
        >
          <View gridArea="content">
            <TextField
              label="Title"
              data-testid="title"
              name="title"
              value={values.title}
              onChange={handleChange}
              onBlur={handleBlur}
              isRequired
              // isInvalid={isValid}
              errorMessage={errors.title}
              UNSAFE_className="fullWidth"
            />
            <TextArea
              label="Description"
              name="text"
              value={values.text}
              onChange={handleChange}
              onBlur={handleBlur}
              isRequired
              minLength={10}
              errorMessage={errors.text}
              UNSAFE_className="fullWidth"
            />
          </View>
          <View gridArea="footer">
            <Button
              variant="accent"
              UNSAFE_className="fullWidth"
              style="fill"
              marginBottom={2}
              type="submit"
              onPress={(e: any) => {
                console.log("🚀 ~ ManageVideo ~ e:", e);

                // e.preventDefault();
              }}
            >
              Generate AI Video
            </Button>
            <Text marginY={25}>
              {`You have ${0} video credits left in Oxolo`}
            </Text>
            <Button
              UNSAFE_className="fullWidth"
              variant="secondary"
              style="fill"
              onPress={() => {
                handleLogout();
              }}
            >
              Sign out
            </Button>
          </View>

          {/* <Flex direction="row" height="size-800" gap="size-100">
          <View backgroundColor="celery-600" width="size-800" />
          <View backgroundColor="blue-600" width="size-800" />
        </Flex> */}
        </Grid>
      </form>

Normal form

<Form validationBehavior="native" maxWidth="size-3000">
        <TextField label="Email" name="email" type="email" isRequired />
        <ButtonGroup>
          <Button type="submit" variant="primary">
            Submit
          </Button>
          <Button type="reset" variant="secondary">
            Reset
          </Button>
        </ButtonGroup>
      </Form>

 

This topic has been closed for replies.

1 reply

Participant
April 2, 2024

Hey @Mitul3614972899t8! Could you please share more info around which APIs your add-on is using? E.g. Document API, Communication API, etc. 

 

Also apologies for the slow response. Here are some additional places where you can receive support from the Adobe Express add-ons team: