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