I implement a form and I use the atlaskit. The form is implement follow:
function App() {
const [selection, setSelection] = useState({
domain: undefined,
boundedContext: undefined,
aggregate: undefined,
event: undefined
})
const [extensionData, setExtensionData] = useState(null);
const [isFetched, setIsFetched] = useState(false);
const [error, setError] = useState(null);
const [boundedContexts, setBoundedContexts] = useState([]);
const [aggregates, setAggregates] = useState([]);
const [events, setEvents] = useState([]);
useEffect(() => {
view.getContext().then(({extension}) => {
setExtensionData(extension);
setSelection({
domain: extension.project.id,
boundedContext: undefined,
aggregate: undefined,
event: undefined,
});
loadBoundedContexts(extension.project.id);
});
}, []);
const loadBoundedContexts = (domain) => {
if (!isFetched) {
setIsFetched(true);
invoke('get-bounded-context', {
domain: domain
}).then((request) => {
setBoundedContexts(request);
});
}
}
const formValueSubmit = useCallback(async (value) => {
try {
return await view.submit(value);
} catch (e) {
setError("Couldn't save the custom field");
}
}, [view]);
const onSubmit = useCallback(async (formData) => {
// TODO: filedVlaue
const result = {
boundedContext: {
id: formData.boundedContext
}
}
await formValueSubmit(formData.fieldValue);
}, [formValueSubmit]);
const handleOnBlur = useCallback(async (e, dirty) => {
e.preventDefault();
if (dirty) {
await formValueSubmit(e.target.value);
}
}, [formValueSubmit]);
const isIssueView = extensionData?.renderContext && extensionData.renderContext === 'issue-view';
if (!extensionData) {
return <>{'Loading...'}</>;
}
const handleBoundedContextChanged = id => {
console.log(`BC: ${id}`);
setSelection({
domain: selection.domain,
boundedContext: id,
aggregate: undefined,
event: undefined,
});
setAggregates([]);
setEvents([]);
invoke('get-aggregates', {
domain: selection.domain,
boundedContext: selection.boundedContext,
}).then(setAggregates);
};
// Changed Events
const handleAggregateChanged = id => {
console.log(`A: ${id}`);
setSelection({
domain: selection.domain,
boundedContext: selection.boundedContext,
aggregate: id,
event: undefined,
});
setEvents([]);
invoke('get-events', {
domain: selection.domain,
boundedContext: selection.boundedContext,
aggregate: id
}).then(setEvents);
};
const handleEventChanged = id => {
setSelection({
domain: selection.domain,
boundedContext: selection.boundedContext,
aggregate: selection.aggregate,
event: id,
});
};
const handleCreateBoundedContextOption = name => {
const id = boundedContexts.length;
boundedContexts.push({label: name, value: "new-entry-" + id});
setBoundedContexts(boundedContexts);
setSelection({
domain: selection.domain,
boundedContext: "new-entry-" + id,
aggregate: undefined,
event: undefined,
});
};
const handleAggregateCreateOption = name => {
const id = aggregates.length;
setAggregates([...aggregates, {label: name, value: "new-entry-" + id}]);
setSelection({
domain: selection.domain,
boundedContext: selection.boundedContext,
aggregate: "new-entry-" + id,
event: undefined,
});
};
const handleEventCreateOption = name => {
const id = events.length;
events.push({label: name, value: "new-entry-" + id});
setEvents(events);
setSelection({
domain: selection.domain,
boundedContext: selection.boundedContext,
aggregate: selection.aggregate,
event: "new-entry-" + id,
});
};
return (
<Content isIssueView={isIssueView}>
<Form onSubmit={onSubmit}>
{({formProps, dirty, submitting}) => {
return (
<form {...formProps}>
<FormHeader title="Impact"/>
<FormSection>
{error && <SectionMessage appearance="error">{error}</SectionMessage>}
<Field name="boundedContext" label="Bounded Context">
{({fieldProps}) => {
console.log("link")
return <Fragment>
<CreatableSelect
inputId="bounded-context-select"
onChange={target => handleBoundedContextChanged(target.value)}
onCreateOption={handleCreateBoundedContextOption}
options={boundedContexts}
placeholder="Create Or Select ..."
value={fieldProps.value}
/>
<HelperMessage>
Please select or create a new bounded context.
</HelperMessage>
</Fragment>;
}
}
</Field>
<Field name="aggregate" label="Aggregate">
{({fieldProps, error}) => {
const value = selection.aggregate ? selection.aggregate : fieldProps.value;
console.log(JSON.stringify(fieldProps, null, 2));
return <Fragment>
<CreatableSelect
inputId="aggregate-select"
onChange={target => handleAggregateChanged(target.value)}
onCreateOption={handleAggregateCreateOption}
options={aggregates}
isDisabled={aggregates === undefined || aggregates.length <= 0}
required={false}
{...fieldProps}
value={fieldProps.value}
// value={selection.aggregate}
placeholder="Create Or Select ..."
/>
<HelperMessage>
Please select or create an aggregate in the pre selected bounded
context.
</HelperMessage>
{error && <ErrorMessage>{error}</ErrorMessage>}
</Fragment>;
}}
</Field>
<Field name="fieldValue" label="Event / Command" defaultValue={null}>
{({fieldProps, error}) =>
<Fragment>
<CreatableSelect
inputId="event-select"
onChange={target => handleEventChanged(target.value)}
onCreateOption={handleEventCreateOption}
options={events}
isDisabled={events === undefined || events.length <= 0}
required={false}
value={events === undefined || events.length <= 0 ? "" : fieldProps.value}
placeholder="Create Or Select ..."
/>
<HelperMessage>
Please select or create the event / command of the pre selected
aggregate.
</HelperMessage>
</Fragment>}
</Field>
</FormSection>
<FormFooter>
<ButtonGroup>
<Button appearance="subtle">Cancel</Button>
<LoadingButton
type="submit"
appearance="primary"
isLoading={submitting}
>
Add
</LoadingButton>
</ButtonGroup>
</FormFooter>
</form>
);
}}
</Form>
</Content>
);
}
export default App;
When I create a new Element in Field Aggregate, than the element will be add but the new element will not be selected. Only If I select the new element again, than the element will be shown.
At first I thought, I just have to add add the code:
<CreatableSelect
inputId="aggregate-select"
onChange={target => handleAggregateChanged(target.value)}
onCreateOption={handleAggregateCreateOption}
options={aggregates}
isDisabled={aggregates === undefined || aggregates.length <= 0}
required={false}
{...fieldProps}
value={selection.aggregate} // <-- Does not work!!
placeholder="Create Or Select ..."
/>
But than, nothing is selected, although the selection.aggregate is not null!
Do you know, why the new element will not be shown after creation?