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

AutoSizeInput: Fix updating of value

Browse Source
This commit is contained in:
Ivana Huckova 2022-04-14 12:00:06 +02:00
parent 86ca14f7e6
commit d4b4ae0a10
1 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
public/app/plugins/datasource/prometheus/querybuilder/shared/AutoSizeInput.tsx
View File

@ -11,19 +11,26 @@ export interface Props extends InputProps {
} }
export const AutoSizeInput = React.forwardRef<HTMLInputElement, Props>((props, ref) => { export const AutoSizeInput = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
const { defaultValue = '', minWidth = 10, maxWidth, onCommitChange, onKeyDown, onBlur, ...restProps } = props; const { defaultValue, minWidth = 10, maxWidth, onCommitChange, onKeyDown, onBlur, ...restProps } = props;
const [value, setValue] = React.useState(defaultValue); const [value, setValue] = React.useState('');
const [inputWidth, setInputWidth] = React.useState(minWidth); const [inputWidth, setInputWidth] = React.useState(0);
useEffect(() => { useEffect(() => {
setInputWidth(getWidthFor(value.toString(), minWidth, maxWidth)); setInputWidth(getWidthFor(value.toString(), minWidth, maxWidth));
}, [value, maxWidth, minWidth]); }, [value, maxWidth, minWidth]);
useEffect(() => {
setInputWidth(minWidth);
if (defaultValue) {
setValue(defaultValue.toString());
}
}, [minWidth, defaultValue]);
return ( return (
<Input <Input
{...restProps} {...restProps}
ref={ref} ref={ref}
value={value.toString()} value={value}
onChange={(event) => { onChange={(event) => {
setValue(event.currentTarget.value); setValue(event.currentTarget.value);
}} }}