palantir/blueprint

Input Group component input width doesn't get update when toggle with display:nonee

Open

#5,932 创建于 2023年2月9日

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

描述

Environment

  • Package version(s): 4.15.1
  • Operating System: mac os M1
  • Browser name and version: chrome 110.0.5481.77

Code Sandbox

https://codesandbox.io/s/loving-feistel-zs09t4?file=/src/index.tsx

Steps to reproduce

<input type="text" placeholder="Search" class="bp4-input" style="padding-left: 0px; padding-right: 0px;">

Actual behavior

When the expanded input bar is display, the padding-left and padding-right don't get update to the actual icon width. Instead, stay as 0. Search bar position looks broken.

Expected behavior

When the expanded input bar is display, padding-left and padding-right should get re-calculated and set to the actual icon width.

Possible solution

https://github.com/palantir/blueprint/blob/develop/packages/core/src/components/forms/inputGroup.tsx#L250 updateInputWidth should get triggered once visibility change.

贡献者指南

技术栈
typescriptreactcss
领域
frontend
议题类型
bug
难度面向新贡献者的预计实现难度，1 表示很小改动，5 表示专家级工作。
2
预计时间有经验贡献者完成调查、实现、测试并准备 pull request 的粗略时间范围。
1-3 hours
活动状态议题当前的可参与程度：新鲜、活跃、陈旧、阻塞或等待维护者输入。
stale
清晰度议题是否清楚说明期望改动、验收标准和下一步。
clear
前置要求
无
新手友好度1-100 的估计分数，表示该议题对首次贡献者的友好程度。
70
研究方向
The bug occurs in the InputGroup component in packages/core/src/components/forms/inputGroup.tsx. The updateInputWidth function is not called when the input's visibility changes. The fix should ensure that when display:none is toggled, the padding left and padding right are recalculated. Consider adding an event listener for visibility change or using a ResizeObserver.