Calendar popup jumps around

[vnesek]

Describe the bug Calendar popup while opening jumps to top-left of browser windows and then back to field it triggered it. After expansion animation it settles mostly where it should be.

This is probably related to introduction of popper.js to semantic-ui-react 0.87

To Reproduce

1. Go to https://codesandbox.io/s/semacticuireactcalendarpopup-hys52
2. Click on form fields
3. See error

Expected behavior A popup opening right to the field without jumping.

Dependencies versions

• semantic-ui-react 0.87.1
• semantic-ui-css 2.4.1
• semantic-ui-calendar-react 0.15.0

[rosman21]

+1

[vsubbotskyy]

I can confirm that rollback to semantic-ui-react 0.86.0 fixed the issue

[rosman21]

Thank you, @vsubbotskyy Rolling back to 0.86 fixed for me

[zheyujie]

Has anyone found the root cause of this issue?

[vsubbotskyy]

It is likely caused by this PR

[Gomez23]

Setting animation='none' fixes this.

[loxs]

The workaround does not work in TypeScript as it does not allow for animation='none'

[sprilukin]

1+ need this fix for typescript

[yhnavein]

1+ need this fix for typescript

animation={'none' as any}

[zheyujie]

for typescript, try animation={null}

[Cicko]

They should add 'off' or 'none' to the SemanticTRANSITIONS type so Typescript compiler doesn't shout warning and you could just simply use:

animation='off'

[jtraub]

It seems that Popup component from semantic-ui-react doesn't work as expected.

See https://github.com/Semantic-Org/Semantic-UI-React/issues/3852