Can't type in inputs on release build

[NinjaJake86]

Hi All,

Developing a Tauri App with Vue 3 and Element Plus, all works fine while debugging but once i install a release i can no longer type in text fields, has anyone else seen this before and know of a solution?

Thanks!

[FabianLars]

Can't remember anyone with that specific problem 🤔
Can you check the common pitfalls?

• Are all your dependencies up to date?
• Does the same happen with a debug build? tauri build --debug -> output in target/debug/
• output of tauri info?
• enable devtools in your release build and check the console for errors: add the "devtools" feature flag to the tauri dep in Cargo.toml
• check if it's not a frontend dev vs prod thingy is (depends on your frontend&bunndler)

[NinjaJake86]

Thanks for the help!

1. Updated, no change
2. Same happens with debug build
3. Tauri info output below

$ tauri info

Operating System - Windows, version 10.0.22000 X64
Webview2 - 98.0.1108.56
Visual Studio Build Tools:
   - Visual Studio Build Tools 2019
   - Visual Studio Professional 2017

Node.js environment
  Node.js - 16.13.0
  @tauri-apps/cli - 1.0.0-rc.5
  @tauri-apps/api - 1.0.0-rc.1

Global packages
  npm - 8.3.0
  pnpm - 6.11.0
  yarn - 1.22.15

Rust environment
  rustup - 1.24.3
  rustc - 1.58.1
  cargo - 1.58.0
  toolchain - stable-x86_64-pc-windows-msvc 

App directory structure
/.vscode
/dist
/node_modules
/public
/src
/src-tauri

App
  tauri - 1.0.0-rc.2
  tauri-build - 1.0.0-rc.2
  tao - 0.6.2
  wry - 0.13.1
  build-type - bundle
  CSP - default-src http://sphere.smpe.com/ blob: data: filesystem: ws: wss: http: https: tauri: 'unsafe-eval' 'unsafe-inline' 'self' img-src: 'self'
  distDir - ../dist
  devPath - http://localhost:3000/
  framework - Vue.js
Done in 21.44s.

4. Ran devtools and found errors indicating that the v-model values didn't exist or couldn't be found which is weird, i've included the code for this page below, any ideas?

<script setup>
  import { CircleCheck } from "@element-plus/icons-vue";
  import { getClient, Body } from "@tauri-apps/api/http";
  import { ElMessage } from "element-plus";
</script>

<template>
  <div style="width: 100vw; height: 100vh; margin: 0; padding: 0">
    <div
      style="
        width: 15rem;
        height: 20rem;
        padding: 0;
        margin: auto;
        margin-top: calc(50vh - 10rem);
        display: flex;
        flex-direction: column;
      "
    >
      <el-icon size="50" style="margin-left: auto; margin-right: auto"
        ><circle-check
      /></el-icon>
      <h1 style="text-align: center; font-size: x-large">Sphere</h1>
      <el-input v-model="email" placeholder="Email" style="margin-top: 0.5rem" />
      <el-input
        v-model="password"
        placeholder="Password"
        type="password"
        style="margin-top: 0.5rem"
      />
      <el-button type="primary" style="margin-top: 1rem; width: 100%" @click="login"
        >Login</el-button
      >
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return{
        email: "",
        password: ""
      }
    },
    methods: {
      login: async function() {
          const client = await getClient();

          client
            .request({
              url: "http://***/api/login",
              method: "POST",
              headers: {
                Accept: "application/json, text/plain, */*",
                "Content-Type": "application/json",
              },
              body: Body.json({ email: this.email, password: this.password}),
            })
            .then((response) => {
              if (response.ok) {
                let data = response.data;
                if(data.status == 'success') {
                  this.$store.commit('apikey', {key: data.key});
                  this.$store.commit("loginUser", { name: data.name, department: data.department, widgets: data.widgets, apps: data.apps, sideApps: data.sideApps});
                  this.$router.push({ name: 'Dashboard' });
                } else ElMessage.error('Login Failed');
              }
              else ElMessage.error('Login Failed');
            })
            .catch((error) => {
              ElMessage.error(error.toString());
            });
        },
    }
  };
</script>

[dchicchon]

@FabianLars when you specify the devtools feature flag, where did you find the documentation for this? Can't seem to find it anywhere

[dceddia]

I think I hit the same problem, or at least a similar one. I couldn't type into input fields in dev or release mode. So, while the app was running in dev mode, I tried opening it directly in Firefox, Chrome, and Safari (http://localhost:3000). With Firefox and Chrome I could type into the inputs just fine. With Safari, it was the same behavior as Tauri: couldn't type, and when I focused the input, it would take focus but wouldn't show the text cursor.

So I went googling and found this post about fixing a similar bug on iOS Safari by adding the CSS style -webkit-user-select: text to the input – and lo and behold, it worked!

I doubt this is a Tauri thing because I was hitting my Vite devserver directly, so maybe it's something else in my stack. I'm using Svelte, Tailwind, TypeScript, building with Vite. Dunno. -webkit-user-select: text for the win, though.

EDIT: Figured it out. I had this block of overzealous code in my index.css:

/* Make it more native-ish */
*,
*::after,
*::before {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-app-region: no-drag;
  cursor: default;
}

I added this below it to bring selection & cursor behavior back to normal for inputs:

input {
  user-select: initial;
  -webkit-user-select: initial;
  cursor: initial;
}

[alfreddagenais]

Thanks you @dceddia this work for me.

tailwindcss (3.1.8) + svelte (3.49.0) + @tauri-apps (1.0.5)

[dceddia]

Nice! Also a good idea to add textarea to that selector too… that one bit me a couple months after this 😂

[ahmadyusufcodes]

Thanks bruv! Added it to end of my global.css and 🚀