[bug] @tauri-apps/plugin-dialog will cause focus loss of <input /> in certain case
Opened this issue · 1 comments
Describe the bug
the basic component of ehat i gonna say is like:
<input
onChange={(e) => setBuffer(e.currentTarget.value)}
placeholder="Enter value"
value={buffer}
/>
In react, after typing in something, value will change.
now see this:
<div className="list">
{valueList.map((v, i) => (
<>
<div className="value-item"
style={{ display: i === curEditValIndex ? "none" : "block" }}
onClick={() => {
setEditValIndex(i);
setBuffer(v);
}}>{v}</div>
<div className="value-item-editing"
style={{ display: i === curEditValIndex ? "flex" : "none" }}>
<button onClick={() => btnOrder('up')}>↑</button>
<button onClick={() => btnOrder('down')}>↓</button>
<input
onChange={(e) => setBuffer(e.currentTarget.value)}
placeholder="Enter value"
value={buffer}
/>
<button onClick={btnModifyConform}>Conform</button>
{/* <button onClick={btnFromFS}>FromFS</button> */}
<button onClick={btnDelete}>Delete</button>
</div>
</>
))}
<div className="value-item-editing"
style={{ display: isAddValueOpen ? "flex" : "none" }}>
<input
onChange={(e) => setBuffer(e.currentTarget.value)}
placeholder="Enter value"
value={buffer}
/>
<button onClick={btnAddConform}>+</button>
</div>
</div>
"@tauri-apps/api": "^2",
"@tauri-apps/plugin-dialog": "~2",
"react": "^18.2.0",
The function of this code
there is 2 parts of this code
1, render a list for modification of each item
2, render an additional input for adding items
in the second situation, there is no problem
but in the first one, I cannot type in any text
especially speaking
when i am using English input method, cursor will loss focus of the input element after one letter typed in.
when i am using 'Simplified Chinese' input method, I cannot type in any letter, even in English mode.
// import { open } from '@tauri-apps/plugin-dialog';
after i stop using this plugin, everything works fine
but if i uncomment this, even i dont use it, it will cause the bug.
Reproduction
Input Value Update Issue:
When typing content into the input fields, the input values do not update.
This issue only occurs after importing '@tauri-apps/plugin-dialog', where the input fields are rendered. The input field in the second part of the code does not have this problem.
Input Method Issue:
When using the English input method, the cursor loses focus after typing one letter.
When using the Simplified Chinese input method, no characters can be typed into the input field, even when switching to the English mode.
Tauri Plugin Issue:
When the @tauri-apps/plugin-dialog plugin is imported, the above two issues occur, even if the plugin is not used.
If the code importing the plugin is commented out, the problem is resolved.
Expected behavior
No response
Full tauri info
output
E:\1-code\__temp__\tauri-app>yarn run tauri info
yarn run v1.22.22
$ tauri info
[✔] Environment
- OS: Windows 10.0.19045 x86_64 (X64)
✔ WebView2: 131.0.2903.99
✔ MSVC: Visual Studio Community 2022
✔ rustc: 1.84.0-nightly (59cec72a5 2024-11-08)
✔ cargo: 1.84.0-nightly (031049782 2024-11-01)
✔ rustup: 1.27.0 (bbb9276d2 2024-03-08)
✔ Rust toolchain: nightly-x86_64-pc-windows-msvc (default)
- node: 20.9.0
- yarn: 1.22.22
- npm: 10.1.0
[-] Packages
- tauri 🦀: 2.1.1
- tauri-build 🦀: 2.0.3
- wry 🦀: 0.47.2
- tao 🦀: 0.30.8
- @tauri-apps/api : 2.1.1
- @tauri-apps/cli : 2.1.0
[-] Plugins
- tauri-plugin-dialog 🦀: 2.2.0
- @tauri-apps/plugin-dialog : 2.2.0
- tauri-plugin-shell 🦀: 2.2.0
- @tauri-apps/plugin-shell : 2.2.0
- tauri-plugin-fs 🦀: 2.2.0
- @tauri-apps/plugin-fs : not installed!
[-] App
- build-type: bundle
- CSP: unset
- frontendDist: ../dist
- devUrl: http://localhost:1420/
- framework: React
- bundler: Vite
Done in 77.26s.
Stack trace
No response
Additional context
No response
i test for many times after committing this issue. It is not happend everytime i start the tauri CLI. may be it is a problem with loading order.
In certain order, it will occur.
I wnat to record a video but it happened in 3 out of 10 times so i have not.