Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

When removing form input help text, it's causing elements underneath to twitch/flicker #8831

Closed
jmca opened this issue Jan 5, 2018 · 10 comments
Closed

Comments

@jmca
Copy link

@jmca jmca commented Jan 5, 2018

Version

3.1.0

Environment

Chrome, Safari

Reproduction link

https://codesandbox.io/s/40k3zv92q7

Steps to reproduce

  • Create three vertical form items with the top element as an Input.
  • Add help text to that Input
  • Toggle that input's help text (using state in this case)

What is expected?

The form item should be the same height regardless of help text.

What is actually happening?

When the help text is removed, the form item's height is not held causing all elements below to shift up for a quick seconds cause a perceived twitch/flicker.

@dengfuping
Copy link
Contributor

@dengfuping dengfuping commented Jan 7, 2018

@jmca In fact, when the help text is just one line, the space between two form items is enough for the help text. For the help text with multiple lines, it's unavoidable. Further to the demo in the docs.

@jmca
Copy link
Author

@jmca jmca commented Jan 7, 2018

I'm not sure why it doesn't do it on the demo page. Maybe it's a different version or custom style is applied. Check out the sandbox link (https://codesandbox.io/s/40k3zv92q7), the twitching is apparent. I think it has something to do with how the animation transition is collapsing the text.

@benjycui
Copy link
Contributor

@benjycui benjycui commented Jan 13, 2018

The CSS animation is too complicated, could you help @afc163

@yesmeck
Copy link
Member

@yesmeck yesmeck commented Mar 14, 2018

@jljsj33 Take a look, introduced in 22ef7d1

@jljsj33
Copy link
Contributor

@jljsj33 jljsj33 commented Mar 14, 2018

中文描述下。。。。

@yesmeck
Copy link
Member

@yesmeck yesmeck commented Mar 14, 2018

你看上面的 codepen 链接,helper 消息消失的时候下面的输入框会抖一下。

@yesmeck
Copy link
Member

@yesmeck yesmeck commented Mar 14, 2018

我看了下是因为 22ef7d1 里引入的动画导致的。

@jljsj33
Copy link
Contributor

@jljsj33 jljsj33 commented Mar 14, 2018

感觉是时间没同步。。。

@jljsj33
Copy link
Contributor

@jljsj33 jljsj33 commented Mar 14, 2018

我看下。。。

@jljsj33
Copy link
Contributor

@jljsj33 jljsj33 commented Mar 14, 2018

22ef7d1#diff-51de536edf29809d26f0ccfab96f81fcR72

CSS 不是同一个时间轴的问题。。。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
6 participants