fix: <Dropdown> multi single line - counter options display (#1708)

mondaycom · Oct 29, 2023 · 90e9b36 · 90e9b36
1 parent 8916d4f
commit 90e9b36
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 14 deletions.
diff --git a/src/components/Dropdown/Dropdown.jsx b/src/components/Dropdown/Dropdown.jsx
@@ -99,7 +99,6 @@ const Dropdown = forwardRef(
     }, [defaultValue]);
 
     const [selected, setSelected] = useState(overrideDefaultValue || []);
-    const [isDialogShown, setIsDialogShown] = useState(false);
     const finalOptionRenderer = optionRenderer || OptionRenderer;
     const finalValueRenderer = valueRenderer || ValueRenderer;
     const isControlled = !!customValue;
@@ -217,8 +216,6 @@ const Dropdown = forwardRef(
       () => ({
         selectedOptions,
         onSelectedDelete: onOptionRemove,
-        setIsDialogShown,
-        isDialogShown,
         isMultiline: multiline,
         insideOverflowContainer,
         insideOverflowWithTransformContainer,
@@ -229,7 +226,6 @@ const Dropdown = forwardRef(
       [
         selectedOptions,
         onOptionRemove,
-        isDialogShown,
         multiline,
         insideOverflowContainer,
         insideOverflowWithTransformContainer,

diff --git a/src/components/Dropdown/components/MultiValueContainer/MultiValueContainer.jsx b/src/components/Dropdown/components/MultiValueContainer/MultiValueContainer.jsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/no-unstable-nested-components */
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { components } from "react-select";
 import cx from "classnames";
 import { useHiddenOptionsData } from "../../hooks/useHiddenOptionsData";
@@ -19,10 +19,10 @@ export default function Container({ children, selectProps, ...otherProps }) {
     withMandatoryDefaultOptions,
     readOnly
   } = selectProps;
-  const { selectedOptions, onSelectedDelete, setIsDialogShown, isDialogShown, isMultiline, popupsContainerSelector } =
-    customProps;
+  const { selectedOptions, onSelectedDelete, isMultiline, popupsContainerSelector } = customProps;
   const clickHandler = children[1];
   const [ref, setRef] = useState();
+  const [isCounterShown, setIsCounterShown] = useState(false);
   const showPlaceholder = selectedOptions.length === 0 && !inputValue;
   const chipWrapperClassName = classes["chip-with-input-wrapper"];
   const chipClassName = cx(
@@ -35,9 +35,13 @@ export default function Container({ children, selectProps, ...otherProps }) {
     ref,
     chipClassName,
     chipWrapperClassName,
-    selectedOptionsCount: selectedOptions.length
+    selectedOptionsCount: selectedOptions.length,
+    isCounterShown
   });
-  const isCounterShown = hiddenOptionsCount > 0;
+
+  useEffect(() => {
+    setIsCounterShown(hiddenOptionsCount > 0);
+  }, [hiddenOptionsCount]);
 
   const onDelete = useCallback(
     option => {
@@ -121,9 +125,6 @@ export default function Container({ children, selectProps, ...otherProps }) {
               tooltip
               showTrigger={Dialog.hideShowTriggers.CLICK}
               hideTrigger={Dialog.hideShowTriggers.CLICK_OUTSIDE}
-              open={isDialogShown}
-              onClick={() => setIsDialogShown(true)}
-              onClickOutside={() => setIsDialogShown(false)}
             >
               <Counter
                 kind={Counter.kinds.LINE}

diff --git a/src/components/Dropdown/hooks/useHiddenOptionsData.js b/src/components/Dropdown/hooks/useHiddenOptionsData.js
@@ -1,6 +1,13 @@
 import { useEffect, useState } from "react";
 
-export function useHiddenOptionsData({ isMultiline, ref, selectedOptionsCount, chipClassName, chipWrapperClassName }) {
+export function useHiddenOptionsData({
+  isMultiline,
+  ref,
+  selectedOptionsCount,
+  chipClassName,
+  chipWrapperClassName,
+  isCounterShown
+}) {
   const [overflowIndex, setOverflowIndex] = useState(-1);
   useEffect(() => {
     let finalOverflowingIndex = -1;
@@ -27,7 +34,7 @@ export function useHiddenOptionsData({ isMultiline, ref, selectedOptionsCount, c
     }
 
     setOverflowIndex(finalOverflowingIndex);
-  }, [ref, isMultiline, selectedOptionsCount, chipClassName, setOverflowIndex, chipWrapperClassName]);
+  }, [ref, isMultiline, selectedOptionsCount, chipWrapperClassName, chipClassName, isCounterShown]);
 
   const hiddenOptionsCount = overflowIndex > -1 ? selectedOptionsCount - overflowIndex : 0;
   return { overflowIndex, hiddenOptionsCount };