palantir/blueprint

overflow text in NumericInput of non-active Tab inside Tabs

Open

#4,107 创建于 2020年5月2日

在 GitHub 查看
 (0 评论) (0 反应) (0 负责人)TypeScript (20,263 star) (2,167 fork)batch import
P3Package: coreType: bughelp wanted

描述

Environment

  • Package version(s): 3.25.0
  • Browser and OS versions: chrome 79.0.3945.79

If possible, link to a minimal repro: sandbox https://codesandbox.io/s/overflow-text-of-numeric-input-in-blueprint-js-5xv5g?file=/src/App.js

Steps to reproduce

  1. switch to none active tab
  2. type many 0s

Actual behavior

image

get overflow text that covers the button on the right side(in active tab, it renders fine, but in non-active tab, overflow text happens.)

Expected behavior

text should not be overflowed in both active/non-active tab

Possible solution

padding-right of input inside the NumericInput is always 0px in non-active tab, but 30px in active tab, dont know what is going on :(

贡献者指南

技术栈
typescriptreact
领域
frontend
议题类型
bug
难度面向新贡献者的预计实现难度，1 表示很小改动，5 表示专家级工作。
2
预计时间有经验贡献者完成调查、实现、测试并准备 pull request 的粗略时间范围。
1-3 hours
活动状态议题当前的可参与程度：新鲜、活跃、陈旧、阻塞或等待维护者输入。
stale
清晰度议题是否清楚说明期望改动、验收标准和下一步。
clear
前置要求
Basic ReactCSS
新手友好度1-100 的估计分数，表示该议题对首次贡献者的友好程度。
70
研究方向
Investigate the NumericInput component source to understand how padding right is applied. Focus on the difference between active and non active tab states. The issue likely stems from a CSS rule that only applies padding right when the tab is active. Check the Tabs component for any conditional styling that might affect child components. Look at the linked sandbox for a concrete reproduction.
overflow text in NumericInput of non-active Tab inside Tabs · palantir/blueprint#4107 | Good First Issue