Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[bug] @tauri-apps/plugin-dialog will cause focus loss of <input /> in certain case #12023

Open
Jabberwocky238 opened this issue Dec 21, 2024 · 1 comment
Labels
status: needs triage This issue needs to triage, applied to new issues type: bug

Comments

@Jabberwocky238
Copy link

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

@Jabberwocky238 Jabberwocky238 added status: needs triage This issue needs to triage, applied to new issues type: bug labels Dec 21, 2024
@Jabberwocky238
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
status: needs triage This issue needs to triage, applied to new issues type: bug
Projects
None yet
Development

No branches or pull requests

1 participant