palantir/blueprint

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

Open

#5.932 geöffnet am 9. Feb. 2023

Auf GitHub ansehen
 (3 Kommentare) (0 Reaktionen) (0 zugewiesene Personen)TypeScript (2.167 Forks)batch import
P3Package: coreType: bughelp wanted

Repository-Metriken

Stars
 (20.263 Stars)
PR-Merge-Metriken
 (Durchschn. Merge 43T 10h) (27 gemergte PRs in 30 T)

Beschreibung

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.

Contributor Guide

Research-Richtung
Untersuche die updateInputWidth Funktion in der InputGroup Komponente und stelle sicher, dass sie ausgelöst wird, wenn sich die Sichtbarkeit des Elements ändert (z. B. mit einem ResizeObserver oder durch Lauschen auf Übergangsereignisse).
Tech Stack
reacttypescript
Domain
frontend
Issue Type
Fehler
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
2
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
Halber Tag
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
Aktiv
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
Klar
Voraussetzungen
ReactCSS
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
70