palantir/blueprint

Tooltip with Popover with HOC issues : z-index and hide/unhide

Open

#3900 aperta il 19 dic 2019

Vedi su GitHub
 (2 commenti) (0 reazioni) (0 assegnatari)TypeScript (2167 fork)batch import
P3Package: coreType: bughelp wanted

Metriche repository

Star
 (20.263 star)
Metriche merge PR
 (Merge medio 43g 10h) (27 PR mergiate in 30 g)

Descrizione

Environment

  • Package version(s): 3.22
  • Browser and OS versions: Firefox/Chrome 78.0 and Windows 10

Steps to reproduce / Actual behavior

I created a sandbox to demonstrate the issue: https://codesandbox.io/s/blueprint-sandbox-l1ih1

When I create a HOC based on BlueprintJS tooltip component I get two weird behaviors when using popovers:

  1. Tooltips z-index is not consistent. Sometimes it appears behind popovers and sometimes it appears in front (on top of).

Video taken from the sandbox above: 2019-12-19_12-29-37

  1. The behaviour without HOC is that the the tooltip is hidden as soon as the popover is shown With HOC the tooltip appears always.

Expected behavior

  1. With HOC, the tooltip should not be shown if the popover is open
  2. Tooltips should be consistent. They should always be on top of everything.

Possible solution

Is this an issue with popperjs? I see the version in latest Blueprint is 1.15.0. Does latest version fix this?

Consider switching to other popup js lib. See this comment: https://github.com/popperjs/popper.js/issues/808#issuecomment-557480207

Guida contributor

Direzione di ricerca
Indaga sul wrapper HOC utilizzato nella sandbox ed esamina come i componenti Tooltip e Popover di Blueprint gestiscono z index e visibilità. Verifica se il problema è correlato alla versione 1.15.0 di popper.js e considera l'aggiornamento a una versione più recente. Analizza il contesto di sovrapposizione CSS causato dall'HOC e assicurati che i tooltip si nascondano quando i popover vengono mostrati monitorando lo stato di apertura del popover nell'HOC.
Tech stack
typescriptreact
Dominio
frontend
Tipo issue
Bug
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
2
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
Mezza giornata
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
Attiva
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
Chiara
Prerequisiti
GitReactTypeScript
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
55