Wrong cursor for disabled files field

[manuelmoreale]

Description

When hovering on a disabled files fields the cursor is still showing up as pointer rather than as not-allowed This is happening when a field has the translate set to false

Expected behavior
The cursor should be the not-allowed like it's already happening for other fields.

To reproduce

1. Create a files field on a multi language installation
2. Set the translate attribute to false
3. Visit the panel page on the secondary language and hover on the files field

[afbora]

This issue is caused by the following line. I'm not sure exactly what pointer-events: all does or what it fixes for kirby.

<style>
.k-files-field[data-disabled="true"] * {
  pointer-events: all !important;
}
</style>

https://github.com/getkirby/kirby/blob/3.6.6/panel/src/components/Forms/Field/FilesField.vue#L151-L155

According to document

SVG only (experimental for HTML). The element can only be the target of a pointer event when the pointer is over the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of the fill, stroke, and visibility properties do not affect event processing.

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

[lukasbestle]

The change was introduced in https://github.com/getkirby/kirby/commit/5cd4391fbd5c28ebf937c8a474a974a82d9af76f.

[lukasbestle]

@manuelmoreale Does this occur in all browsers or could it be a CSS support issue?

[afbora]

Does this occur in all browsers or could it be a CSS support issue?

For me, I can reproduce the issue for latest Chrome and Firefox on Windows 10.

[manuelmoreale]

@manuelmoreale Does this occur in all browsers or could it be a CSS support issue?

I just tested in Chrome 101, Firefox 100 and Safari 15.4 and they all display the wrong cursor. From what I can see, the cursor: not-allowed should be getting inherited by the button from the .k-field[data-disabled="true"]

In reality though, it was not getting inherited, but the pointer-events: none was simply preventing the default pointer to show up.

The new rule @afbora mentioned is now bringing the event back and as expected the cursor pointer is back as well.

This, I believe, it's just because of the cascading nature of the CSS. You can see it right here in the way the different rules are rendered.

[distantnative]

Found a fix, limiting the rule to only the items already selected

.k-files-field[data-disabled="true"] .k-item * {
  pointer-events: all !important;
}

[bastianallgeier]

✅