IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

TimeZonePicker: Scroll menu correctly when using keyboard controls (#60008)

Browse Source 
pass innerRef to TimeZoneOption so the menu scrolls properly
This commit is contained in:
Ashley Harrison 2022-12-12 12:30:02 +00:00 committed by GitHub
parent d7b4a017d2
commit 97fa63d14d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOption.tsx
View File

@ -1,6 +1,6 @@
import { css, cx } from '@emotion/css'; import { css, cx } from '@emotion/css';
import { isString } from 'lodash'; import { isString } from 'lodash';
import React, { PropsWithChildren } from 'react'; import React, { PropsWithChildren, RefCallback } from 'react';
import { GrafanaTheme2, SelectableValue, getTimeZoneInfo } from '@grafana/data'; import { GrafanaTheme2, SelectableValue, getTimeZoneInfo } from '@grafana/data';
@ -16,6 +16,7 @@ interface Props {
isFocused: boolean; isFocused: boolean;
isSelected: boolean; isSelected: boolean;
innerProps: JSX.IntrinsicElements['div']; innerProps: JSX.IntrinsicElements['div'];
innerRef: RefCallback<HTMLDivElement>;
data: SelectableZone; data: SelectableZone;
} }
@ -26,7 +27,7 @@ export interface SelectableZone extends SelectableValue<string> {
} }
export const WideTimeZoneOption: React.FC<PropsWithChildren<Props>> = (props, ref) => { 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 theme = useTheme2();
const styles = getStyles(theme); const styles = getStyles(theme);
const timestamp = Date.now(); const timestamp = Date.now();
@ -39,7 +40,7 @@ export const WideTimeZoneOption: React.FC<PropsWithChildren<Props>> = (props, re
const timeZoneInfo = getTimeZoneInfo(data.value, timestamp); const timeZoneInfo = getTimeZoneInfo(data.value, timestamp);
return ( 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.row)}>
<div className={cx(styles.leftColumn, styles.wideRow)}> <div className={cx(styles.leftColumn, styles.wideRow)}>
<TimeZoneTitle title={children} /> <TimeZoneTitle title={children} />
@ -66,7 +67,7 @@ export const WideTimeZoneOption: React.FC<PropsWithChildren<Props>> = (props, re
}; };
export const CompactTimeZoneOption: React.FC<React.PropsWithChildren<Props>> = (props, ref) => { 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 theme = useTheme2();
const styles = getStyles(theme); const styles = getStyles(theme);
const timestamp = Date.now(); const timestamp = Date.now();
@ -79,7 +80,7 @@ export const CompactTimeZoneOption: React.FC<React.PropsWithChildren<Props>> = (
const timeZoneInfo = getTimeZoneInfo(data.value, timestamp); const timeZoneInfo = getTimeZoneInfo(data.value, timestamp);
return ( 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.body}>
<div className={styles.row}> <div className={styles.row}>
<div className={styles.leftColumn}> <div className={styles.leftColumn}>