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

Capacitor - iOS: Autofocus Keyboard #17594

Open
Excel1 opened this issue Oct 22, 2024 · 0 comments
Open

Capacitor - iOS: Autofocus Keyboard #17594

Excel1 opened this issue Oct 22, 2024 · 0 comments
Labels
bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/quasar-cli-vite kind/bug 🐞 mode/capacitor Qv2 🔝 Quasar v2 issues

Comments

@Excel1
Copy link

Excel1 commented Oct 22, 2024

What happened?

Im using the dialog plugin to display dialog from bottom up. If the dialog less high than the softkeyboard and there is a input with autofocus true implemented, then on ios the softwarekeyboard will overlay the input field. Without autofocus the dialog opens and i click in the input and the keyboard slides below the input like expected.

How it is:
Simulator Screenshot - iPhone 16 Pro

Expected:
Simulator Screenshot - iPhone 16 Pro- works

What did you expect to happen?

I expected the same functionality on web or on android, where the keyboard dont overlay the input field/dialog when autofocus is true.

Reproduction URL

https://stackblitz.com/edit/quasarframework-stackblitz-templates-xcrtrq?file=src%2Fcomponents%2FJoinTeamDialog.vue,src%2Fcomponents%2FInvitationCode.vue,src%2Fpages%2FIndexPage.vue&title=Quasar%20Framework%20-%20app-vite%20v2

How to reproduce?

(iOS only)

  1. Code: Autofocus true, Dialog smaller than keyboard
  2. Open Dialog
  3. Keyboard overlay dialog

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Capacitor Mode

Platforms/Browsers

iOS

Quasar info output

Operating System - Linux(6.8.0-45-generic) - linux/x64
NodeJs - 18.18

Global packages
  NPM - 8.19.4
  yarn - Not installed
  @quasar/cli - 2.3.0
  @quasar/icongenie - 3.1.1
  cordova - Not installed

Important local packages
  quasar - 2.16.6 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
  @quasar/app-vite - 1.9.3 -- Quasar Framework App CLI with Vite
  @quasar/extras - 1.16.12 -- Quasar Framework fonts, icons and animations
  eslint-plugin-quasar - Not installed
  vue - 3.4.32 -- The progressive JavaScript framework for building modern web UI.
  vue-router - 4.2.5
  pinia - 2.1.7 -- Intuitive, type safe and flexible Store for Vue
  vuex - Not installed
  vite - 2.9.16 -- Native-ESM powered web dev build tool
  eslint - 8.52.0 -- An AST-based pattern checker for JavaScript.
  electron - Not installed
  electron-packager - Not installed
  @electron/packager - Not installed
  electron-builder - Not installed
  register-service-worker - 1.7.2 -- Script for registering service worker, with hooks
  @capacitor/core - 6.1.0 -- Capacitor: Cross-platform apps with JavaScript and the web
  @capacitor/cli - 6.1.0 -- Capacitor: Cross-platform apps with JavaScript and the web
  @capacitor/android - 6.1.0 -- Capacitor: Cross-platform apps with JavaScript and the web
  @capacitor/ios - Not installed

Quasar App Extensions
  *None installed*

Networking
  Host - XX
  enp42s0 - 192.168.188.XX

Relevant log output

No response

Additional context

No response

@Excel1 Excel1 added kind/bug 🐞 Qv2 🔝 Quasar v2 issues labels Oct 22, 2024
@github-actions github-actions bot added bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/quasar-cli-vite mode/capacitor labels Oct 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/quasar-cli-vite kind/bug 🐞 mode/capacitor Qv2 🔝 Quasar v2 issues
Projects
None yet
Development

No branches or pull requests

1 participant