patternfly / patternfly/patternfly

Bug - DatePicker and TimePicker popover incorrectly displayed when inside ExpandableSection

Open
#8,294 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Stale
Dominant language
SCSS
Stars
817
Forks
116
Avg merge
4d 11h
Merged PRs (30d)
14

Description

Describe the problem
This is an issue with

  • Patternfly 5

  • Patternfly 6

  • other

The popover of DatePicker or Timepicker is not fully displayed when used from inside ExpandableSection.

How do you reproduce the problem?

import { ExpandableSection, DatePicker, TimePicker } from '@patternfly/react-core';
export const ExpandableSectionBasic: React.FunctionComponent = () => {
  return (
    <ExpandableSection toggleText="Test" isExpanded>
      <DatePicker/>
      <TimePicker/>
    </ExpandableSection>
  );
};

Expected behavior
A clear and concise description of the expected behavior.

Is this issue blocking you?
Found a workaround by overloading --pf-v6-c-expandable-section__content--TranslateY property from css as follows:

.pf-v6-c-expandable-section {
  --pf-v6-c-expandable-section__content--TranslateY: 1 !important;
}

Screenshots
Following screenshot shows DatePicker's popover truncated:

image

Following screenshot shows TimePicker's popover menu truncated:

image

What is your environment?

  • OS: Windows 11
  • Browser:
  • Edge Version146.0.3856.109 (Official build) (64-bit)
  • Chrome Version 146.0.7680.178 (Build officiel) (64 bits)

Any other information?
Problem does not occur with Patternfly 5


Jira Issue: PF-3935

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the issue with DatePicker and TimePicker inside an expanded ExpandableSection in PatternFly 6. Inspect the SCSS controlling the --pf-v6-c-expandable-section__content--TranslateY property and compare the behavior with PatternFly 5. Done means both popovers are fully visible without the reported CSS workaround.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, scss
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
58/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.