Uploaded image for project: 'OpenShift Virtualization'
  1. OpenShift Virtualization
  2. CNV-73564

Patternfly ExpandableSection - Extra space when section is collapsed

XMLWordPrintable

    • Icon: Bug Bug
    • Resolution: Unresolved
    • Icon: Normal Normal
    • CNV v4.21.0
    • CNV v4.21.0
    • CNV User Interface
    • None
    • Quality / Stability / Reliability
    • 2
    • False
    • Hide

      None

      Show
      None
    • False
    • None
    • Important
    • None

      Description of problem:

      Due to a bug in Patternfly's ExpandableSection, it does not correctly render nested elements passed via the children prop. This results in an empty space being rendered with the height of the element that is supposed to be hidden.

      Version-Release number of selected component (if applicable):

      Console 4.21 (using Patternfly 6.4.0)

      How reproducible:

      Always

      Steps to Reproduce:

      1. Navigate to Virtualization -> Overview -> Settings
      2. Select the cluster tab
      3. Expand one of the expandable sections
      4. Observe the extra space

      Actual results:

      An empty space is displayed below the ExpandableSection trigger, corresponding to the height of the nested elements that should be hidden.

      Expected results:

      When the ExpandableSection is collapsed, the nested elements should be hidden and no extra vertical space should be rendered below the section's trigger.

      Additional info:

      This issue was introduced after upgrading to Patternfly 6.4.0 in Console 4.21. The functionality used to work correctly in Patternfly 6.2.2.
      
      Codesandbox Reproducers:
      - 6.2.2 (Working): https://codesandbox.io/p/sandbox/friendly-leftpad-p5wt7n
      - 6.4.0 (Broken): https://codesandbox.io/p/devbox/lucid-sky-v3xv75

              rh-ee-gkremer Gal Kremer
              rh-ee-gkremer Gal Kremer
              Guohua Ouyang Guohua Ouyang
              Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

                Created:
                Updated: