Electron 应用程序：如何制作 dialog.showOpenDialog 模态

Question

In my small Electron app I have a couple of buttons to allow the user to browse for folders to use for the processing the app does. The call to open the dialog to do this passes the ID of the main browser window so that the dialog will be modal and this initially appeared to work. The buttons in the app main screen appear to be disabled. However, if the disabled buttons are clicked, when the dialog is closed those clicks are executed. This true of all the buttons in the main screen. If I click on the disabled "Cancel" button while the dialog is showing the app closes when the dialog is closed.

Seems to me that one should not be able to switch back to the parent of a modal dialog and "store" clicks.

The dialog.showOpenDialog call is made in the renderer process, is this possibly the issue?

Sid

Answer 1

In the renderer process you need to use the browser window reference, not the ID. You can get the reference in the renderer process by using: remote.getCurrentWindow() . You can make the call as follows. The example is specifically for opening multiple files, should be configured as needed of course:

const { remote } = window.require('electron')
const dialog = remote.dialog

dialog.showOpenDialog(
  remote.getCurrentWindow(),
  { properties: ['openFile', 'multiSelections'] }, 
  (filePaths?) => {
      // do your thing
    }
  )

Answer 2

Not sure what was going on previously, I now cannot reproduce the problem, so I am going to mark this for closure.

Sorry for the noise, Sid

Answer 3

You don't need electron/remote to achieve this, in fact, electron/remote is deprecated. The key is to provide the browser window's reference to the showOpenDialog API (in the main process). This is a general API pattern in window managers: in order to have a modal window, you have to specify a parent window. Code sample:

const ipcApi = {
  'select-file': async () => {
    // It's important to pass the window handler in showOpenDialog
    // in order to make the dialog modal
    const browserWindow = BrowserWindow.getFocusedWindow()
    if (browserWindow) {
      return dialog.showOpenDialog(browserWindow, { properties: ['openFile'] })
    }
    return
  },