improve: prevent list to open clicking on addon

RocketChat · Feb 10, 2022 · 127f359 · 127f359
1 parent dfd5f3b
commit 127f359
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 11 deletions.
diff --git 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
@@ -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'