[bug] allowedAutoPlacements throws error if -start modifier present on placement

[mattrothenberg]

CodeSandbox demo

https://codesandbox.io/s/priceless-zhukovsky-qcq2n?file=/src/App.js

Steps to reproduce the problem

1. Instantiate a popper with auto placement and bottom-start as one of the allowedAutoPlacements for the flip modifier.
2. Observe the following error.

What is the expected behavior?

The popper is instantiated with an automatic placement that flips between bottom-start and top-start accordingly, without errors.

What went wrong?

The constructor function throws an error message.

Any other comments?

I'm in a scenario where I'd like to use auto placement, but limit the available placement options to bottom-start and top-start. I'm building a picker, and want the options menu to always be anchored to the left-most edge of the disclosure. While I've tried using a placement of bottom-start, this introduces other issues with regards to overflow – issues that auto placement solves beautifully!

Am I misunderstanding what values can be passed to allowedAutoPlacements? The docs would have it seem that you can pass any eligible placement value to this array.

Thanks again for a great library!

[atomiks]

So it seems the issue the code assumes the allowedAutoPlacements are of the same variation (-start / -end) as the placement. In the CodeSandbox, it's different.

When you specify auto, it means you want to use either top, bottom, left, or right. So you need to ensure the placement matches with auto-start instead of auto if you want to allow bottom-start + top-start

https://github.com/popperjs/popper-core/blob/38914aae7a2e91715c6eb2b563517082a40cfa64/src/utils/computeAutoPlacement.js#L45-L52