Bug - Popover/Modal - Modals and popover do not render properly when Fullscreen API is used
Dieses Issue hat noch niemand übernommen.
Bewertung
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Anfängerfreundlichkeit
- 54/100
- Issue-Typ
- Bug
- Klarheit
- Größtenteils klar
- Aktivitätsstatus
- Ruhig
- Tech-Stack
- react, typescript
- Bereich
- frontend
Rechercherichtung
Beginnen Sie mit der appendTo-Behandlung von Modal und popover und reproduzieren Sie anschließend die bereitgestellte CodeSandbox, während Sie den Vollbildmodus betreten und verlassen. Überprüfen Sie, dass das Modal während des Vollbildmodus innerhalb von document.fullscreenElement gerendert wird und danach zu document.body zurückkehrt, einschließlich Übergängen in beide Richtungen.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Beschreibung
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
- Vorherrschende Sprache
- TypeScript
- Sterne
- 862
- Forks
- 392
- Ø Merge
- 4 T. 8 Std.
- Gemergte PRs (30 T.)
- 9
Beitragsleitfaden
Erste Schritte
- Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
- Forken Sie das Repository und arbeiten Sie in einem Branch.
- Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.
Mehr aus patternfly/patternfly-react
-
PF Team
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 68/100
patternfly/patternfly-react#12651 ·
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 78/100
patternfly/patternfly-react#12637 ·
-
PF Team
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 72/100
patternfly/patternfly-react#12617 · 1 Kommentar ·
-
PF Team
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 68/100
patternfly/patternfly-react#12610 · 1 Kommentar · 1 Reaktion ·
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 68/100
patternfly/patternfly-react#12600 ·
Alle Issues in patternfly/patternfly-react
Ähnliche Issues
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 84/100
bcgov/bc-wallet-mobile#4761 · 1 Kommentar ·
-
external-issue to-triage
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 88/100
-
area-deployment area-integrations triage:bot-seen
Schwierigkeit 2/5 Ein halber Tag Anfängerfreundlichkeit 86/100
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 82/100
-
refactor
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 84/100