Skip to content

Cannot input spaces when used with other plugins #218

Open
@W1228

Description

@W1228

Describe the bug

When I was using it with other plugins, I found that I couldn't input spaces. After checking, I found that another plugin monitored the space button and blocked default events, but did not block Input and Textarea. I tried to set inputStyle to "textarea", but it was still blocked, so I still couldn't input spaces. Is there any solution? thanks

Reproduction

The spacebar listening code for this other plugin

onKeyDown(" ", (e) => {
    var element = e.target as HTMLElement;
    if (!["INPUT", "TEXTAREA"].includes(element.tagName)) {
      e.preventDefault();
    }
    pressSpace.value = true;
  });

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (6) x64 AMD Ryzen 5 4500U with Radeon Graphics
    Memory: 829.70 MB / 15.37 GB
  Binaries:
    Node: 18.17.1 - D:\software\node\node.EXE
    Yarn: 1.22.19 - D:\software\node\yarn.CMD
    npm: 9.6.7 - D:\software\node\npm.CMD
    pnpm: 8.6.12 - D:\software\node\pnpm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (120.0.2210.121)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @ant-design/icons-vue: ^7.0.1 => 7.0.1
    @codemirror/lang-javascript: ^6.2.1 => 6.2.1
    @originjs/vite-plugin-commonjs: ^1.0.3 => 1.0.3
    @types/file-saver: ^2.0.7 => 2.0.7
    @types/lodash: ^4.14.182 => 4.14.202
    @types/mockjs: ^1.0.6 => 1.0.10
    @types/node: ^18.0.0 => 18.19.4
    @vitejs/plugin-vue: ^4.6.2 => 4.6.2
    @vitejs/plugin-vue-jsx: ^1.3.10 => 1.3.10
    @vueuse/core: ^8.6.0 => 8.9.4
    @vueuse/integrations: ^9.0.0 => 9.13.0
    animate.css: ^4.1.1 => 4.1.1
    ant-design-vue: ^4.0.7 => 4.0.8
    autoprefixer: ^10.4.7 => 10.4.16
    axios: ^0.27.2 => 0.27.2
    codemirror: ^6.0.1 => 6.0.1
    consola: ^2.15.3 => 2.15.3
    dayjs: ^1.11.9 => 1.11.10
    element-china-area-data: ^5.0.2 => 5.0.2
    epic-designer: ^0.8.14 => 0.8.14
    exceljs: ^4.4.0 => 4.4.0
    file-saver: ^2.0.5 => 2.0.5
    info: ^0.0.6-beta.0 => 0.0.6-beta.0
    install: ^0.13.0 => 0.13.0
    jsbarcode: ^3.11.6 => 3.11.6
    json-editor-vue3: ^1.0.9 => 1.0.9
    jszip: ^3.10.1 => 3.10.1
    less: ^4.1.2 => 4.2.0
    less-loader: ^11.0.0 => 11.1.4
    lodash: ^4.17.21 => 4.17.21
    mockjs: ^1.1.0 => 1.1.0
    pinia: ^2.0.14 => 2.1.7
    pinia-plugin-persist: ^1.0.0 => 1.0.0
    postcss: ^8.4.14 => 8.4.32
    print-js: ^1.6.0 => 1.6.0
    qrcode: ^1.5.1 => 1.5.3
    tailwindcss: ^3.0.24 => 3.4.0
    typescript: ^4.5.4 => 4.9.5
    underscore: ^1.13.6 => 1.13.6
    unplugin-vue-components: ^0.26.0 => 0.26.0
    vite: ^5.0.2 => 5.0.10
    vite-plugin-style-import: ^2.0.0 => 2.0.0
    vite-plugin-vue-devtools: ^1.0.0-rc.5 => 1.0.0-rc.8
    vite-plugin-vue-setup-extend: ^0.4.0 => 0.4.0
    vue: ^3.2.25 => 3.4.3
    vue-codemirror: ^6.1.1 => 6.1.1
    vue-router: ^4.0.15 => 4.2.5
    vue-tsc: ^1.8.27 => 1.8.27
    vuedraggable: ^4.1.0 => 4.1.0
    vxe-table: ^4.2.8 => 4.5.17
    vxe-table-plugin-export-xlsx: next => 3.1.0
    xe-utils: ^3.5.4 => 3.5.14

Used Package Manager

npm

Validations

  • Read the the documentation in detail.
  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
  • The provided reproduction is a minimal reproducible example of the bug.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions