Dynamic value update on select dropdown in custom side bar

Technical Support
, ,
1

Product:@pdftron/webviewer

Product Version:@pdftron/webviewer": “^10.4.0”(react js)

Please give a brief summary of your issue:
i am facing an issue in update dynamic values in custom dropdown state is updated but its not shown in dropdown how to handle it

Please describe your issue and provide steps to reproduce it:

  // Create a render function for the custom panel
        const renderCustomPanel = () => {
          return (
            <div>
              <div>
                <label htmlFor="participantDropdown">{t("Participant")}</label>
              </div>
              <div className="w-100 d-flex justify-content-center">
                <select
                  style={{
                    width: "100%",
                    padding: "12px 5px",
                    margin: "8px 0",
                  }}
                  id="select-country"
                  data-live-search="true"
                  onChange={handleChangeUser}
                >
                  {participants.map((userData, index) => {
                    return (
                      <option value={userData.pk_UID}>{userData.name}</option>
                    );
                  })}
                </select>

                {/* <Select /> */}
              </div>
              <div className="w-100">
                <button
                  style={{
                    width: "100%",
                    padding: "12px 30px",
                    margin: "8px 0",
                    background: "#6172d6",
                    border: "none",
                    color: "#fff",
                    cursor: "pointer",
                  }}
                  onClick={openCustomModal}
                  // className="w-100 d-flex justify-content-center align-items-center"
                >
                  Open Modal
                </button>
                {/* <Button text={"Open Custom Modal"} /> */}
              </div>
              <div
                style={{
                  display: "flex",
                  justifyContent: "center",
                  gap: "10px",
                  alignItems: "center",
                }}
              >
                <button
                  style={{
                    width: "100%",
                    padding: "5px 12px",

                    background: "#ffffff",
                    border: "1px solid #e1e1e1",
                  }}
                  onClick={handleClickTItle}
                >
                  Title
                </button>
                <button
                  style={{
                    width: "100%",
                    padding: "5px 12px",
                    background: "#ffffff",
                    border: "1px solid #e1e1e1",
                  }}
                  onClick={handleClickName}
                >
                  Name
                </button>
                <button
                  style={{
                    width: "100%",
                    padding: "5px 12px",

                    background: "#ffffff",
                    border: "1px solid #e1e1e1",
                  }}
                  onClick={handleClickEmail}
                >
                  Email
                </button>
              </div>
            </div>
          );
        };

        let myCustomPanel = {
          tab: {
            dataElement: "customPanelTab",
            title: "customPanelTab",
            img: "/favicon-32x32.png",
          },
          panel: {
            dataElement: "customPanel",
            render: renderCustomPanel,
          },
        };

        instance.UI.setCustomPanel(myCustomPanel);

Please provide a link to a minimal sample where the issue is reproducible:

2

Hello huzeifajahangir,

Can you please confirm if you mean that the Participant dropdown is blank? The code snippet you provided is very incomplete, but we tried working around it and creating some dummy data for participants, and we saw that the dropdown is populated, but text is blank. Can you confirm that this is the issue (please check the screenshot)? Can you please provide a minimal reproducible sample?
image

3

It seems like the challenge is related to the initial rendering of the custom panel with an empty participant list and then not updating when new participants are added dynamically.

Here’s a revised approach:

  useEffect(() => {
    if (Instance) {
      // Rerender the custom panel to reflect the updated participants
      Instance.UI.disableElement("customPanel");
      Instance.UI.enableElement("customPanel");
      Instance.UI.setActiveLeftPanel("customPanel");
    }
  }, [participants]);

Now its working what i do is when ever my participant add or delete i just re render my customPanel

4

Hi huzeifajahangir,
Happy to see you have found a solution and thank you for providing the clarification and the code snippet.

1 Like