Skip to content

TextArea: Focused TextArea Z-Index too high #11393

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
1 task done
joshuasap265 opened this issue Apr 23, 2025 · 2 comments · May be fixed by #11408
Open
1 task done

TextArea: Focused TextArea Z-Index too high #11393

joshuasap265 opened this issue Apr 23, 2025 · 2 comments · May be fixed by #11408
Assignees
@nikoletavnv
Labels
bug This issue is a bug in the code Medium Prio TOPIC RL

Comments

@joshuasap265
Copy link

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:

Image

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

Image

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





  


    

      

  

    

        
    
    

  


      
          
  
      
            Copy link

  

      
    

  


  

      

  
    Collaborator


      

  


  

    

      

      
            Lukas742
  

      

      

      commented


        Apr 23, 2025


      
  •

  

    
      

        
          edited
          
        
        
      

    
    
      
        
      Loading

    
  



    


  





      


        


  
    

      
          
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?

      		
    

  





        


            

            
            

              
            

        

      


      

            
  

    
  
    
    

  

  


    












      

  
            

    

      
    

    


      

          @Lukas742
Lukas742




        transferred this issue from SAP/ui5-webcomponents-react


      Apr 23, 2025

    

  



    

    

      
    

    


      

          @TeodorTaushanov
TeodorTaushanov




            added
      

  bug

  This issue is a bug in the code

      

  Medium Prio


      

  TOPIC RL


  labels


      Apr 23, 2025

    

  



    


    







      

  
      



  

  @TeodorTaushanov





  


    

      

  

    

        
    
    

  


      
          
  
      
            Copy link

  

      
    

  


  

      

  
  Member


      

  


  

    

  





      


        


  
    

      
          
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?

      		
    

  





        


            

            
            

              
            

        

      


      

            
  

    
  
    
    

  

  


    












      

  
            

    

      
    

    


      

          @nikoletavnv
nikoletavnv




              self-assigned this


      Apr 24, 2025

    

  



    

    

      
    

    


      

          @nikoletavnv
nikoletavnv




          moved this from New Issues
  to In progress
  in Maintenance - Topic RL


      Apr 24, 2025

    

  



  

  

    
  


  

      

    @nikoletavnv
nikoletavnv



    linked a pull request
    
      Apr 24, 2025
    

    that will
    close
    this issue





  


  

      
   Open

  







  













  
  

    

      

  





  




  
  

              

  
    Sign up for free
    to join this conversation on GitHub.
    Already have an account?
    Sign in to comment


  



  






  
                  




    

  


      
  

    Assignees
  



        

      

        

  
      @nikoletavnv
  
    nikoletavnv
    

      








      


  


  

    Labels
  



    

      

    bug

  This issue is a bug in the code
  

    Medium Prio

  

    TOPIC RL









      

  

    

        

    Projects
  


        




        
  

    

      
          
        Maintenance - Topic RL
    

    

      

            
    Status: In progress


      

    

    

  



        
  

    

      
          
        ui5-webcomponents-react Roadmap
        
    

    

      

            
    Status: 🆕 New

              
      

    

    

  







  



      


  

    
  

    Milestone
  


      No milestone





    
      
          


  

    

      
        

          
    

    Development
  




            
  
Successfully merging a pull request may close this issue.





    


  
          
      fix(ui5-textarea): remove z-index from focused textarea wrapper

    
      SAP/ui5-webcomponents
    





      
    

  




      

    

  
      

  

    

      4 participants
    

    

        
          @TeodorTaushanov 
        
          @Lukas742 
        
          @nikoletavnv 
        
          @joshuasap265