Why does my Atlaskit inline dialog goes to top left corner of my screen?

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:

                  editView={({ errorMessage, ...fieldProps }, ref) => (
                          <div id="error-message-example">
                            <ErrorMessage>Only numbers allowed</ErrorMessage>
                        <Textfield testId="edit-view" {...fieldProps} ref={ref} />
                  readView={() => <ReadView>{deal.tcv?.toLocaleString(userLang) || 0}</ReadView>}
                  analyticsContext={{ field: 'example' }}

Here is my validate function:

const validateExample = (value) => {
    let exampleValue = parser(value, {
      parserLang: 1,

    if (isNaN(exampleValue) && value != '') {
      return 'error';
    } else if (exampleValue < 0) {
      return 'error';
    } else {
    return undefined;

The errorMessage comes from the AtlasKit Form component and the Wrapper is just styled components styling. Any suggestions would be great!

IIRC, atlaskit uses Popper JS to calculate the X/Y coordinates of the dialog. If it displays in the top left corner, it means popper was unable to determine the location.

You might want to read up on the popper documentation to see what is required in terms of parent component styling /etc to get the dialog to show with the correct coordinates.

1 Like