Hi everyone, I am having a bit of a problem with the Atlaskit component Inline dialog. I am using it for the error handling of my Inline Edit and this works perfectly well in my Issue Glance app but not in my main app. This is a picture of what I want it to do and what it is doing well in my Issue Glance app:
And this is what is happening in my main App. As you can see, the error message is jumping to the upper left corner, even though I have set ‘placement’ to ‘right’.
Both pieces of code are the same so that is why I find this very strange. It seems to be just acting differently due to the different environments. Here is the code:
<InlineEdit
defaultValue={example}
editView={({ errorMessage, ...fieldProps }, ref) => (
<ErrorWrapper>
<InlineDialog
isOpen={isExampleInvalid}
content={
<div id="error-message-example">
<ErrorMessage>Only numbers allowed</ErrorMessage>
</div>
}
onClose={false}
placement="right"
>
<Textfield testId="edit-view" {...fieldProps} ref={ref} />
</InlineDialog>
</ErrorWrapper>
)}
readView={() => <ReadView>{deal.tcv?.toLocaleString(userLang) || 0}</ReadView>}
onConfirm={update}
isCompact
keepEditViewOpenOnBlur
analyticsContext={{ field: 'example' }}
validate={validateExample}
/>
Here is my validate function:
const validateExample = (value) => {
let exampleValue = parser(value, {
parserLang: 1,
});
console.log(exampleValue);
if (isNaN(exampleValue) && value != '') {
setisExampleInvalid(true);
return 'error';
} else if (exampleValue < 0) {
setisExampleInvalid(true);
return 'error';
} else {
setisExampleInvalid(false);
}
return undefined;
};
The errorMessage comes from the AtlasKit Form component and the Wrapper is just styled components styling. Any suggestions would be great!