search

getkirby / kirby

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

Panel: Pages Search Field Loses Focus #3985

Closed azharc closed 2 years ago

azharc commented 2 years ago

Kirby Team summary

Status Quo

During some input events on the search input of a pages picker dialog, the autofocus property of (newly appearing?) options' toggle button removes the focus from the search input.

Focus should stay in search input.

Solution

Remove https://github.com/getkirby/kirby/blob/main/panel/src/mixins/picker/dialog.js#L140

Side-effects

Unclear yet to @distantnative what purpose the autofocus initially had (which would get lost).

Original post from @azharc

Describe the bug
When searching for pages using the pages field, upon typing text, after the search query is complete the search field loses focus. That is, in order to continue typing, one has to click back in to the search field.

To Reproduce
Steps to reproduce the behavior:

  1. Click 'add' on a pages field
  2. Type something into the search bar
  3. The search input will lose focus and you will have to click into it again to keep typing

Expected behavior
The focus remains on the search field (i.e. the text cursor remains inside it) until one clicks something else, rather than it automatically losing focus.

Screenshots
https://capture.dropbox.com/zoqyZQPzUWHWZoWS

Kirby Version
3.6.0

Console output
No console output

Desktop (please complete the following information):

Additional context
If no pages match the search criteria, the search box does not lose focus. The loss of focus seems to occur the moment after the search query is completed.

afbora commented 2 years ago

I can't test on Safari but I couldn't reproduce the issue on Chrome. Do you have the issue @getkirby/kirby-staff ?

lukasbestle commented 2 years ago

I can reproduce it in Safari 15.1, but only sometimes, not as consistently as in the screen capture video. Sometimes it happens when there is only one search result (in which case that single search result is focussed) and sometimes it happens when there are multiple results (in which case always the last result is focussed on my machine).

I'm using Safari 15.1 on macOS 10.15.7. Which macOS are you on @azharc?

azharc commented 2 years ago

@lukasbestle Sorry for the late reply, was traveling – macOS 12.0.1 (21A559) on my end with Safari Version 15.1 (17612.2.9.1.20).

lukasbestle commented 2 years ago

Thanks! My Safari 15.1 on macOS 10.15.7 is build 15612.2.9.1.30, so I guess we can't fully compare it.

To be honest I'm completely lost on why this might happen, but I'm also not a frontend expert. @distantnative?

distantnative commented 2 years ago

For me it only happens when hitting the backspace and removing characters from the search field or clearing it. Indeed the focus is set then to the last element always (visible by the black focus border). On Safari 15.3 myself.

Potential solution

I think I already narrowed down the cause. It seems to be this line: https://github.com/getkirby/kirby/blob/main/panel/src/mixins/picker/dialog.js#L139 Removing it made the issue disappear for me.

Side effects

That's my current issue still - I don't quite understand what the original purpose of setting the toggle button to autofocus was. Why did we initially add this?

lukasbestle commented 2 years ago

@distantnative The toggleBtn method was added in this PR, maybe this helps tracking it down: https://github.com/getkirby/kirby/pull/3397

distantnative commented 2 years ago

@lukasbestle it's much older - you can see it was here before https://github.com/getkirby/kirby/pull/3397/files#diff-ead0c3e131891c87182757d7d8f62615a0cbd8169351683f04fdec07b7ddb5e6L38 - I tracked it down a couple of refactoring steps, but didn't find a good answer yet.

bastianallgeier commented 2 years ago

✅ will be fixed in 3.6.4