search

getkirby / kirby

Kirby's core application folder
https://getkirby.com
Other
1.32k stars 168 forks source link

Panel: Trying to edit page title on mobile doesn't bring up keyboard #4992

Open neildaniels opened 1 year ago

neildaniels commented 1 year ago

Description

On an iPhone, it's incredibly difficult to actually enter text entry mode when trying to edit the page title. Tapping on the "Title" text field doesn't actually bring up the keyboard. You either have to finagle with that field, or tap on the slug field first.

This is reproducible on the Kirby demo site.

Expected behavior
Tapping on "Title" text field should immediately bring up the keyboard.

Screenshots

IMG_5397

To reproduce

  1. Go to page in Panel on mobile
  2. Tap on the page title to bring up the dialog
  3. Tap on the "Title" field

Your setup

Kirby Version
3.8.3

Your system (please complete the following information)

afbora commented 1 year ago

I can reproduce the issue as well. After clicking on different points of the input few times, the keyboard comes up.

afbora commented 1 year ago

I found the source of issue. This is about preselected text: https://github.com/getkirby/kirby/blob/3.9.0-rc.2/config/areas/site/dialogs.php#L196

  1. Pre-selected text does not appear "selected" on mobile. But the desktop is fine.
  2. I think it might be preselected causing confusion with input focus and selected text actions.
  3. It's not a complete solution, but the following is applicable: preselect: false and autofocus: true for title prop.
afbora commented 1 year ago

I'm not quite sure if this is a browser issue (for mobile) or a Kirby related issue.

distantnative commented 3 months ago

I am afraid it's somewhat a Kirby issue.

I first thought whether the InputElement.select() method isn't properly working on browsers, but the demo on https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select worked on my mobile Safari.

What makes this really hard is that I haven't figured out a way how to get our dev setup accessible on my phone on my local network. So I have no way to test changes.