Incorrect placement with button target

[jamiewinder]

I've made a very simple demo:
https://codesandbox.io/s/rR8XggWW2

I intended for the popper to show to the right of the button, but instead it shows over it (it actually seems to be trying to display to the left of it, but is being pushed over).

Am I doing something wrong?

[FezVrasta]

The code does look right, maybe there's something weird in the way CodeSandbox manages the iframe? Considering they use Popper in CodeSandbox itself I find it weird it doesn't work there 😅

[jamiewinder]

Thanks. I'm poking around in the dark as I've just starting porting some code from Tether to Popper (thanks for the library btw!).

I could be way off here, but it looks like the button is being wrapped in a div (by react-tether presumably), and it's trying to place the popper in relation to this div rather than the button? Since a div is block level and fills the width, it won't be able to place it to the right (or left).

Here's another demo which seems to be suggesting something like this is happening...
https://codesandbox.io/s/1wRA8Grjj

[FezVrasta]

Yeah something like what you say, but I think the problem is that the default tag of "target" is "div" so you get this result.

This fixes it:

https://codesandbox.io/s/JqAWr5jWK

[jamiewinder]

Unfortunately I can't make any assumptions about the target - I'm writing a component which uses the child element (i.e. the result of React.Children.only(children)) as the Target.

Is the wrapping necessary at all? If I'm understanding correctly from the docs I'm supposed to be able to disable wrapping, but that seems to cause its own problems!...

https://codesandbox.io/s/rVE1Jggp

[FezVrasta]

tag=false on Manager is supposed to be used only in this case:

<Manager tag={false}>
  <div>
    <Popper />
    <Target />
  </div>
</Manager>

The problem you are having is on the wrapper generated by Target.

You should provide a custom component tag, which can be a string, or a React component. This should cover your case.