IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-29 12:14:08 -06:00
Code Issues Packages Projects Releases Wiki Activity

Transformations: Focus search input on drawer open (#80859)

Browse Source 
* Focus search input on drawer open

* Prettier
This commit is contained in:
Kyle Cunningham 2024-01-23 22:19:33 -06:00 committed by GitHub
parent cd2abce914
commit 6484f4a2ac
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
public/app/features/dashboard/components/TransformationsEditor/TransformationPickerNg.tsx
View File

@ -1,5 +1,5 @@
import { cx, css } from '@emotion/css';
import React, { FormEventHandler, KeyboardEventHandler, ReactNode } from 'react';
import React, { FormEventHandler, KeyboardEventHandler, ReactNode, useCallback } from 'react';
import {
DataFrame,
@ -43,7 +43,6 @@ interface TransformationPickerNgProps {
export function TransformationPickerNg(props: TransformationPickerNgProps) {
const styles = useStyles2(getTransformationPickerStyles);
const {
noTransforms,
suffix,
setState,
xforms,
@ -56,6 +55,12 @@ export function TransformationPickerNg(props: TransformationPickerNgProps) {
data,
} = props;
// Use a callback ref to call "click" on the search input
// This will focus it when it's opened
const searchInputRef = useCallback((input: HTMLInputElement) => {
input?.click();
}, []);
return (
<Drawer size="md" onClose={() => setState({ showPicker: false })} title="Add another transformation">
<div className={styles.searchWrapper}>
@ -63,11 +68,11 @@ export function TransformationPickerNg(props: TransformationPickerNgProps) {
data-testid={selectors.components.Transforms.searchInput}
className={styles.searchInput}
value={search ?? ''}
autoFocus={!noTransforms}
placeholder="Search for transformation"
onChange={onSearchChange}
onKeyDown={onSearchKeyDown}
suffix={suffix}
ref={searchInputRef}
/>
<div className={styles.showImages}>
<span className={styles.illustationSwitchLabel}>Show images</span>{' '}