Skip to content
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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

TimeZonePicker: Scroll menu correctly when using keyboard controls #60008

Merged
merged 2 commits into from Dec 12, 2022
Merged

TimeZonePicker: Scroll menu correctly when using keyboard controls #60008

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4459703
pass innerRef to TimeZoneOption so the menu scrolls properly
ashharrison90 Dec 8, 2022
911aa06
Merge branch 'main' into ash/56236
ashharrison90 Dec 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
11 changes: 6 additions & 5 deletions packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOption.tsx
View file
Open in desktop
@@ -1,6 +1,6 @@
import { css, cx } from '@emotion/css';
import { isString } from 'lodash';
import React, { PropsWithChildren } from 'react';
import React, { PropsWithChildren, RefCallback } from 'react';

import { GrafanaTheme2, SelectableValue, getTimeZoneInfo } from '@grafana/data';

Expand All @@ -16,6 +16,7 @@ interface Props {
isFocused: boolean;
isSelected: boolean;
innerProps: JSX.IntrinsicElements['div'];
innerRef: RefCallback<HTMLDivElement>;
data: SelectableZone;
}

Expand All @@ -26,7 +27,7 @@ export interface SelectableZone extends SelectableValue<string> {
}

export const WideTimeZoneOption: React.FC<PropsWithChildren<Props>> = (props, ref) => {
const { children, innerProps, data, isSelected, isFocused } = props;
const { children, innerProps, innerRef, data, isSelected, isFocused } = props;
const theme = useTheme2();
const styles = getStyles(theme);
const timestamp = Date.now();
Expand All @@ -39,7 +40,7 @@ export const WideTimeZoneOption: React.FC<PropsWithChildren<Props>> = (props, re
const timeZoneInfo = getTimeZoneInfo(data.value, timestamp);

return (
<div className={containerStyles} {...innerProps} aria-label="Select option">
<div className={containerStyles} {...innerProps} ref={innerRef} aria-label="Select option">
<div className={cx(styles.leftColumn, styles.row)}>
<div className={cx(styles.leftColumn, styles.wideRow)}>
<TimeZoneTitle title={children} />
Expand All @@ -66,7 +67,7 @@ export const WideTimeZoneOption: React.FC<PropsWithChildren<Props>> = (props, re
};

export const CompactTimeZoneOption: React.FC<React.PropsWithChildren<Props>> = (props, ref) => {
const { children, innerProps, data, isSelected, isFocused } = props;
const { children, innerProps, innerRef, data, isSelected, isFocused } = props;
const theme = useTheme2();
const styles = getStyles(theme);
const timestamp = Date.now();
Expand All @@ -79,7 +80,7 @@ export const CompactTimeZoneOption: React.FC<React.PropsWithChildren<Props>> = (
const timeZoneInfo = getTimeZoneInfo(data.value, timestamp);

return (
<div className={containerStyles} {...innerProps} aria-label="Select option">
<div className={containerStyles} {...innerProps} ref={innerRef} aria-label="Select option">
<div className={styles.body}>
<div className={styles.row}>
<div className={styles.leftColumn}>
Expand Down