fix: replace memoised value with state

app/client/src/widgets/MultiSelectWidgetV2/component/index.styled.tsx

@@ -157,38 +157,7 @@ export const DropdownStyles = createGlobalStyle<{
 }>`
 ${({ dropDownWidth, id }) => `
   .multiselect-popover-width-${id} {
-    width: ${dropDownWidth}px !important;
-
-    &.rc-select-dropdown-hidden {
-      display: none !important;
-    }
-    &.multi-select-dropdown {
-      min-height: 100px;
-      position: absolute;
-      background: #fff;
-      width: auto;
-      border-radius: 0px;
-      margin-top: 5px;
-      background: white;
-      box-shadow: 0 6px 20px 0px rgba(0, 0, 0, 0.15) !important;
-      overflow-x: scroll;
-      > div {
-          min-width: ${dropDownWidth}px;
-        }
-      .rc-select-item {
-        font-size: 14px;
-        padding: 5px 16px;
-        align-items: center;
-        cursor: pointer;
-        width: 100%;
-        height: 38px;
-      }
-      .rc-select-item-option-state {
-        .bp3-control.bp3-checkbox {
-          margin-bottom: 0;
-        }
-      }
-    }
+    min-width: ${dropDownWidth}px !important;
   }
 `}
 .rc-select-dropdown-hidden {
@@ -314,10 +283,35 @@ ${({ dropDownWidth, id }) => `
 	animation-name: ${rcSelectDropdownSlideUpOut};
 	animation-play-state: running;
 }
-.multi-select-dropdown {
-    ${CommonSelectFilterStyle}
-}
 
+.multi-select-dropdown {
+  min-height: 100px;
+  position: absolute;
+  background: #fff;
+  width: auto;
+  border-radius: 0px;
+  margin-top: 5px;
+  background: white;
+  box-shadow: 0 6px 20px 0px rgba(0, 0, 0, 0.15) !important;
+   overflow-x: scroll;
+  > div {
+      min-width: ${({ dropDownWidth }) => dropDownWidth}px;
+    }
+    ${CommonSelectFilterStyle}
+  .rc-select-item {
+    font-size: 14px;
+    padding: 5px 16px;
+    align-items: center;
+    cursor: pointer;
+    width: 100%;
+    height: 38px;
+  }
+  .rc-select-item-option-state {
+    .bp3-control.bp3-checkbox {
+      margin-bottom: 0;
+    }
+  }
+}
 `;
 
 export const MultiSelectContainer = styled.div<{
@@ -432,7 +426,6 @@ export const MultiSelectContainer = styled.div<{
       }
       .rc-select-selection-overflow {
         display: flex;
-        flex-wrap: wrap;
         width: 100%;
         align-items: center;
       }

app/client/src/widgets/MultiSelectWidgetV2/component/index.tsx

@@ -93,6 +93,8 @@ function MultiSelectComponent({
   const [isSelectAll, setIsSelectAll] = useState(false);
   const [filter, setFilter] = useState(filterText ?? "");
   const [filteredOptions, setFilteredOptions] = useState(options);
+  const [memoDropDownWidth, setMemoDropDownWidth] = useState(0);
+
   const _menu = useRef<HTMLElement | null>(null);
   const labelRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -193,14 +195,19 @@ function MultiSelectComponent({
     },
     serverSideFiltering ? [options] : [filter, options],
   );
-  const memoDropDownWidth = useMemo(() => {
+  useEffect(() => {
     if (compactMode && labelRef.current) {
       const labelWidth = labelRef.current.clientWidth;
       const widthDiff = dropDownWidth - labelWidth;
-      return widthDiff > dropDownWidth ? widthDiff : dropDownWidth;
+      setMemoDropDownWidth(
+        widthDiff > dropDownWidth ? widthDiff : dropDownWidth,
+      );
+      return;
     }
     const parentWidth = width - WidgetContainerDiff;
-    return parentWidth > dropDownWidth ? parentWidth : dropDownWidth;
+    setMemoDropDownWidth(
+      parentWidth > dropDownWidth ? parentWidth : dropDownWidth,
+    );
   }, [compactMode, dropDownWidth, width]);
 
   const onQueryChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {

app/client/src/widgets/WidgetUtils.ts

@@ -72,7 +72,7 @@ export const hexToRgb = (
         b: -1,
       };
 };
-// Padding between PostionContainer and Widget
+// Padding between PositionContainer and Widget
 export const WidgetContainerDiff = 8;
 export const hexToRgba = (color: string, alpha: number) => {
   const value = hexToRgb(color);