djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix placeholder text issue for autocomplete component (#1423)

Browse source 
with new logic

improve logic

update snapshot
This commit is contained in:
Kamil Pastuszka 2021-09-20 14:28:44 +00:00 committed by GitHub
parent 901ab2a505
commit ffa065d301
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx
View file

@ -80,7 +80,10 @@ const AutocompleteSelectMenu: React.FC<AutocompleteSelectMenuProps> = props => {
} = props; } = props;
const classes = useStyles(props); const classes = useStyles(props);
const [isFocused, setIsFocused] = React.useState(false);
const [inputValue, setInputValue] = React.useState(displayValue || ""); const [inputValue, setInputValue] = React.useState(displayValue || "");
const [menuPath, setMenuPath] = React.useState<number[]>([]); const [menuPath, setMenuPath] = React.useState<number[]>([]);
const handleChange = (value: string) => const handleChange = (value: string) =>
@ -118,18 +121,24 @@ const AutocompleteSelectMenu: React.FC<AutocompleteSelectMenuProps> = props => {
> >
<TextField <TextField
InputProps={{ InputProps={{
endAdornment: loading && <CircularProgress size={16} />, endAdornment: isFocused && loading && (
<CircularProgress size={16} />
),
id: undefined, id: undefined,
onBlur: () => { onBlur() {
setIsFocused(false);
closeMenu(); closeMenu();
setMenuPath([]); setMenuPath([]);
setInputValue(displayValue); setInputValue(displayValue || "");
}, },
onChange: event => { onChange: event => {
debounceFn(event.target.value); debounceFn(event.target.value);
setInputValue(event.target.value); setInputValue(event.target.value);
}, },
onFocus: () => openMenu(), onFocus: () => {
openMenu();
setIsFocused(true);
},
placeholder placeholder
}} }}
disabled={disabled} disabled={disabled}

23
src/storybook/__snapshots__/Stories.test.ts.snap
View file

@ -4205,34 +4205,15 @@ exports[`Storyshots Generics / Autocomplete Menu loading 1`] = `
Autocomplete Menu Autocomplete Menu
</label> </label>
<div <div
class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id" class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
> >
<input <input
aria-invalid="false" aria-invalid="false"
class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id" class="MuiInputBase-input-id MuiOutlinedInput-input-id"
placeholder="Start typing to search ..." placeholder="Start typing to search ..."
type="text" type="text"
value="Item 1.2" value="Item 1.2"
/> />
<div
class="MuiCircularProgress-root-id MuiCircularProgress-colorPrimary-id MuiCircularProgress-indeterminate-id"
role="progressbar"
style="width:16px;height:16px"
>
<svg
class="MuiCircularProgress-svg-id"
viewBox="22 22 44 44"
>
<circle
class="MuiCircularProgress-circle-id MuiCircularProgress-circleIndeterminate-id"
cx="44"
cy="44"
fill="none"
r="20.2"
stroke-width="3.6"
/>
</svg>
</div>
<fieldset <fieldset
aria-hidden="true" aria-hidden="true"
class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id" class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"