Viewer loading wrong pdf and setting wrong initial page

[rmnrdi]

I'm not 100% sure this is an issue with the viewer.

I have a modal at index.html root level <div id="root"></div> <div id="modal"></div> //not used in this example <div id="PDFModal"></div> //This is the modal used

The modal houses the worker and viewer `import React from "react"; import ReactDom from "react-dom"; import { Worker } from "@react-pdf-viewer/core";

import { Viewer } from "@react-pdf-viewer/core";

import { defaultLayoutPlugin } from "@react-pdf-viewer/default-layout"; import "@react-pdf-viewer/default-layout/lib/styles/index.css"; import { faBuromobelexperte } from "@fortawesome/free-brands-svg-icons";

export default function PDFModal({ open, initialPage, onClose, fileUrl }) { if (!open) return null;

const defaultLayoutPluginInstance = defaultLayoutPlugin(); return ReactDom.createPortal( <>

<button style={BUTTON_STYLES} onClick={onClose}> Close <Worker workerUrl="https://unpkg.com/[email protected]/build/pdf.worker.min.js"> <Viewer initialPage={initialPage} fileUrl={fileUrl} plugins={[defaultLayoutPluginInstance]} /> </Worker>

</>, document.getElementById("PDFModal") ); } `

Which gets called on this page. Note that I have multiple buttons to launch different pages.

`import React, { useState } from "react"; import "@react-pdf-viewer/core/lib/styles/index.css"; import "./Articles.css"; import PDFModal from "../modals/PDFModal";

import ThreeWeirdWays from "../../assets/Articles/3_Weird_Ways/LabTalk_NovDec.pdf"; import HappilyEverAfter from "../../assets/Articles/Happily Ever After/OPT-Spring-2017-WEB.pdf"; import TooSoonToSigma from "../../assets/Articles/Too soon to Sigma/LabTalk_February.pdf"; import TipsForNewTech from "../../assets/Articles/Tips for new tech/LabTalk_MayJune2017.pdf"; import Muda7DeadlyWastes from "../../assets/Articles/Muda 7 deadly wastes/LabTalk_SeptOctober2017.pdf"; import DownWithOEE from "../../assets/Articles/Who's down with OEE/LabTalk_NovDec2017.pdf"; import ZeroToHero from "../../assets/Articles/Zero to Hero/LabTalk_FebMar2018.pdf"; import AttributeAgreementAnalysis from "../../assets/Articles/Attribute Agreement Analysis/LabTalk_MayJune2018.pdf"; import TakeThe2PercentChallenge from "../../assets/Articles/Take the 2 percent challenge/LabTalk_SeptOct2018.pdf";

export default function Articles({ props }) { const [isOpen, setIsOpen] = useState(false); // const [is2Open, setIs2Open] = useState(false); //comment below explains these, not currently used. // const [is3Open, setIs3Open] = useState(false);

const handleClick = (e) => { setIsOpen(true); e.stopPropagation(); console.log(e.target.nodeName); };

// const handleClick2 = (e) => { // setIs2Open(true); // props.onClick(); // e.stopImmediatePropagation(); // console.log(e.target.value); // };

// const handleClick3 = (e) => { // setIs3Open(true); // props.onClick(); // e.stopImmediatePropagation(); // console.log(e.target.value); // };

return ( <div className="articles">

Articles

<div className="articles-card-container"> <div className="card"> <div className="button-wrapper" style={BUTTON_WRAPPER_STYLES}> <button id="btn-1" type="button" onClick={handleClick}> 3 Weird Ways to Increase Production and Reduce Breakage <PDFModal initialPage={27} fileUrl={ThreeWeirdWays} open={isOpen} onClose={() => setIsOpen(false)} ></PDFModal>

    <div className="card">
      <div style={BUTTON_WRAPPER_STYLES}>
        <button id="btn-2" type="button" onClick={handleClick}>
          Happily Ever After
        </button>
      </div>

      <PDFModal
        initialPage={10}
        fileUrl={HappilyEverAfter}
        open={isOpen}
        onClose={() => setIsOpen(false)}
      ></PDFModal>
    </div>
    <div className="card">
      <div className="button-wrapper" style={BUTTON_WRAPPER_STYLES}>
        <button id="btn-1" type="button" onClick={handleClick}>
          Test
        </button>
        <PDFModal
          initialPage={5}
          fileUrl={TooSoonToSigma}
          open={isOpen}
          onClose={() => setIsOpen(false)}
        ></PDFModal>
      </div>
    </div>
  </div>
</div>

); } ` In the above example, when I click the top button, the pdf modal launches, BUT the viewer loads the pdf and sets the page number of the bottom most button.

Essentially this pdf shoul launch <PDFModal initialPage={27} fileUrl={ThreeWeirdWays} open={isOpen} onClose={() => setIsOpen(false)} ></PDFModal>

But this is the one that actually launches: <PDFModal initialPage={5} fileUrl={TooSoonToSigma} open={isOpen} onClose={() => setIsOpen(false)} ></PDFModal>

If use separate state for each with their own handleclick it works as expected const [isOpen, setIsOpen] = useState(false); const [is2Open, setIs2Open] = useState(false); const [is3Open, setIs3Open] = useState(false);

What I don't understand is why the pdf viewer (I think) loops through all the pdf modals on the parent page if the correct setting were already sent to the pdf in the first place? Is this a bug, is there a setting I'm missing, or am I just doing it wrong?

Sorry about the code formatting, there's something fonging it up

[phuocng]

Please fork this sample project and let me know the steps to reproduce the issue.