#Dropdown Positioning Issue in Tauri + BlueprintJS

6 messages · Page 1 of 1 (latest)

stone comet
#

Hi everyone, I'm building a desktop app using Tauri + React + TypeScript + BlueprintJS, and I'm running into a frustrating issue with dropdown positioning.

🔗 Source code: github.com/stone89son/tauri_blueprint

🧩 Problem Description
Whenever I use <Select> or Popover2 from BlueprintJS, the dropdown menu appears at the top-left corner (0,0) of the application window instead of directly below the trigger button.

Here’s a simplified example:

<Select
items={TOP_100_FILMS}
itemRenderer={renderFilm}
onItemSelect={setSelectedFilm}
popoverProps={{ usePortal: false }}

<Button text="Select a film" />
</Select>

Even with usePortal: false, the dropdown still renders at (0,0). I’ve also tried using Popover2 directly with the same result.

🔍 What I’ve Tried
Using Select.ofType<T>() to ensure proper typing

Setting usePortal: false in both Select and Popover2

Wrapping the component in a div with position: relative

Ensuring #root, body, and html have position: relative and overflow: visible

Testing with and without frameless/transparent Tauri window configs

Still, the dropdown appears detached and misaligned.

⚠️ Suspected Cause
BlueprintJS renders dropdowns via ReactDOM.createPortal, which defaults to <body>. In Tauri, the React app is mounted inside a <div id="root">, and this mismatch might be causing the dropdown to lose its positioning context.

🙏 Request for Help
Has anyone successfully used BlueprintJS dropdowns or popovers inside a Tauri app? Is there a reliable way to force BlueprintJS to render dropdowns inside #root or fix the positioning logic?

Any workaround, patch, or insight would be greatly appreciated!

Thanks in advance for your help. Let me know if you need more context or want to test the repo directly.

image.png
#

Dropdown Positioning Issue in Tauri + BlueprintJS

fair timber
#

did you check the behavior in a chromium based browser (ideally Edge) - if that behaves the same it's not a tauri issue which may make it easier to find stuff on the internet

#

In Tauri, the React app is mounted inside a <div id="root">
You can modify the frontend code how you see fit, it doesn't have to be mounted like this. It's just the default 🤷

stone comet
#

Yes, I tested it in Chrome and you're right — the issue also appears there, so it's not caused by Tauri itself. However, I think the root of the problem is how Tauri apps render the React tree inside a <div id="root">, while BlueprintJS components like Select and Popover2 use ReactDOM.createPortal to render dropdowns directly into <body>.

Because of this mismatch, the dropdown loses its positioning context — especially when usePortal: false is set or when the layout relies on relative positioning inside #root. In Tauri, this becomes more noticeable since the app window is tightly scoped and doesn't behave like a full browser page.

fair timber