[Bug]: Using `desktopCapturer` to share the chrome window, it can not display drop-down list effect powered by html label <select> and <option>

[wangdiqi]

Preflight Checklist

• [X] I have read the Contributing Guidelines for this project.
• [X] I agree to follow the Code of Conduct that this project adheres to.
• [X] I have searched the issue tracker for a bug report that matches the one I want to file, without success.

Electron Version

29.4.3

What operating system are you using?

macOS

Operating System Version

macOS Ventura Version 13.1

What arch are you using?

x64

Last Known Working Electron version

No response

Expected Behavior

I follow the document here to share a window which is chrome application. The chrome application open a website contains a drop-down list(\<select> and \<option>). When i click the drop-down list in chrome application, the dropdown list effect should be displaying in my Electron application.

Actual Behavior

When i click the drop-down list in chrome application, the dropdown list effect is not displaying in my Electron application, however, when I select an option, the final selected value displays correctly.

Image1 is what showing in Chrome. Image2 is what showing in Electron for sharing screen.

Testcase Gist URL

https://gist.github.com/e3e6faf584a9ef47685d875d298dd517

Additional Information

I can not determine it

[shah-azman-sakin-alam]

You need to share more information, your code? We cannot reproduce the problem without that.

[wangdiqi]

You need to share more information, your code? We cannot reproduce the problem without that.

I shared the testcase gist : https://gist.github.com/e3e6faf584a9ef47685d875d298dd517. You can use 'electron fiddle' to reproduce the problem directly.

If it's inconvenient, the main code looks like this(it's almost copied from the documentation.):

# main.js

ipcMain.on("start-share-screen", (event) => {
    const webContents = event.sender;
    const win = BrowserWindow.fromWebContents(webContents);
    desktopCapturer
      .getSources({ types: ["window", "screen"] })
      .then(async (sources) => {
        console.log("sources: ", sources);
        win.webContents.send("SET_SOURCES", sources);
      });
  });

# preload.js

onSetSources: (callback) =>
    ipcRenderer.on("SET_SOURCES", (_event, sources) => {
      console.log("_event: ", _event, "; sources: ", sources);
      callback(sources);
    }),

# render.js

const stream = await navigator.mediaDevices.getUserMedia({
      audio: false,
      video: {
        mandatory: {
          chromeMediaSource: "desktop",
          chromeMediaSourceId: sourceId,
          minWidth: 1280,
          maxWidth: 1280,
          minHeight: 720,
          maxHeight: 720,
        },
      },
    });
    console.log("videoShareScreen: ", videoShareScreen);
    console.log("steam: ", stream);
    videoShareScreen.srcObject = stream;
    videoShareScreen.onloadedmetadata = (e) => videoShareScreen.play();

Thank you and look forward to your reply.

[codebytere]

I see the dropdown as expected:

[wangdiqi]

I see the dropdown as expected:

Thank you for your reply. The problem I'm referring to is not the dropdown menu here. Using your screenshot as an example, here are the steps to reproduce the issue:

step1: Let's select 'Google Chrome - window:111683:0'. Note: You need to select the window type of source, not the screen type. There are no issues with the screen type source. step2: Open the webpage 'https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select' in the selected Google Chrome window. step3: Click on the dropdown menu on the opened webpage, as shown in Image 3. step4: Observe the shared screen page in Electron.