kirby
kirby copied to clipboard
getkirby
[v4] nodes in writer field not accessible in Safari
Description
The writer fields inline toolbar disappears when clicking on the node dropdown.
Expected behavior
The node dropdown options should open instead of closing the toolbar.
Screenshots
To reproduce
- Open Safari
- Open a page containing a writer field with inline toolbar in panel
- Select a text
- Try to change the node type
Setup
- Kirby: 4.0.0-alpha.5 and 4.0.0-alpha.6
- Device: MacBook Pro (13-inch, 2017)
- OS: macOS 13.5 (22G74)
- Browser: Safari
- Version: 16.6 (18615.3.12.11.2)
Hm, seems to be another exclusive Safari issue. I cannot reproduce it in Chrome or Firefox.
Thanks for looking into it. You are right, updated title and description.
@grommasdietz do you still have the issue with alpha.6? Seems to work for me in Safari now
Still having the issues with alpha.6. Investigated a little further: Works as expected on Safari Technology Preview Version 17.0 (18617.1.1.2), but no luck with Safari Version 16.6 (18615.3.12.11.2).
Ahh ok, I'm on Safari 17 already (Sonoma beta). Which will make it hard to debug from my side. I'm afraid others from the team need to tackle this (and figure out if it's something we can fix or really a browser bug).
Could inspect with temporarily disabled javascript and investigate further. The dropdown showed up after reenabling javascript, so it should not be css but (probably) vue related.
@grommasdietz dropdown and the whole Panel depend on javascript - so disabling javascript will not help but guaranteed make it stop working.
I just temporarily disabled it to inspect the toolbar, since the toolbar disappears in this specific bug after opening the dev tools.
Steps to reproduce:
- Select text in a writer field to get the toolbar rendered
- Disable Javascript
- Click on the k-writer-toolbar-nodes button
- Reanable Javascript
- Click on the k-writer-toolbar-nodes button again
- The dropdown shows up
In this case it’s mandatory to click the toggle in step 3, to get it work after reanabling JS. It was just a quick try while looking for possible bugs in the related CSS.
I can unfortunately reproduce this in Safari 16.5. It only happens in the inline toolbar though.
Tracking down at least the source of this problem:
https://github.com/getkirby/kirby/blob/v4/develop/panel/src/components/Forms/Writer/Toolbar.vue#L224
relatedTarget of the FocusEvent when clickingg on the nodes button is included in Chrome (as the nodes button), is null in Safari.
@bastianallgeier adding tabindex="0" to this button element https://github.com/getkirby/kirby/blob/v4/develop/panel/src/components/Forms/Toolbar/Toolbar.vue#L6 seems to fix it for me. Would that be a valid solution?
@nilsmielke just to be sure: have you cleared the media folder after installing beta.3?
So weird. I'm also on Safari 16.3 and it works for me. I will check again.
As requested by @distantnative on Discord. Tested this on macOS 14 with Safari 17.0. It is working as expected in Kirby v4.0.0-beta.3 No issue for me.
Kirbys panel cache in media/panel and Safaris own cache have been cleared before testing.
Also no problem using latest public OS and Safari using b3 (also cleared cache and panel cache).
@nilsmielke is it appearing for you in a fresh starterkit or could something else in your setup be the problem?
finally not updating yet pays of.
on Mac OS 13.5.1 with Safari 16.6 on Beta3
@nilsmielke Since it is working for many others, could it be a Safari extension or so that causes the problem for you?
@distantnative Found the tiny fact I overlooked: It was (and still is) happening in a writer block in a layout field (and in blocks, for that matter). A “regular”, stand-alone writer field works perfectly for me, too. (Tested in a blank Starter Kit with beta.3. in Safari 16.6.)
For me it’s also working inside a blocks field.
It’s also working for a writer field inside a layout field. Both Drawer and wysiwyg tested.
@frwssr could your create a repo with a minimal reproducible example? So we can all test against the same settings that cause the issue in Safari.
@ovenum Arg, didn’t mean to comment as @frwssr. Can do the repo, but first one question: Are you testing in Safari 16.6?
@nilsmielke that would be great. Happy to keep testing. Using Safari v17.0 on macOS 14.0.
@ovenum Here’s the repo: https://github.com/nilsmielke/kirby-4.0.0-beta.3-test-of-writer-nodes AFAIK the problem didn’t appear to affect Safari 17.0 before, though.
Safari seems to have a different way to handle click events in previous versions, which is totally driving us insane. I was so happy that there's finally a solution for the writer, but I need to retest it in the block context then
I feel this, @bastianallgeier. The issue is no biggie to me, though. I could live with using not-inline toolbars for projects with admins on 16.6 Safari or telling them to use another browser.
Was planning on updating to Sonoma soon, but will hold back until this issue is sorted.
I can confirm that the issue persists inside layout and block fields on Safari 16.6.1 (BigSur 11.7.10). Actually none of the inline buttons works. Not sure if this was the same case in my initial issue, since I primarily focussed on the dropdown and tested with a newer device.
I guess most non-tech Apple users are primarily using Safari as a default browser and especially with older devices not everybody is able to update to the latest versions. In this case I’m testing with a MBP Mid 2014 with no further updates possible. While this issue will only affect a few users, it’s still a accessibility downgrade in my opinion.
It's definitely a problem that we have to fix. There's no doubt about it.