User picker and wiki editor in forms

I’m attempting to use atlaskit to create a form, in addition to simple text fields and selects, this form also needs to include a user picker and a wiki editor. When the onSubmit handle is called, the values from The text field/select field values are present, but anything from the user picker or wiki editor are missing.

Here are a few examples

		<Field name="description" label="Description">
			{() => {
				return (<Editor appearance="comment" />);
			}}
		</Field>

and

<Field name="user" label="User">
			{() => {
				return (
					<UserPicker fieldId="user" loadOptions={this.loadUsers}/>
				);
			}}
		</Field>

Functionally, the editor and the user picker are all working as intended, I’m just unable to extract their values when submitting the form.

Thanks in advance.

1 Like

@MartinCassidy, did you manage to solve this? How? I’m running into the same problem.

EDIT: Solved it eventually, in 2 parts:

  • Set initial value as <Field>'s defaultValue.
  • Propagate value change to <Field>'s onChange handler.

Like so:

<Field
    name="users" label=...
    defaultValue={currentUsers} // for inital value
>
    {({fieldProps, error, valid}) =>
        <UserPicker
            fieldId="users"
            defaultValue={currentUsers}
            loadOptions={loadUsers}
            onChange={fieldProps.onChange} // for changed value
        />
    }
</Field>
1 Like