From ffa065d3013f669a5f94323c927086a976ce6794 Mon Sep 17 00:00:00 2001
From: Kamil Pastuszka <33246308+kamilpastuszka@users.noreply.github.com>
Date: Mon, 20 Sep 2021 14:28:44 +0000
Subject: [PATCH] fix placeholder text issue for autocomplete component (#1423)

with new logic

improve logic

update snapshot
---
 .../AutocompleteSelectMenu.tsx                | 17 ++++++++++----
 .../__snapshots__/Stories.test.ts.snap        | 23 ++-----------------
 2 files changed, 15 insertions(+), 25 deletions(-)

diff --git a/src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx b/src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx
index 7457243a0..9cab93c2e 100644
--- a/src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx
+++ b/src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx
@@ -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}
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index 4496742dd..f7dc0b389 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -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"