Skip to content

[EuiSuperDatePicker] Fix toggling isQuickSelectOnly triggering a full re-render when using absolute dates #8810

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

Merged
mgadewoll merged 8 commits into from
Jun 27, 2025
Merged

[EuiSuperDatePicker] Fix toggling isQuickSelectOnly triggering a full re-render when using absolute dates #8810

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
4cc8551
fix(superdatepicker): fix toggling isQuickSelectOnly triggering full …
kowalczyk-krzysztof Jun 18, 2025
af0b0cf
chore: add changelog
kowalczyk-krzysztof Jun 20, 2025
6d94f64
refactor: remove isQuickSelectOnly props in favor of unsetting availa…
mgadewoll Jun 25, 2025
195b5ba
docs(storybook): add quickSelectOnly example
mgadewoll Jun 25, 2025
df81a11
test: add regression test for isQuickSelectOnly behavior
mgadewoll Jun 25, 2025
84f1e3c
test(vrt): add reference images
mgadewoll Jun 25, 2025
8555ced
chore: update changelog
mgadewoll Jun 26, 2025
25487bb
docs(storybook): remove unimportant controls and ensure isQuickSelect…
mgadewoll Jun 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/eui/changelogs/upcoming/8810.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
**Bug fixes**

- Fixed an issue with `EuiSuperDatePicker` where toggling `isQuickSelectOnly` would cause a full re-render when the selected range uses absolute dates
Comment thread
mgadewoll marked this conversation as resolved.

7 changes: 7 additions & 0 deletions packages/eui/src/components/date_picker/date_picker_range.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,11 @@ export type EuiDatePickerRangeProps = CommonProps &
* Triggered whenever the start or end controls are focused
*/
onFocus?: FocusEventHandler<HTMLInputElement>;

/**
* If set to `true`, the delimeter and controls will be not be rendered
*/
isQuickSelectOnly?: boolean;
};

export const EuiDatePickerRange: FunctionComponent<EuiDatePickerRangeProps> = ({
Expand All @@ -116,6 +121,7 @@ export const EuiDatePickerRange: FunctionComponent<EuiDatePickerRangeProps> = ({
onBlur,
append,
prepend,
isQuickSelectOnly = false,
...rest
}) => {
// `fullWidth` and `compressed` should not affect inline datepickers (matches non-range behavior)
Expand Down Expand Up @@ -205,6 +211,7 @@ export const EuiDatePickerRange: FunctionComponent<EuiDatePickerRangeProps> = ({
return (
<span className={classes} css={cssStyles} {...rest}>
<EuiFormControlLayoutDelimited
isQuickSelectOnly={isQuickSelectOnly}
Comment thread
mgadewoll marked this conversation as resolved.
Outdated
icon={icon}
startControl={startControl}
endControl={endControl}
Expand Down
56 changes: 25 additions & 31 deletions packages/eui/src/components/date_picker/super_date_picker/super_date_picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -595,15 +595,6 @@ export class EuiSuperDatePickerInternal extends Component<
],
};

if (isQuickSelectOnly) {
return (
<EuiFormControlLayout
iconsPosition="static"
{...formControlLayoutProps}
/>
);
}

const isDisabledDisplay = isObject(isDisabled) && isDisabled?.display;

if (
Expand All @@ -612,28 +603,30 @@ export class EuiSuperDatePickerInternal extends Component<
) {
return (
<EuiFormControlLayout {...formControlLayoutProps}>
<button
type="button"
css={styles.euiSuperDatePicker__prettyFormat}
className={classNames('euiSuperDatePicker__prettyFormat', {
'euiSuperDatePicker__prettyFormat--disabled': isDisabled,
})}
data-test-subj="superDatePickerShowDatesButton"
disabled={!!isDisabled}
onClick={this.hidePrettyDuration}
onFocus={onFocus}
>
{isDisabledDisplay ? (
isDisabled.display
) : (
<PrettyDuration
timeFrom={start}
timeTo={end}
quickRanges={commonlyUsedRanges}
dateFormat={dateFormat}
/>
)}
</button>
{!isQuickSelectOnly && (
Comment thread
mgadewoll marked this conversation as resolved.
<button
type="button"
css={styles.euiSuperDatePicker__prettyFormat}
className={classNames('euiSuperDatePicker__prettyFormat', {
'euiSuperDatePicker__prettyFormat--disabled': isDisabled,
})}
data-test-subj="superDatePickerShowDatesButton"
disabled={!!isDisabled}
onClick={this.hidePrettyDuration}
onFocus={onFocus}
>
{isDisabledDisplay ? (
isDisabled.display
) : (
<PrettyDuration
timeFrom={start}
timeTo={end}
quickRanges={commonlyUsedRanges}
dateFormat={dateFormat}
/>
)}
</button>
)}
</EuiFormControlLayout>
);
}
Expand All @@ -655,6 +648,7 @@ export class EuiSuperDatePickerInternal extends Component<
{({ locale: contextLocale }) => (
<EuiDatePickerRange
{...rangeProps}
isQuickSelectOnly={isQuickSelectOnly}
css={rangeCssStyles}
isCustom={true}
iconType={false}
Expand Down
21 changes: 15 additions & 6 deletions packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,10 @@ export type EuiFormControlLayoutDelimitedProps =
*/
delimiter?: ReactNode;
className?: string;
/**
* If set to `true`, the delimeter and controls will be not be rendered
*/
isQuickSelectOnly?: boolean;
};

export const EuiFormControlLayoutDelimited: FunctionComponent<
Expand All @@ -51,6 +55,7 @@ export const EuiFormControlLayoutDelimited: FunctionComponent<
delimiter,
className,
fullWidth: _fullWidth,
isQuickSelectOnly = false,
...rest
}) => {
const { defaultFullWidth } = useFormContext();
Expand Down Expand Up @@ -86,12 +91,16 @@ export const EuiFormControlLayoutDelimited: FunctionComponent<
wrapperProps={{ ...rest.wrapperProps, css: wrapperStyles }}
>
<FormContext.Provider value={{ defaultFullWidth: fullWidth }}>
{addClassesToControl(startControl)}
<EuiFormControlDelimiter
delimiter={delimiter}
isInvalid={showInvalidState}
/>
{addClassesToControl(endControl)}
{!isQuickSelectOnly && (
<>
{addClassesToControl(startControl)}
<EuiFormControlDelimiter
delimiter={delimiter}
isInvalid={showInvalidState}
/>
{addClassesToControl(endControl)}
</>
)}
</FormContext.Provider>
</EuiFormControlLayout>
);
Expand Down