wip

cultureamp · Oct 17, 2024 · 3645cb4 · 3645cb4
1 parent 5ec320b
commit 3645cb4
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 4 deletions.
diff --git a/packages/components/src/Filter/FilterBar/context/FilterBarContext.tsx b/packages/components/src/Filter/FilterBar/context/FilterBarContext.tsx
@@ -119,8 +119,10 @@ export const FilterBarProvider = <ValuesMap extends FiltersValues>({
         values: { ...values, [id]: getValidValue(newValue) },
       })
     },
-    showFilter: <Id extends keyof ValuesMap>(id: Id): void =>
-      dispatch({ type: "activate_filter", id }),
+    showFilter: <Id extends keyof ValuesMap>(id: Id): void => {
+      dispatch({ type: "activate_filter", id })
+      dispatch({ type: "set_focus", id })
+    },
     hideFilter: <Id extends keyof ValuesMap>(id: Id): void => {
       dispatch({ type: "deactivate_filter", id })
     },
@@ -132,6 +134,10 @@ export const FilterBarProvider = <ValuesMap extends FiltersValues>({
       })
       dispatch({ type: "update_values", values: {} })
     },
+    setFocus: <Id extends keyof ValuesMap>(id: Id | undefined) => {
+      dispatch({ type: "set_focus", id })
+    },
+    focusId: state.focusId,
   } satisfies FilterBarContextValue<any, ValuesMap>
 
   useEffect(() => {

diff --git a/packages/components/src/Filter/FilterBar/context/reducer/filterBarStateReducer.ts b/packages/components/src/Filter/FilterBar/context/reducer/filterBarStateReducer.ts
@@ -21,6 +21,12 @@ export const filterBarStateReducer = <ValuesMap extends FiltersValues>(
   action: Actions<ValuesMap>
 ): FilterBarState<ValuesMap> => {
   switch (action.type) {
+    case "set_focus":
+      return {
+        ...state,
+        focusId: action.id,
+      }
+
     case "update_values":
       return { ...updateValues(state, action.values) }
 

diff --git a/packages/components/src/Filter/FilterBar/context/reducer/setupFilterBarState.ts b/packages/components/src/Filter/FilterBar/context/reducer/setupFilterBarState.ts
@@ -35,6 +35,7 @@ export const setupFilterBarState = <ValuesMap extends FiltersValues>(
       values,
       dependentFilterIds: new Set(),
       hasUpdatedValues: false,
+      focusId: undefined,
     } as FilterBarState<ValuesMap>
   )
 

diff --git a/packages/components/src/Filter/FilterBar/context/types.ts b/packages/components/src/Filter/FilterBar/context/types.ts
@@ -32,6 +32,7 @@ export type FilterBarState<ValuesMap extends FiltersValues> = {
   activeFilterIds: Set<keyof ValuesMap>
   values: Partial<ValuesMap>
   dependentFilterIds: Set<keyof ValuesMap>
+  focusId?: keyof ValuesMap | undefined
 }
 
 export type ActiveFiltersArray<ValuesMap extends FiltersValues> = Array<

diff --git a/packages/components/src/Filter/FilterBar/subcomponents/FilterBarButton/FilterBarButton.tsx b/packages/components/src/Filter/FilterBar/subcomponents/FilterBarButton/FilterBarButton.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react"
+import React, { forwardRef, useEffect } from "react"
 import { FilterTriggerRef } from "~components/Filter/Filter"
 import { useFilterBarContext } from "~components/Filter/FilterBar/context/FilterBarContext"
 import {
@@ -16,7 +16,17 @@ export const FilterBarButton = forwardRef<
   FilterTriggerRef,
   FilterBarButtonProps
 >(({ filterId, isRemovable = false, ...props }, ref): JSX.Element => {
-  const { hideFilter } = useFilterBarContext()
+  const { hideFilter, focusId, setFocus } = useFilterBarContext()
+
+  useEffect(() => {
+    if (focusId === filterId) {
+      console.log("focusId", focusId, ref)
+      ref.current?.triggerRef?.current.focus()
+      setFocus(undefined)
+    }
+    // console.log("getFocusId", getFocusId(), filterId)
+  }, [focusId])
+  // console.log("getFocusId", gteFocusId())
 
   return isRemovable ? (
     <FilterButtonRemovable