Dynamically hide/show Atlaskit Fields based on other fields

Jira Development Jira Cloud
1

Hello!

I am using Atlaskit, and its controls Form, Field, and TextField.

Is it possible to detect changes in one TextField, in order to hide/show other fields?
Submitting onChange to Field does not work, because Field passes down another onChange function to the TextField control.
Directly submitting an onChange function to the TextField control will override whatever onChange is being passed down by Field.

Thank you !!!

2

@a_webster’s solution in following post works for me, Handling Field interdependencies within AtlasKit Forms - #3 by GlennSouthern

1 Like
3

That makes a LOT of sense, thank you @denizoguz!

And I will piggyback another question. Do you know if AtlasKit allows you to disable the submit button if the form isn’t valid? I could have my fields set an errors state from the validation, but I was wondering if there is another built in way of doing this.

Thank you again!

4

I haven’t used that approach yet. But you can pass validate callback to every Field. Within that callback you can easily set a state variable and pass value of this to isDisabled property of Button. May be you can also use formProps.getState().hasValidationErrors property.

<form {...formProps} id="create-form" style={{width: "100%"}}>
                    <LoadingButton
                        type="submit"
                        isDisabled={formProps.getState(). hasValidationErrors}
                        appearance="primary"
                        isLoading={submitting}
                        testId="submit"
                    >
</form>

PS: I haven’t tried any of these. I’m just guessing.

5

I will try this :slight_smile:
Thank you so much @denizoguz, you rule!

6

I was finally able to do it like this:

    <Form onSubmit={handleSubmit}>
      {({ formProps, getState }) => {
        return(
        <form {...formProps} name="validation-example" onChange={(s)=>{
          setDisabled(getState().hasValidationErrors)
        }}>
         ...
        </form>
     <Form>

Where setDisabled sets the isDisabled value of the submit button.

Thank you again for your help!