Giters

cerner / terra-core

Terra offers a set of configurable React components designed to help build scalable and modular application UIs. This UI library was created to solve real-world issues in projects we work on day to day.

Home Page:http://terra-ui.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Terra-List ListSectionHeader Incorrect refCallback Prop

lawsonjames opened this issue · comments

commented

Bug Report

Description

The code change #3673 changed the refCallback prop for the ListSectionHeader component to be applied to the inner div tag instead of the intended li tag. The prop description in both the source code and Terra documentation both clearly state the refCallback is meant for the li tag as it was before this code change.

This code change has resulted in a crash scenario while using ListSectionHeader inside Terra Infinite List, specifically on Android devices when the text and/or display size is reduced to a smaller size. The height check here is checking the node tied to the refCallback (div) while another check here in the same file checks the height of the li tags. In the specific scenario described above this discrepancy in elements introduced by #3673 causes the 2 separate element's heights to be checked against each other which are not the same, resulting in an infinite re-render, eventually resulting in a crash.

To resolve this defect the refCallback prop must be moved back to the li element to align with the correct purpose of the prop and to fix latent defects that were introduced by this initial code change.

Steps to Reproduce

  1. Mount Terra Infinite List with a ListSectionHeader component in the list
  2. Using an Android device reduce the text and/or display to a smaller size

Additional Context / Screenshots

Expected Behavior

I expect the refCallback prop supplied by the ListSectionHeader component to be applied to the li element and not the inner div.

Possible Solution

Move the refCallback prop of the ListSectionHeader component back to the li tag.

Environment

  • Component Name and Version: terra-list --> ListSectionHeader (defect introduced by #3673)
  • Browser Name and Version: Chrome browser
  • Node/npm Version: Node 14.21.3
  • Webpack Version: 5.88.1
  • Operating System and version (desktop or mobile): Android OS

@ Mentions

commented

This issue has been automatically marked as inactive because it has not had recent activity. It will be closed in seven days if no further activity occurs. Thank you for your contributions.