fix: update dropdown width (#2181)

* fix: update dropdown width

* fix conflict

* refactor dropdown width state

front/src/modules/ui/data/view-bar/components/MultipleFiltersDropdownContent.tsx

@@ -14,6 +14,7 @@ import { FilterDropdownNumberSearchInput } from './FilterDropdownNumberSearchInp
 import { FilterDropdownOperandButton } from './FilterDropdownOperandButton';
 import { FilterDropdownOperandSelect } from './FilterDropdownOperandSelect';
 import { FilterDropdownTextSearchInput } from './FilterDropdownTextSearchInput';
+import { MultipleFiltersDropdownFilterOnFilterChangedEffect } from './MultipleFiltersDropdownFilterOnFilterChangedEffect';
 
 export const MultipleFiltersDropdownContent = () => {
   const { ViewBarRecoilScopeContext } = useViewBarContext();
@@ -62,6 +63,11 @@ export const MultipleFiltersDropdownContent = () => {
           </>
         )
       )}
+      <MultipleFiltersDropdownFilterOnFilterChangedEffect
+        filterDefinitionUsedInDropdownType={
+          filterDefinitionUsedInDropdown?.type
+        }
+      />
     </>
   );
 };

front/src/modules/ui/data/view-bar/components/MultipleFiltersDropdownFilterOnFilterChangedEffect.tsx

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+
+import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+
+export const MultipleFiltersDropdownFilterOnFilterChangedEffect = ({
+  filterDefinitionUsedInDropdownType,
+}: {
+  filterDefinitionUsedInDropdownType: string | undefined;
+}) => {
+  const { setDropdownWidth } = useDropdown();
+
+  useEffect(() => {
+    switch (filterDefinitionUsedInDropdownType) {
+      case 'date':
+        setDropdownWidth(280);
+        break;
+      default:
+        setDropdownWidth(160);
+    }
+  }, [filterDefinitionUsedInDropdownType, setDropdownWidth]);
+
+  return null;
+};

front/src/modules/ui/layout/dropdown/components/Dropdown.tsx

@@ -1,6 +1,12 @@
 import { useRef } from 'react';
 import { Keys } from 'react-hotkeys-hook';
-import { flip, offset, Placement, useFloating } from '@floating-ui/react';
+import {
+  autoUpdate,
+  flip,
+  offset,
+  Placement,
+  useFloating,
+} from '@floating-ui/react';
 import { Key } from 'ts-key-enum';
 
 import { HotkeyEffect } from '@/ui/utilities/hotkey/components/HotkeyEffect';
@@ -12,7 +18,7 @@ import { useDropdown } from '../hooks/useDropdown';
 import { useInternalHotkeyScopeManagement } from '../hooks/useInternalHotkeyScopeManagement';
 
 import { DropdownMenu } from './DropdownMenu';
-import { DropdownToggleEffect } from './DropdownToggleEffect';
+import { DropdownOnToggleEffect } from './DropdownOnToggleEffect';
 
 type DropdownProps = {
   clickableComponent?: JSX.Element | JSX.Element[];
@@ -33,7 +39,7 @@ type DropdownProps = {
 export const Dropdown = ({
   clickableComponent,
   dropdownComponents,
-  dropdownMenuWidth = 160,
+  dropdownMenuWidth,
   hotkey,
   dropdownHotkeyScope,
   dropdownPlacement = 'bottom-end',
@@ -44,8 +50,10 @@ export const Dropdown = ({
 }: DropdownProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
 
-  const { isDropdownOpen, toggleDropdown, closeDropdown } = useDropdown();
+  const { isDropdownOpen, toggleDropdown, closeDropdown, dropdownWidth } =
+    useDropdown();
 
+  const dropdownWidthState = dropdownMenuWidth ?? dropdownWidth;
   const offsetMiddlewares = [];
   if (dropdownOffset.x) {
     offsetMiddlewares.push(offset({ crossAxis: dropdownOffset.x }));
@@ -58,6 +66,7 @@ export const Dropdown = ({
   const { refs, floatingStyles } = useFloating({
     placement: dropdownPlacement,
     middleware: [flip(), ...offsetMiddlewares],
+    whileElementsMounted: autoUpdate,
   });
 
   const handleHotkeyTriggered = () => {
@@ -103,7 +112,7 @@ export const Dropdown = ({
       )}
       {isDropdownOpen && (
         <DropdownMenu
-          width={dropdownMenuWidth}
+          width={dropdownWidthState}
           data-select-disable
           ref={refs.setFloating}
           style={floatingStyles}
@@ -111,7 +120,10 @@ export const Dropdown = ({
           {dropdownComponents}
         </DropdownMenu>
       )}
-      <DropdownToggleEffect onDropdownClose={onClose} onDropdownOpen={onOpen} />
+      <DropdownOnToggleEffect
+        onDropdownClose={onClose}
+        onDropdownOpen={onOpen}
+      />
     </div>
   );
 };

front/src/modules/ui/layout/dropdown/components/DropdownOnToggleEffect.tsx

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 
-export const DropdownToggleEffect = ({
+export const DropdownOnToggleEffect = ({
   onDropdownClose,
   onDropdownOpen,
 }: {

front/src/modules/ui/layout/dropdown/hooks/useDropdown.ts

@@ -25,6 +25,8 @@ export const useDropdown = (props?: UseDropdownProps) => {
     setDropdownHotkeyScope,
     isDropdownOpen,
     setIsDropdownOpen,
+    dropdownWidth,
+    setDropdownWidth,
   } = useDropdownStates({
     scopeId,
   });
@@ -61,5 +63,7 @@ export const useDropdown = (props?: UseDropdownProps) => {
     scopeId,
     dropdownHotkeyScope,
     setDropdownHotkeyScope,
+    dropdownWidth,
+    setDropdownWidth,
   };
 };

front/src/modules/ui/layout/dropdown/hooks/useDropdownStates.ts

@@ -1,6 +1,7 @@
 import { useRecoilScopedStateV2 } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedStateV2';
 
 import { dropdownHotkeyScopeScopedState } from '../states/dropdownHotkeyScopeScopedState';
+import { dropdownWidthScopedState } from '../states/dropdownWidthScopedState';
 import { isDropdownOpenScopedState } from '../states/isDropdownOpenScopedState';
 
 export const useDropdownStates = ({ scopeId }: { scopeId: string }) => {
@@ -14,10 +15,17 @@ export const useDropdownStates = ({ scopeId }: { scopeId: string }) => {
     scopeId,
   );
 
+  const [dropdownWidth, setDropdownWidth] = useRecoilScopedStateV2(
+    dropdownWidthScopedState,
+    scopeId,
+  );
+
   return {
     isDropdownOpen,
     setIsDropdownOpen,
     dropdownHotkeyScope,
     setDropdownHotkeyScope,
+    dropdownWidth,
+    setDropdownWidth,
   };
 };

front/src/modules/ui/layout/dropdown/states/dropdownWidthScopedState.ts

@@ -0,0 +1,6 @@
+import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+
+export const dropdownWidthScopedState = createScopedState<number | undefined>({
+  key: 'dropdownWidthScopedState',
+  defaultValue: 160,
+});