fix: Safari list item slot order #3808
Conversation
|
Thanks for the PR! 🎉 We've deployed an automatic preview for this PR - you can see your changes here:
|
| } | ||
| } | ||
|
|
||
| _focusLastItem() { |
There was a problem hiding this comment.
I don't feel strongly about it, but I think the "Item" term was being used because it is focusing the last item in the cell. But it would appear if that's the case, it was done inconsistently.
There was a problem hiding this comment.
That makes sense. Yeah it was certainly inconsistent. I can go back through and try to add that context everywhere if it makes sense.
| <slot name="actions" class="d2l-cell" data-cell-num="7"></slot> | ||
| <slot name="content" class="d2l-cell" data-cell-num="8" @focus="${!this.noPrimaryAction ? this._preventFocus : null}"></slot> | ||
|
|
||
| <slot name="content-action" class="d2l-cell" data-cell-num="0"></slot> |
There was a problem hiding this comment.
Original order...
1 ::slotted([slot="outside-control-action"]) {
2 ::slotted([slot="expand-collapse"]) {
3 ::slotted([slot="control-action"]) {
4 ::slotted([slot="content-action"]) {
5 ::slotted([slot="actions"]) {
6 ::slotted([slot="drop-target"]) ➡️ now using `z-index: 1`
7 :host(.d2l-dragging-over) ::slotted([slot="nested"]) ➡️ now using `z-index: 2`
With these changes, it looks like content-action is being moved to be underneath everything, where is was previously on top of control-action. Does that cause issues?
There was a problem hiding this comment.
Yes, that's why I'm managing the outside-control-action and control-action column-end based on the whether there is a primary action or not. expand-collapse does not itself ever overlap (it uses a separate handler in control-action) so that one is fine.
There was a problem hiding this comment.
Also the z-index for drag-n-drop probably aren't necessary anymore either.
There was a problem hiding this comment.
Awesome. Thanks for the explanation. 😄
|
🎉 This PR is included in version 2.132.2 🎉 The release is available on: Your semantic-release bot 📦🚀 |
ghost
added
the
DE54029: Safari list-item slot order
After #3775, list items were broken in Safari because it renders the slots out of order in a very strange way. After giving each slot an explicit
orderCSS property or rearranging the DOM, Safari renders the slots in the correct order visually, but attempting to interact with the slots that were on top both in the DOM and visually still did not work, with pointer events being sent to the slots behind for no apparent reason.To fix this, I needed to both re-order the slots in the DOM and strategically disable pointer events or change the columns on slots that should not be interactive in each scenario. This allows the order to be purely DOM-based, without
orderorz-index.I also did some pretty minor cleanup of things that seemed unnecessary or poorly named.