fix: LSDV-3025-12: Fully hide the dropdown component when closing it (#1344)

* fix: LSDV-3025-12: Fully hide the dropdown component when closing it

* set timeout to 0 and rollback the timeout in the dropdown component

* fix: LSDV-5031: Adding new region after filter it is not filtered (#1352)

* fix: lsdv-5031: if filter contains all regions it should be null

* filter list applied to new additions

---------

Co-authored-by: Travis1282 <[email protected]>

---------

Co-authored-by: juliosgarbi <[email protected]>
Co-authored-by: Travis Clark <[email protected]>
Co-authored-by: Travis1282 <[email protected]>

Author: juliosgarbi

src/common/Dropdown/DropdownComponent.tsx

@@ -23,6 +23,7 @@ export interface DropdownProps {
   enabled?: boolean;
   inline?: boolean;
   className?: string;
+  dataTestId?: string;
   style?: CSSProperties;
   children?: JSX.Element;
   onToggle?: (visible: boolean) => void;
@@ -197,6 +198,7 @@ export const Dropdown = forwardRef<DropdownRef, DropdownProps>(({
     <Block
       ref={dropdown}
       name="dropdown"
+      data-testid={props.dataTestId}
       mix={[props.className, visibilityClasses]}
       style={compositeStyles}
       onClick={(e: MouseEvent) => e.stopPropagation()}

src/common/Dropdown/DropdownTrigger.tsx

@@ -28,6 +28,7 @@ interface DropdownTriggerProps extends DropdownProps {
   tag?: string;
   dropdown?: RefObject<JSX.Element>;
   content?: JSX.Element;
+  dataTestId?: string;
   toggle?: boolean;
   closeOnClickOutside?: boolean;
   disabled?: boolean;

src/components/Filter/Filter.tsx

@@ -14,6 +14,7 @@ export const Filter: FC<FilterInterface> = ({
   availableFilters,
   filterData,
   onChange,
+  animated = true,
 }) => {
   const [filterList, setFilterList] = useState<FilterListInterface[]>([]);
 
@@ -106,6 +107,8 @@ export const Filter: FC<FilterInterface> = ({
   return (
     <Dropdown.Trigger
       content={renderFilter}
+      dataTestId={'dropdown'}
+      animated={animated}
     >
       <Button data-cy={'filter-button'} type="text" style={{ padding: 0, whiteSpace: 'nowrap' }}>
         <Elem name={'icon'}>

src/components/Filter/FilterInterfaces.tsx

@@ -7,6 +7,8 @@ export interface FilterInterface {
   availableFilters: AvailableFiltersInterface[];
   onChange: (filter: any) => void;
   filterData: any;
+
+  animated?: boolean;
 }
 
 export interface FilterListInterface {

src/components/Filter/__tests__/Filter.test.tsx

@@ -125,6 +125,46 @@ describe('Filter', () => {
     expect(filteredContent).toStrictEqual([{ labelName: 'Car' }, { labelName: 'AirCar' }]) ;
   });
 
+  test('Should hide dropdown filter', async () => {
+    const filter = render(<Filter
+      onChange={mockOnChange}
+      filterData={filterData}
+      animated={false}
+      availableFilters={[{
+        label: 'Annotation results',
+        path: 'labelName',
+        type: 'String',
+      },
+      {
+        label: 'Confidence score',
+        path: 'score',
+        type: 'Number',
+      }]}
+    />);
+
+    const FilterButton = await filter.getByText('Filter');
+
+    fireEvent.click(FilterButton);
+
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    const dropdown = await filter.getByTestId('dropdown');
+
+    expect(dropdown.classList.contains('dm-visible')).toBe(true);
+
+    const AddButton = await filter.getByText('Add Filter');
+
+    fireEvent.click(AddButton);
+
+    fireEvent.click(FilterButton);
+
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    expect(dropdown.classList.contains('dm-before-appear')).toBe(false);
+    expect(dropdown.classList.contains('dm-visible')).toBe(false);
+    expect(dropdown.classList.contains('dm-before-disappear')).toBe(false);
+  });
+
   test('Should show filter length badge', () => {
     const filter = render(<Filter
       onChange={mockOnChange}

src/utils/transition.ts

@@ -36,6 +36,6 @@ export const aroundTransition = (element: HTMLElement, {
 
     await beforeTransition?.(element);
 
-    setTimeout(() => transition?.(element), 30);
+    setTimeout(() => transition?.(element), 0);
   });
 };