LoginSignup
hamao
@hamao

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

Electronでdatalistを使うとドロップダウンがスクロールできない

Electronでdatalistを使うとドロップダウンがスクロールできない

普通のchromeブラウザでドロップダウンを使うとoptionの数が多い時はスクロールされるようになるのですが, Electronで実行するとスクロールされずに画面外に出てしまいます.
これはelectron(chromium)側のバグでしょうか?
おそらくjquery系のライブラリを使えば可能だと思うのですが, 極力使わずに開発をしたいので, できればそれらを使わない解決策を教えていただきたいです.

スクリーンショット 2022-08-08 9.31.38.png
スクリーンショット 2022-08-08 9.31.55.png
上がchromeブラウザで表示したもので, 下がelectronで実行したものです.electronでも上のように表示してほしいです.

macOS Monterey バージョン12.5
Chrome: バージョン: 104.0.5112.79(Official Build) (arm64)
electron: 20.0.1
node: v18.6.0

該当するソースコード

index.html

<body>
    <form action="#">
      <input type="text" list="sample" />
    </form>
    <datalist id="sample">
      <option value="hello world"></option>
      <option value="hello world"></option>
      <option value="hello world"></option>
      <option value="hello world"></option>
      <!-- たくさんある -->
      <option value="hello world"></option>
    </datalist>
  </body>

main.js

const { app, BrowserWindow } = require("electron");

app.dock.hide();
const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 900,
    height: 600,
    title: "dropdwon scroll",
  });
  mainWindow.loadFile("index.html");
};

app.once("ready", () => {
  createWindow();
});

app.once("window-all-closed", () => {
  app.quit();
});

package.json

  "devDependencies": {
    "electron": "^20.0.1"
  }

自分で試したこと

かなり昔の記事ですが同様のバグが起きているようです. ここに書いていることを試しましたが, ダメでした.

0

1Answer

表示されているリストにCSSを当てることは出来なさそうなので、
フレームワークで使われているのと同じような手法をとるくらいでしょうか。
(datalistを読み取って別の要素(ul>liとか)で表示させるような動作を作る)

DOM操作はvanilla JavaScriptでも可能なので、自力でできないことはないでしょう。
ただフレームワークがあると言うことは出来なくはないけど、面倒だよ、と言う証明でもあるので、
できる方法はあるが"他を頼る"という方が無難かと思います。

0

Your answer might help someone💌