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

[input-number] theme 设置为 column 并启用 autoWidth 时,按钮位置错误 #1652

Closed
sagittarius-rev opened this issue Nov 1, 2022 · 4 comments
Labels
🐞 bug Something isn't working to be published fixed, not be published

Comments

@sagittarius-rev
Copy link

tdesign-react 版本

tdesign-react 0.42.4

重现链接

https://codesandbox.io/s/tdesign-react-demo-forked-7ufimt?file=/src/demo.jsx

重现步骤

使用 InputNumber 组件,将 theme 属性的值设为 "column" ,即增减按钮出现在输入框右侧。

同时设置 autoWidth 属性为 true ,即输入时自动调整组件宽度。

期望结果

进行输入时,组件自动调整宽度,组件右侧的增减按钮也应当自动调整位置,保证出现在输入框右侧。

实际结果

组件自动调整宽度时,增减按钮的位置不会自动调整,固定在起始位置上,即有时会出现在输入框中间。

框架版本

React(17.0.2)

浏览器版本

Chrome(104.0.5112.102)

系统版本

Windows 10

Node版本

14.15.1

补充说明

No response

@github-actions
Copy link
Contributor

github-actions bot commented Nov 1, 2022

👋 @sagittarius-rev,感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。

@chaishi
Copy link
Collaborator

chaishi commented Nov 6, 2022

效果确实丑,错误原因:

应当设置 t-input__inner 的 minWidth,而非 t-is-controls-right

image

@chaishi
Copy link
Collaborator

chaishi commented Nov 6, 2022

resolved in https://github.com/Tencent/tdesign-common/pull/969/files

2022-11-06.2.20.36.mov

@chaishi chaishi added 🐞 bug Something isn't working to be published fixed, not be published labels Nov 6, 2022
@uyarn
Copy link
Collaborator

uyarn commented Nov 8, 2022

fixed 0.42.6

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐞 bug Something isn't working to be published fixed, not be published
Projects
None yet
Development

No branches or pull requests

3 participants