fix(fuselage): show AutoComplete placeholder (#1335)

RocketChat · Mar 25, 2024 · cef61fd · cef61fd
1 parent 3515540
commit cef61fd
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 6 deletions.
diff --git a/.changeset/weak-oranges-impress.md b/.changeset/weak-oranges-impress.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/fuselage": patch
+---
+
+fix(fuselage): show `AutoComplete` placeholder
diff --git a/packages/fuselage/src/components/AutoComplete/AutoComplete.stories.tsx b/packages/fuselage/src/components/AutoComplete/AutoComplete.stories.tsx
@@ -17,6 +17,7 @@ export default {
   title: 'Inputs/AutoComplete',
   component: AutoComplete,
   parameters: {
+    layout: 'centered',
     docs: {
       description: {
         component: 'An input for selection of options.',
@@ -108,3 +109,8 @@ CustomItem.args = {
     />
   ),
 };
+
+export const WithPlaceholder = Template.bind({});
+WithPlaceholder.args = {
+  placeholder: 'Search...',
+};
diff --git a/packages/fuselage/src/components/AutoComplete/AutoComplete.tsx b/packages/fuselage/src/components/AutoComplete/AutoComplete.tsx
@@ -153,7 +153,7 @@ export function AutoComplete({
             onFocus={show}
             onKeyDown={handleKeyDown}
             placeholder={
-              optionsAreVisible !== AnimatedVisibility.HIDDEN || !value
+              optionsAreVisible === AnimatedVisibility.HIDDEN || !value
                 ? placeholder
                 : undefined
             }
@@ -192,6 +192,7 @@ export function AutoComplete({
                 : 'magnifier'
             }
             size='x20'
+            color='default'
           />
         }
       />

diff --git a/packages/fuselage/src/components/AutoComplete/__snapshots__/AutoComplete.spec.tsx.snap b/packages/fuselage/src/components/AutoComplete/__snapshots__/AutoComplete.spec.tsx.snap
@@ -21,7 +21,7 @@ exports[`[AutoComplete Rendering] renders CustomItem without crashing 1`] = `
       >
         <i
           aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+          class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-6vi44e"
         >
           
         </i>
@@ -119,7 +119,7 @@ v/L21v8BT/ZVoe1UItsAAAAASUVORK5CYII="
       >
         <i
           aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+          class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-6vi44e"
         >
           
         </i>
@@ -150,7 +150,7 @@ exports[`[AutoComplete Rendering] renders Default without crashing 1`] = `
       >
         <i
           aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+          class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-6vi44e"
         >
           
         </i>
@@ -217,7 +217,7 @@ exports[`[AutoComplete Rendering] renders Multiple without crashing 1`] = `
       >
         <i
           aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+          class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-6vi44e"
         >
           
         </i>
@@ -414,7 +414,39 @@ v/L21v8BT/ZVoe1UItsAAAAASUVORK5CYII="
       >
         <i
           aria-hidden="true"
-          class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-4pvxx3"
+          class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-6vi44e"
+        >
+          
+        </i>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`[AutoComplete Rendering] renders WithPlaceholder without crashing 1`] = `
+<body>
+  <div>
+    <div
+      class="rcx-box rcx-box--full rcx-autocomplete rcx-css-t3n91h"
+    >
+      <div
+        class="rcx-box rcx-box--full rcx-css-6d871f"
+        role="group"
+      >
+        <input
+          aria-label="Decorator Label"
+          class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box  rcx-css-trljwa rcx-css-rcil7k"
+          placeholder="Search..."
+          value=""
+        />
+      </div>
+      <div
+        class="rcx-box rcx-box--full rcx-autocomplete__addon"
+      >
+        <i
+          aria-hidden="true"
+          class="rcx-box rcx-box--full rcx-icon--name-magnifier rcx-icon rcx-css-6vi44e"
         >
           
         </i>