TextArea: Focused TextArea Z-Index too high

[joshuasap265]

Describe the bug

When having a floating Footer on an ObjectPage and a TextArea is focused in one of the ObjectPageSections, the border shows above the footer:

The reason for this seems to be a z-index value of 2 in a computed :after of the TextArea Component:

I can't find a way to overwrite this behavior using the css in my application.

Isolated Example

https://stackblitz.com/edit/github-kj8bhcu2?file=src%2FApp.tsx

Reproduction steps

1. Open the StackBlitz Example
2. Focus / Press on the TextArea

Expected Behaviour

No response

Screenshots or Videos

No response

UI5 Web Components for React Version

2.8.1

UI5 Web Components Version

2.8.0

Browser

Chrome

Operating System

No response

Additional Context

No response

Relevant log output

Organization

SAP SE

Declaration

• I’m not disclosing any internal or sensitive information.

[Lukas742]

Hi @joshuasap265

you can customize the z-index of the footer element via CSS. E.g:

.objectPage [data-component-name='ObjectPageFooter'] {
  z-index: 2;
}

https://stackblitz.com/edit/github-kj8bhcu2-qmy1dofd?file=src%2Fstyles.module.css,src%2FApp.tsx

Since I'm not sure if the TextArea should "leak" its z-index outside of the shadow root, I'm forwarding this issue to the ui5-webcomponents repo, as the component is developed there.

---

Hi Colleagues,
when using the TextArea in a context where the stacking order is relevant, the focus border is overlapping elements with z-index < 2. Setting z-index: 0 on the root div inside the shadow-root seems to solve this issue.
Is this something that should be handled on App side, or should the stacking order be encapsulated inside the custom element?

[TeodorTaushanov]

Hello @SAP/ui5-webcomponents-topic-rl, the focus of the ui5-textarea has z-index: 2; and it is rendered above the floating footer of the ObjectPage. Can you check this issue?

[github-actions]

This issue has been closed. To reopen, just leave a comment!