Blueprint: DateRangeInput popoverProps errors when passing position props

[evantarrh]

Bug report

• __Package version(s)__: [email protected]
• __Browser and OS versions__: Chrome 63, OSX Sierra

Steps to reproduce

Passing position props to DateRangeInput fails with an uncaught TypeError.

Here is a failing example:

<DateRangeInput 
  ...
  popoverProps={{ position: 'auto' }}
/>

I am able to set other popoverProps. e.g. isOpen: true without problems.

Actual behavior

tetherUtils.js?c9ab:69 Uncaught TypeError: Cannot read property 'split' of undefined
    at expandAttachmentClasses (tetherUtils.js?c9ab:69)
    at Object.getAttachmentClasses [as b] (tetherUtils.js?c9ab:66)
    at ProxyComponent.Popover.renderPopover (popover.js?3385:260)
    at ProxyComponent.Popover.render (popover.js?3385:166)
    at ProxyComponent.proxiedRender (createClassProxy.js?1dd3:93)
    at react-dom.js:5257
    at measureLifeCyclePerf (react-dom.js:4537)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (react-dom.js:5256)
    at ReactCompositeComponentWrapper._renderValidatedComponent (react-dom.js:5283)
    at ReactCompositeComponentWrapper.performInitialMount (react-dom.js:4823)

Expected behavior

Position props get passed correctly through DateRangeInput

[giladgray]

@evantarrh try upgrading your version of core. Seems like we missed a min version bump in datetime.

[evantarrh]

@giladgray I'm using the latest version of core too (1.35.2), but only as a dependency for datetime

[giladgray]

@evantarrh ahhh you're referring to the wrong docs. position: "auto" is only supported in core/datetime 2.0! (or in Popover2 on 1.x, but not possible with datetime until 2.0.)

if you're up for it, try upgrading all blueprint packages to the latest 2.0.0-beta release.

[giladgray]

@evantarrh I'm assuming you're not using typescript, or this would have been flagged as an error 😄

[giladgray]

@evantarrh can you confirm that you were able to resolve this issue on your end by juggling package dependencies?

(anything tether-related is Blueprint 1.0; the new hotness is Popper.js in 2.0)

[evantarrh]

@giladgray Ah that makes sense! Unfortunately, while upgrading to the latest beta allowed the component to render with the popoverProps, there are several JS errors that occur when I try to interact with it—two warnings:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of Blueprint.Overlay.

and

Warning: Unknown prop `appear` on <span> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop

...and an error:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `TransitionGroup`.

For now, it does not seem worth it to use the beta, although I'm happy to try to figure out these issues with y'all if it would be useful to you :smile: thanks for your help!

[giladgray]

@evantarrh are you sure you upgraded _everything_ including react and other peer dependencies?

[evantarrh]

@giladgray you're right—didn't realize react 16 was a dependency for the beta. thanks again!

[floric]

Unfortunately, I have the same error with the reference to "Blueprint.Overlay" and "TransitionGroup". I already made sure that I use all the latest versions and all beta-Versions from Blueprint packages as well as React 16 (types and package).
This seems to be the only problem in Beta blueprint for me though and happens for every Popover usage.

EDIT: Just in case, somebody else will have the same later during a migration:
It was because of react-transition-group and related to #2040 . :smile: