patternfly / patternfly/patternfly-react

Bug - Popover/Modal - Modals and popover do not render properly when Fullscreen API is used

Aperta
#11,919 4 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Stale
Lingua principale
TypeScript
Stelle
862
Fork
392
Merge medio
4g 8h
PR unite (30g)
9

Descrizione

Describe the problem
A clear and concise description of the problem. Which components are affected?

When the fullscreen API is used, the browser does not render the entire document tree. Popovers and modals, which append to document.body by default might not be included in the scope of the fullscreen element.

How do you reproduce the problem?
Provide steps to reproduce. A codesandbox demonstrating the problem is appreciated.

adapted from https://www.patternfly.org/components/modal#basic-modals:

import * as React from 'react';
import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core';

export const useFullscreen = () => {
  /_* The element that will be toggled to fullscreen _/
  const fullscreenRef = React.useRef(null);

  /_* Toggle currently displayed content to/from fullscreen _/
  const toggleFullscreen = React.useCallback(() => {
    if (fullscreenRef.current) {
      if (!document.fullscreenElement) {
        fullscreenRef.current.requestFullscreen();
      } else {
        document.exitFullscreen();
      }
    }
  }, []);

  return [fullscreenRef, toggleFullscreen];
};

export const ModalBasic: React.FunctionComponent = () => {
  const [isModalOpen, setIsModalOpen] = React.useState(false);
  const [fullscreenRef, toggleFullscreen] = useFullscreen();

  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
    setIsModalOpen(!isModalOpen);
  };

  return (
    [div ref={fullscreenRef}]
    [Button onClick={toggleFullscreen}]toggle fullscreen[/Button]
      [Button variant="primary" onClick={handleModalToggle} ouiaId="ShowBasicModal"]
        Show basic modal
      [/Button]
      [Modal
        isOpen={isModalOpen}
        onClose={handleModalToggle}
        ouiaId="BasicModal"
        aria-labelledby="basic-modal-title"
        aria-describedby="modal-box-body-basic"
      ]
        [ModalHeader title="Basic modal" labelId="basic-modal-title" /]
        [ModalBody id="modal-box-body-basic"]
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
          est laborum.
        [/ModalBody]
        [ModalFooter]
          [Button key="confirm" variant="primary" onClick={handleModalToggle}]
            Confirm
          [/Button]
          [Button key="cancel" variant="link" onClick={handleModalToggle}]
            Cancel
          [/Button]
        [/ModalFooter]
      [/Modal]
      [/div]
  );
};

Expected behavior
A clear and concise description of the expected behavior.

The modal appends to the fullscreenElement when the browser is fullscreen

Is this issue blocking you?
List the workaround if there is one.

Sort of..? This is causing issues in #15254 and my workaround is to simply disable any elements that generate popovers when the browser is fullscreened

Screenshots
If applicable, add screenshots to help explain the issue.

What is your environment?

Firefox 140.0-1.fc42

What is your product and what release date are you targeting?

OCP console 4.20

Any other information?

We can update the default value of appendTo to be () => document.fullscreenElement ?? document.body which will probably fix this. We will need to update the value of appendTo dynamically when the user exit and enters fullscreen however


Jira Issue: PF-2357

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Inizia con la gestione di appendTo di Modal e popover, quindi riproduci il CodeSandbox fornito entrando e uscendo dalla modalità a schermo intero. Verifica che il modal venga renderizzato all'interno di document.fullscreenElement durante la modalità a schermo intero e torni a document.body in seguito, incluse le transizioni in entrambe le direzioni.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
react, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Tranquilla
Chiarezza
Abbastanza chiara
Idoneità per principianti
54/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.