From 127f3593a5ccc8267963cbbd1f0fec78e61d0eb5 Mon Sep 17 00:00:00 2001
From: dougfabris <devfabris@gmail.com>
Date: Thu, 10 Feb 2022 20:45:23 -0300
Subject: [PATCH] improve: prevent list to open clicking on addon

---
 .../src/components/Select/Select.stories.tsx  | 19 ++++++++++---------
 .../fuselage/src/components/Select/Select.tsx | 11 +++++++++--
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/packages/fuselage/src/components/Select/Select.stories.tsx b/packages/fuselage/src/components/Select/Select.stories.tsx
index b5c11321be..f31068e1b1 100644
--- a/packages/fuselage/src/components/Select/Select.stories.tsx
+++ b/packages/fuselage/src/components/Select/Select.stories.tsx
@@ -100,20 +100,21 @@ WithEmptyOptions.args = {
   options: [],
 };
 
-export const CustomEmpty: ComponentStory<typeof Select> =
-  TemplateWithFilter.bind({});
-CustomEmpty.args = {
+export const WithAddon: ComponentStory<typeof Select> = TemplateWithFilter.bind(
+  {}
+);
+WithAddon.args = {
   width: '250px',
   placeholder: 'Placeholder here...',
-  options: [],
-  customEmpty: 'Custom empty placeholder',
+  options,
+  addonIcon: 'magnifier',
 };
 
-export const SelectWithCustomAddonIcon: ComponentStory<typeof Select> =
+export const CustomEmpty: ComponentStory<typeof Select> =
   TemplateWithFilter.bind({});
-SelectWithCustomAddonIcon.args = {
+CustomEmpty.args = {
   width: '250px',
   placeholder: 'Placeholder here...',
-  options,
-  addonIcon: 'magnifier',
+  options: [],
+  customEmpty: 'Custom empty placeholder',
 };
diff --git a/packages/fuselage/src/components/Select/Select.tsx b/packages/fuselage/src/components/Select/Select.tsx
index d0a6c08469..cf35925ea3 100644
--- a/packages/fuselage/src/components/Select/Select.tsx
+++ b/packages/fuselage/src/components/Select/Select.tsx
@@ -136,6 +136,7 @@ export const Select = forwardRef(
     });
 
     const innerRef = useRef<HTMLInputElement | null>(null);
+    const addonRef = useRef<HTMLElement | null>(null);
     const anchorRef = useMergedRefs(ref, innerRef);
 
     const { ref: containerRef, borderBoxSize } = useResizeObserver();
@@ -148,11 +149,16 @@ export const Select = forwardRef(
       (filter === undefined || visible === AnimatedVisibility.HIDDEN) &&
       (valueLabel || placeholder || typeof placeholder === 'string');
 
-    const handleClick = useMutableCallback(() => {
+    const handleClick = useMutableCallback((e) => {
+      const addonClicked = addonRef.current === e.target;
       if (visible === AnimatedVisibility.VISIBLE) {
         return hide();
       }
-      innerRef.current?.focus();
+
+      if (!addonClicked) {
+        innerRef.current?.focus();
+      }
+
       return show();
     });
 
@@ -200,6 +206,7 @@ export const Select = forwardRef(
             mi='x4'
             children={
               <Icon
+                ref={addonRef}
                 name={
                   visible === AnimatedVisibility.VISIBLE
                     ? 'cross'