FormCondition component not working

Forge Forge Custom UI and UI kit (beta)
,
1

I’m trying to show a TextField Form field using the FormCondition component, but it seems this isn’t functioning (as I would expect). I created the most default app based on the confluence UI Kit contextmenu app template and the sample code from the FormCondition KB article.

conf_contextmenu_formcondition

Expectation

  • when clicking the checkbox, the input field becomes visible

Reality

  • nothing happens

Steps to reproduce

  1. Forge create a confluence contextmenu app
  2. Update the default template app with the sample code from the FormCondition documentation inside tags.

Am I missing something? Or is this a bug?

For reference, the app code:

import ForgeUI, { render, Form, TextField, CheckboxGroup, Checkbox, FormCondition, ContextMenu, InlineDialog } from '@forge/ui';

const App = () => {
  return (
    <InlineDialog>
      <Form>
        <CheckboxGroup label="More options" name="JQLOption">
          <Checkbox label="Run a JQL Query" value="true" />
        </CheckboxGroup>
        <FormCondition when="JQLOption" is={['true']}>
          <TextField label="JQL Query" name="query" />
        </FormCondition>
      </Form>
    </InlineDialog>
  );
};

export const run = render(
  <ContextMenu>
    <App/>
  </ContextMenu>
);
2

HI @rick.van.twillert ,

Thank you for the thorough explanation of what you are observing and what you expect. UI Kit rendering is done in the backend (Forge’s functions as a service (FaaS)) so I think you need to submit the form before the UI is re-rendered and the JQL field appears.

Regards,
Dugald

3

Thanks @dmorrow, in my opinion that would make the FormCondition component pretty useless tbh as it not a condition anymore… are you sure the way you describe it is the intended functionality? Is there maybe an example use case, so I (we) can understand it better?

Thanks in advance!

Rick

2 Likes
4

Hi @rick.van.twillert ,

You are right. The condition executes on the client side. I have code similar to yours running inside a macro and it works:

forge-condition-demo

Here is the code:

import ForgeUI, {
  Checkbox,
  CheckboxGroup,
  Form,
  FormCondition,
  Fragment,
  Macro,
  TextField,
  render,
  useState,
} from "@forge/ui";

const App = () => {

  const [error, setError] = useState(null);

  async function createIssue({ summary, description }) {

  };

  return (
    <Fragment>
      <Form onSubmit={createIssue}>
        <CheckboxGroup label="More options" name="JQLOption">
          <Checkbox label="Run a JQL Query" value="true" />
        </CheckboxGroup>
        <FormCondition when="JQLOption" is={['true']}>
          <TextField label="JQL Query" name="query" />
        </FormCondition>
      </Form>
    </Fragment>
  );
};

export const run = render(
  <Macro
    app={<App />}
  />
);

I’m using version 4.5.1 of the Forge CLI, although I don’t know if that is significant.

Regards,
Dugald

1 Like
5

Hi @rick.van.twillert ,

I’ve extended my example app to include a context menu and also see that the FormCondition does not work.

I’ve created FRGE-1163: FormCondition does not work inside an InlineDialog.

Regards,
Dugald

1 Like
6

Thanks @dmorrow! I’ll keep a close eye on the bug report :slight_smile: