@cdc/core 4.25.1 → 4.25.2-25

package/components/DataTable/DataTable.tsx

@@ -21,6 +21,7 @@ import { TableConfig } from './types/TableConfig'
 import { Column } from '../../types/Column'
 import { pivotData } from '../../helpers/pivotData'
 import { isLegendWrapViewport } from '@cdc/core/helpers/viewports'
+import isRightAlignedTableValue from '@cdc/core/helpers/isRightAlignedTableValue'
 import './data-table.css'
 import _ from 'lodash'
 
@@ -171,7 +172,7 @@ const DataTable = (props: DataTableProps) => {
     if (config.type === 'map') {
       return config.table.caption
         ? config.table.caption
-        : `Data table showing data for the ${mapLookup[config.general.geoType]} figure.`
+        : `Data table showing data for the ${mapLookup[config.general?.geoType]} figure.`
     } else {
       return config.table.caption ? config.table.caption : `Data table showing data for the ${config.type} figure.`
     }
@@ -249,6 +250,22 @@ const DataTable = (props: DataTableProps) => {
       return classes
     }
 
+    const childrenMatrix =
+      config.type === 'map'
+        ? mapCellMatrix({ rows, wrapColumns, ...props, runtimeData, viewport })
+        : chartCellMatrix({ rows, ...props, runtimeData, isVertical, sortBy, hasRowType, viewport })
+
+    // If every value in a column is a number, record the column index so the header and cells can be right-aligned
+    const rightAlignedCols = childrenMatrix.length
+      ? Object.fromEntries(
+          Object.keys(childrenMatrix[0])
+            .filter(
+              i => childrenMatrix.filter(row => isRightAlignedTableValue(row[i])).length === childrenMatrix.length
+            )
+            .map(x => [x, true])
+        )
+      : {}
+
     const TableMediaControls = ({ belowTable }) => {
       return (
         <MediaControls.Section classes={getMediaControlsClasses(belowTable)}>
@@ -266,7 +283,7 @@ const DataTable = (props: DataTableProps) => {
 
     return (
       <ErrorBoundary component='DataTable'>
-        {!config.table.showDownloadLinkBelow && <TableMediaControls />}
+        {config.general?.showDownloadButton && !config.table.showDownloadLinkBelow && <TableMediaControls />}
         <section id={tabbingId.replace('#', '')} className={getClassNames()} aria-label={accessibilityLabel}>
           <SkipTo skipId={skipId} skipMessage='Skip Data Table' />
           {config.table.collapsible !== false && (
@@ -278,18 +295,20 @@ const DataTable = (props: DataTableProps) => {
               viewport={viewport}
               wrapColumns={wrapColumns}
               noData={hasNoData}
-              childrenMatrix={
-                config.type === 'map'
-                  ? mapCellMatrix({ rows, wrapColumns, ...props, runtimeData, viewport })
-                  : chartCellMatrix({ rows, ...props, runtimeData, isVertical, sortBy, hasRowType, viewport })
-              }
+              childrenMatrix={childrenMatrix}
               tableName={config.type}
               caption={caption}
               stickyHeader
               hasRowType={hasRowType}
               headContent={
                 config.type === 'map' ? (
-                  <MapHeader columns={columns} {...props} sortBy={sortBy} setSortBy={setSortBy} />
+                  <MapHeader
+                    columns={columns}
+                    {...props}
+                    sortBy={sortBy}
+                    setSortBy={setSortBy}
+                    rightAlignedCols={rightAlignedCols}
+                  />
                 ) : (
                   <ChartHeader
                     data={runtimeData}
@@ -299,6 +318,7 @@ const DataTable = (props: DataTableProps) => {
                     sortBy={sortBy}
                     setSortBy={setSortBy}
                     viewport={viewport}
+                    rightAlignedCols={rightAlignedCols}
                   />
                 )
               }
@@ -310,6 +330,7 @@ const DataTable = (props: DataTableProps) => {
                 'aria-rowcount': config?.data?.length ? config.data.length : -1,
                 hidden: !expanded
               }}
+              rightAlignedCols={rightAlignedCols}
             />
 
             {/* REGION Data Table */}
@@ -336,7 +357,9 @@ const DataTable = (props: DataTableProps) => {
               )}
           </div>
         </section>
-        {config.table.showDownloadLinkBelow && <TableMediaControls belowTable={true} />}
+        {config.general?.showDownloadButton && config.table.showDownloadLinkBelow && (
+          <TableMediaControls belowTable={true} />
+        )}
         <div id={skipId} className='cdcdataviz-sr-only'>
           Skipped data table.
         </div>

package/components/DataTable/components/ChartHeader.tsx

@@ -5,9 +5,18 @@ import ScreenReaderText from '@cdc/core/components/elements/ScreenReaderText'
 import { SortIcon } from './SortIcon'
 import { getNewSortBy } from '../helpers/getNewSortBy'
 
-type ChartHeaderProps = { data; isVertical; config; setSortBy; sortBy; hasRowType?; viewport }
+type ChartHeaderProps = { data; isVertical; config; setSortBy; sortBy; hasRowType?; viewport; rightAlignedCols }
 
-const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, hasRowType, viewport }: ChartHeaderProps) => {
+const ChartHeader = ({
+  data,
+  isVertical,
+  config,
+  setSortBy,
+  sortBy,
+  hasRowType,
+  viewport,
+  rightAlignedCols
+}: ChartHeaderProps) => {
   const groupBy = config.table?.groupBy
   if (!data) return
   let dataSeriesColumns = getDataSeriesColumns(config, isVertical, data)
@@ -69,10 +78,15 @@ const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, hasRowType,
           const text = getSeriesName(column, config)
           const newSortBy = getNewSortBy(sortBy, column, index)
           const sortByAsc = sortBy.column === column ? sortBy.asc : undefined
+          const isSortedCol = column === sortBy.column && !hasRowType
 
           return (
             <th
-              style={{ minWidth: (config.table.cellMinWidth || 0) + 'px' }}
+              style={{
+                minWidth: (config.table.cellMinWidth || 0) + 'px',
+                textAlign: rightAlignedCols && rightAlignedCols[index] ? 'right' : '',
+                paddingRight: isSortedCol ? '1.3em' : ''
+              }}
               key={`col-header-${column}__${index}`}
               tabIndex={0}
               role='columnheader'
@@ -94,7 +108,7 @@ const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, hasRowType,
                 : null)}
             >
               <ColumnHeadingText text={text} column={column} config={config} />
-              {column === sortBy.column && !hasRowType && <SortIcon ascending={sortByAsc} />}
+              {isSortedCol && <SortIcon ascending={sortByAsc} />}
               <ScreenReaderSortByText sortBy={sortBy} config={config} text={text} />
             </th>
           )
@@ -110,9 +124,14 @@ const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, hasRowType,
           let text = row !== '__series__' ? getChartCellValue(row, column, config, data) : '__series__'
           const newSortBy = getNewSortBy(sortBy, column, index)
           const sortByAsc = sortBy.colIndex === index ? sortBy.asc : undefined
+          const isSortedCol = index === sortBy.colIndex && !hasRowType
           return (
             <th
-              style={{ minWidth: (config.table.cellMinWidth || 0) + 'px' }}
+              style={{
+                minWidth: (config.table.cellMinWidth || 0) + 'px',
+                textAlign: rightAlignedCols && rightAlignedCols[index] ? 'right' : '',
+                paddingRight: isSortedCol ? '1.3em' : ''
+              }}
               key={`col-header-${text}__${index}`}
               tabIndex={0}
               role='columnheader'
@@ -132,7 +151,7 @@ const ChartHeader = ({ data, isVertical, config, setSortBy, sortBy, hasRowType,
                 : null)}
             >
               <ColumnHeadingText text={text} column={column} config={config} />
-              {index === sortBy.colIndex && !hasRowType && <SortIcon ascending={sortByAsc} />}
+              {isSortedCol && <SortIcon ascending={sortByAsc} />}
 
               <ScreenReaderSortByText text={text} config={config} sortBy={sortBy} />
             </th>

package/components/DataTable/components/MapHeader.tsx

@@ -16,7 +16,7 @@ const ColumnHeadingText = ({ text, config }) => {
   return text
 }
 
-const MapHeader = ({ columns, config, indexTitle, sortBy, setSortBy }: MapHeaderProps) => {
+const MapHeader = ({ columns, config, indexTitle, sortBy, setSortBy, rightAlignedCols }: MapHeaderProps) => {
   return (
     <tr>
       {Object.keys(columns)
@@ -35,6 +35,10 @@ const MapHeader = ({ columns, config, indexTitle, sortBy, setSortBy }: MapHeader
           const sortByAsc = sortBy.column === column ? sortBy.asc : undefined
           return (
             <th
+              style={{
+                textAlign: rightAlignedCols && rightAlignedCols[index] ? 'right' : '',
+                paddingRight: '1.3em'
+              }}
               key={`col-header-${column}__${index}`}
               id={column}
               tabIndex={0}

package/components/DataTable/data-table.css

@@ -83,7 +83,7 @@ table.data-table {
     }
     th,
     td {
-      padding: 0.5em 1.3em 0.5em 0.7em;
+      padding: 0.5em 0.7em;
       line-height: normal;
       position: relative;
       text-align: left;

package/components/DataTable/helpers/chartCellMatrix.tsx

@@ -16,7 +16,15 @@ type ChartRowsProps = DataTableProps & {
   hasRowType?: boolean
 }
 
-const chartCellArray = ({ rows, runtimeData, config, isVertical, sortBy, colorScale, hasRowType }: ChartRowsProps): CellMatrix | GroupCellMatrix => {
+const chartCellArray = ({
+  rows,
+  runtimeData,
+  config,
+  isVertical,
+  sortBy,
+  colorScale,
+  hasRowType
+}: ChartRowsProps): CellMatrix | GroupCellMatrix => {
   const groupBy = config.table?.groupBy
   const dataSeriesColumns = getDataSeriesColumns(config, isVertical, runtimeData)
 
@@ -38,7 +46,7 @@ const chartCellArray = ({ rows, runtimeData, config, isVertical, sortBy, colorSc
 
   if (isVertical) {
     if (groupBy) {
-      const cellMatrix: GroupCellMatrix = {}
+      const cellMatrix = new Map()
       rows.forEach(row => {
         let groupKey: string
         let groupValues = []
@@ -49,10 +57,11 @@ const chartCellArray = ({ rows, runtimeData, config, isVertical, sortBy, colorSc
             groupValues.push(getChartCellValue(row, column, config, runtimeData))
           }
         })
-        if (!cellMatrix[groupKey]) {
-          cellMatrix[groupKey] = [groupValues]
+        if (!cellMatrix.has(groupKey)) {
+          cellMatrix.set(groupKey, [groupValues])
         } else {
-          cellMatrix[groupKey].push(groupValues)
+          const currentGroupValues = cellMatrix.get(groupKey)
+          cellMatrix.set(groupKey, [...currentGroupValues, groupValues])
         }
       })
       return cellMatrix

package/components/EditorPanel/Inputs.tsx

@@ -55,6 +55,10 @@ const TextField = memo((props: TextFieldProps) => {
     }
   }, [debouncedValue])
 
+  useEffect(() => {
+    setValue(stateValue) // Update local state when props change
+  }, [stateValue])
+
   let name = subsection ? `${section}-${subsection}-${fieldName}` : `${section}-${subsection}-${fieldName}`
 
   const onChange = e => {

package/components/EditorPanel/VizFilterEditor/VizFilterEditor.tsx

@@ -91,7 +91,7 @@ const VizFilterEditor: React.FC<VizFilterProps> = ({ config, updateField, rawDat
     // Overwrite filterItem.values since thats what we map through in the editor panel
     filterItem.values = updatedValues
     filterItem.orderedValues = updatedValues
-    filterItem.active = updatedValues[0]
+    filterItem.active = filterItem.defaultValue ? filterItem.defaultValue : updatedValues[0]
 
     filterItem.order = 'cust'
 

package/components/Filters/Filters.tsx

@@ -1,5 +1,5 @@
-import { useState, useEffect, useMemo } from 'react'
-import { useId } from 'react'
+import { useState, useEffect, useMemo, useRef, useId } from 'react'
+import _ from 'lodash'
 
 // CDC
 import Button from '../elements/Button'
@@ -11,16 +11,17 @@ import { filterVizData } from '../../helpers/filterVizData'
 import { addValuesToFilters } from '../../helpers/addValuesToFilters'
 import { DimensionsType } from '../../types/Dimensions'
 import NestedDropdown from '../NestedDropdown'
-import _ from 'lodash'
 import { getNestedOptions } from './helpers/getNestedOptions'
 import { applyQueuedActive } from './helpers/applyQueuedActive'
 import { handleSorting } from './helpers/handleSorting'
+import { getWrappingStatuses } from './helpers/filterWrapping'
 
 export const VIZ_FILTER_STYLE = {
   dropdown: 'dropdown',
   nestedDropdown: 'nested-dropdown',
   pill: 'pill',
   tab: 'tab',
+  tabSimple: 'tab-simple',
   tabBar: 'tab bar',
   multiSelect: 'multi-select'
 } as const
@@ -85,7 +86,7 @@ export const useFilters = props => {
     // Overwrite filterItem.values since thats what we map through in the editor panel
     filterItem.values = updatedValues
     filterItem.orderedValues = updatedValues
-    filterItem.active = updatedValues[0]
+    if (!filterItem.active) filterItem.active = filterItem.defaultValue ? filterItem.defaultValue : updatedValues[0]
     filterItem.order = 'cust'
 
     // Update the filters
@@ -226,6 +227,7 @@ export const useFilters = props => {
       if (!filter.values || filter.values.length === 0) {
         filter.values = getUniqueValues(data, filter.columnName)
       }
+
       newFilters[i].active = handleSorting(filter).values[0]
 
       if (filter.setByQueryParameter && queryParams[filter.setByQueryParameter] !== filter.active) {
@@ -282,8 +284,17 @@ const Filters = (props: FilterProps) => {
   const { filters, general, theme, filterBehavior } = visualizationConfig
   const [mobileFilterStyle, setMobileFilterStyle] = useState(false)
   const [selectedFilter, setSelectedFilter] = useState<EventTarget>(null)
+  const [wrappingFilters, setWrappingFilters] = useState({})
   const id = useId()
 
+  const wrappingFilterRefs = useRef({})
+  const filterWrappingStatusesToUpdate = getWrappingStatuses(wrappingFilterRefs, wrappingFilters, filters)
+
+  if (filterWrappingStatusesToUpdate.length) {
+    const validStatuses = filterWrappingStatusesToUpdate.filter(Boolean) as [string, any][]
+    setWrappingFilters({ ...wrappingFilters, ...Object.fromEntries(validStatuses) })
+  }
+
   // useFilters hook provides data and logic for handling various filter functions
   // prettier-ignore
   const {
@@ -297,13 +308,32 @@ const Filters = (props: FilterProps) => {
 
   useEffect(() => {
     if (!dimensions) return
-    if (Number(dimensions[0]) < 768 && filters?.length > 0) {
-      setMobileFilterStyle(true)
-    } else {
-      setMobileFilterStyle(false)
-    }
+    const [width] = dimensions
+
+    const isMobile = Number(width) < 768
+    const isTabSimple = filters?.some(filter => filter.filterStyle === VIZ_FILTER_STYLE.tabSimple)
+
+    const defaultToMobile = isMobile && filters?.length && !isTabSimple
+
+    setMobileFilterStyle(defaultToMobile)
   }, [dimensions])
 
+  useEffect(() => {
+    const noLongerTabSimple = Object.keys(wrappingFilters).filter(columnName => {
+      const filter = filters.find(filter => filter.columnName === columnName)
+      if (!filter) return false
+      return filter.filterStyle !== VIZ_FILTER_STYLE.tabSimple
+    })
+
+    if (!noLongerTabSimple.length) return
+
+    setWrappingFilters(
+      Object.fromEntries(
+        Object.entries(wrappingFilters).filter(([columnName]) => !noLongerTabSimple.includes(columnName))
+      )
+    )
+  }, [filters])
+
   useEffect(() => {
     if (selectedFilter) {
       const el = document.getElementById(selectedFilter.id)
@@ -376,13 +406,17 @@ const Filters = (props: FilterProps) => {
       const DropdownOptions = []
       const Pills = []
       const Tabs = []
+      const isTabSimple = singleFilter.filterStyle === 'tab-simple'
 
-      const { active, queuedActive, label, filterStyle } = singleFilter as VizFilter
+      const { active, queuedActive, label, filterStyle, columnName } = singleFilter as VizFilter
+      const { isDropdown } = wrappingFilters[columnName] || {}
 
       handleSorting(singleFilter)
       singleFilter.values?.forEach((filterOption, index) => {
-        const pillClassList = ['pill', active === filterOption ? 'pill--active' : null, theme && theme]
-        const tabClassList = ['tab', active === filterOption && 'tab--active', theme && theme]
+        const isActive = active === filterOption
+
+        const pillClassList = ['pill', isActive ? 'pill--active' : null, theme && theme]
+        const tabClassList = ['tab', isActive && 'tab--active', theme && theme, isTabSimple && 'tab--simple']
 
         Pills.push(
           <div className='pill__wrapper' key={`pill-${index}`}>
@@ -439,8 +473,8 @@ const Filters = (props: FilterProps) => {
         'form-group',
         mobileFilterStyle ? 'single-filters--dropdown' : `single-filters--${filterStyle}`
       ]
-      const mobileExempt = ['nested-dropdown', 'multi-select'].includes(filterStyle)
-      const showDefaultDropdown = (filterStyle === 'dropdown' || mobileFilterStyle) && !mobileExempt
+      const mobileExempt = ['nested-dropdown', 'multi-select', VIZ_FILTER_STYLE.tabSimple].includes(filterStyle)
+      const showDefaultDropdown = ((filterStyle === 'dropdown' || mobileFilterStyle) && !mobileExempt) || isDropdown
       const [nestedActiveGroup, nestedActiveSubGroup] = useMemo<string[]>(() => {
         if (filterStyle !== 'nested-dropdown') return []
         return (singleFilter.queuedActive || [singleFilter.active, singleFilter.subGrouping?.active]) as [
@@ -448,15 +482,19 @@ const Filters = (props: FilterProps) => {
           string
         ]
       }, [singleFilter])
+      const hideLabelMargin = isTabSimple && !showDefaultDropdown
       return (
-        <div className={classList.join(' ')} key={outerIndex}>
+        <div className={classList.join(' ')} key={outerIndex} ref={el => (wrappingFilterRefs.current[columnName] = el)}>
           <>
             {label && (
-              <label className='font-weight-bold mb-2' htmlFor={`filter-${outerIndex}`}>
+              <label className={`font-weight-bold mb-${hideLabelMargin ? '0' : '2'}`} htmlFor={`filter-${outerIndex}`}>
                 {label}
               </label>
             )}
             {filterStyle === 'tab' && !mobileFilterStyle && Tabs}
+            {filterStyle === 'tab-simple' && !showDefaultDropdown && (
+              <div className='tab-simple-container d-flex w-100'>{Tabs}</div>
+            )}
             {filterStyle === 'pill' && !mobileFilterStyle && Pills}
             {filterStyle === 'tab bar' && !mobileFilterStyle && <TabBar filter={singleFilter} index={outerIndex} />}
             {filterStyle === 'multi-select' && (
@@ -509,7 +547,7 @@ const Filters = (props: FilterProps) => {
       {visualizationConfig.filterIntro && (
         <p className='filters-section__intro-text mb-3'>{visualizationConfig.filterIntro}</p>
       )}
-      <div className='d-flex flex-wrap w-100 mb-4 pb-2 filters-section__wrapper'>
+      <div className='d-flex flex-wrap w-100 mb-4 pb-2 filters-section__wrapper align-items-end'>
         {' '}
         <>
           <Style />

package/components/Filters/helpers/filterWrapping.ts

@@ -0,0 +1,43 @@
+import { VIZ_FILTER_STYLE } from '../Filters'
+
+const WRAPPING_HEIGHT_THRESHOLD_NO_LABEL = 60
+const WRAPPING_HEIGHT_THRESHOLD_WITH_LABEL = 100
+export const getWrappingStatuses = (wrappingFilterRefs, wrappingFilters, allFilters) =>
+  Object.entries(wrappingFilterRefs.current)
+    .map(([columnValue, ref]) => {
+      if (!ref) return false
+
+      const filter = allFilters.find(filter => filter.columnName === columnValue)
+      const { filterStyle, label } = filter || {}
+
+      if (!filterStyle || filterStyle !== VIZ_FILTER_STYLE.tabSimple) return false
+
+      const filterStyleClass = (ref as HTMLElement).className
+        .split(' ')
+        .find(className => className.includes(filterStyle))
+        ?.split('single-filters--')[1]
+
+      const classMatchesStyle = filterStyleClass && filterStyleClass === filterStyle
+
+      if (!classMatchesStyle) return false
+
+      const wrappingState = wrappingFilters[columnValue]
+      const { height, width } = (ref as HTMLElement).getBoundingClientRect()
+      const wrappingThreshold = label ? WRAPPING_HEIGHT_THRESHOLD_WITH_LABEL : WRAPPING_HEIGHT_THRESHOLD_NO_LABEL
+      const isWrapped = height > wrappingThreshold
+
+      if (!wrappingState) return [columnValue, { highestWrappedWidth: isWrapped ? width : 0, isDropdown: isWrapped }]
+
+      const { highestWrappedWidth, isDropdown: wasDropdown } = wrappingState
+      const isDropdown = width <= highestWrappedWidth
+      const widthIsLarger = width > highestWrappedWidth
+      const largestWidth = Math.max(highestWrappedWidth, width)
+
+      if ((isDropdown || isWrapped) && !wasDropdown) {
+        return [columnValue, { highestWrappedWidth: largestWidth, isDropdown: true }]
+      }
+      if (wasDropdown && widthIsLarger) {
+        return [columnValue, { highestWrappedWidth, isDropdown: false }]
+      }
+    })
+    .filter(Boolean)

package/components/Filters/helpers/handleSorting.ts

@@ -18,6 +18,7 @@ export const handleSorting = singleFilter => {
   }
 
   singleFilter.values = singleFilterValues.sort(sort)
+  singleFilter.orderedValues = singleFilterValues.sort(sort)
 
   return singleFilter
 }

package/components/Filters/helpers/tests/handleSorting.test.ts

@@ -16,6 +16,32 @@ describe('handleSorting', () => {
     expect(result.values).toEqual(['value1', 'value2', 'value3'])
   })
 
+  it('should sort orderedValues in asc order if order is asc"', () => {
+    const singleFilter = {
+      values: ['value3', 'value1', 'value2'],
+      orderedValues: ['value2', 'value1', 'value3'],
+      order: 'asc',
+      filterStyle: 'nested-dropdown'
+    }
+
+    const result = handleSorting(singleFilter)
+
+    expect(result.orderedValues).toEqual(['value1', 'value2', 'value3'])
+  })
+
+  it('should sort orderedValues in desc order if order is desc"', () => {
+    const singleFilter = {
+      values: ['value3', 'value1', 'value2'],
+      orderedValues: ['value1', 'value2', 'value1'],
+      order: 'desc',
+      filterStyle: 'nested-dropdown'
+    }
+
+    const result = handleSorting(singleFilter)
+
+    expect(result.orderedValues).toEqual(['value3', 'value2', 'value1'])
+  })
+
   it('should sort values in ascending order by default', () => {
     const singleFilter = {
       values: ['value3', 'value1', 'value2'],

package/components/NestedDropdown/NestedDropdown.tsx

@@ -6,12 +6,13 @@ import Loader from '../Loader'
 
 const Options: React.FC<{
   subOptions: ValueTextPair[]
+  handleBlur: React.FocusEventHandler<HTMLLIElement>
   filterIndex: number
   label: string
   handleSubGroupSelect: Function
   userSelectedLabel: string
   userSearchTerm: string
-}> = ({ subOptions, filterIndex, label, handleSubGroupSelect, userSelectedLabel, userSearchTerm }) => {
+}> = ({ subOptions, handleBlur, filterIndex, label, handleSubGroupSelect, userSelectedLabel, userSearchTerm }) => {
   const [isTierOneExpanded, setIsTierOneExpanded] = useState(true)
   const checkMark = <>&#10004;</>
 
@@ -45,6 +46,7 @@ const Options: React.FC<{
         tabIndex={0}
         aria-label={label}
         onClick={handleGroupClick}
+        onBlur={handleBlur}
         onKeyUp={handleKeyUp}
         className={`nested-dropdown-group-${filterIndex}`}
       >
@@ -132,6 +134,7 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
   }, [activeGroup, activeSubGroup])
   const [inputHasFocus, setInputHasFocus] = useState(false)
   const [isListOpened, setIsListOpened] = useState(false)
+  const nestedDropdownRef = useRef(null)
   const searchInput = useRef(null)
   const searchDropdown = useRef(null)
 
@@ -225,24 +228,34 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
     setUserSearchTerm(newSearchTerm)
   }
 
-  const handleOnBlur = e => {
+  const handleOnBlur = (e: React.FocusEvent<HTMLLIElement, Element>): void => {
     if (
       e.relatedTarget === null ||
       ![
         `nested-dropdown-${filterIndex}`,
         `nested-dropdown-group-${filterIndex}`,
-        `selectable-item-${filterIndex}`
+        `selectable-item-${filterIndex}`,
+        `main-nested-dropdown-container-${filterIndex}`
       ].includes(e.relatedTarget.className)
     ) {
       setInputHasFocus(false)
       setIsListOpened(false)
+    } else {
+      ;(e.relatedTarget as HTMLElement).focus()
     }
   }
 
+  function handleBlur(nestedDropdown, handleOnBlur) {
+    nestedDropdown?.addEventListener('blur', handleOnBlur)
+  }
+  handleBlur(searchInput.current, e => handleOnBlur(e))
+  handleBlur(searchDropdown.current, e => handleOnBlur(e))
+
   return (
     <>
       <div
         id={dropdownId}
+        ref={nestedDropdownRef}
         className={`nested-dropdown nested-dropdown-${filterIndex} ${isListOpened ? 'open-filter' : ''}`}
         onKeyUp={handleKeyUp}
       >
@@ -268,7 +281,6 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
               if (inputHasFocus) setIsListOpened(!isListOpened)
             }}
             onFocus={() => setInputHasFocus(true)}
-            onBlur={e => handleOnBlur(e)}
           />
           <span className='list-arrow' aria-hidden={true}>
             <Icon display='caretDown' />
@@ -282,7 +294,7 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
           aria-labelledby='main-nested-dropdown'
           aria-expanded={isListOpened}
           ref={searchDropdown}
-          className={`main-nested-dropdown-container ${isListOpened ? '' : 'hide'}`}
+          className={`main-nested-dropdown-container-${filterIndex}${isListOpened ? '' : ' hide'}`}
         >
           {filterOptions.length
             ? filterOptions.map(([group, subgroup], index) => {
@@ -291,6 +303,7 @@ const NestedDropdown: React.FC<NestedDropdownProps> = ({
                 return (
                   <Options
                     key={groupTextValue + '_' + index}
+                    handleBlur={handleOnBlur}
                     subOptions={subgroup}
                     filterIndex={filterIndex}
                     label={groupTextValue}

package/components/NestedDropdown/nesteddropdown.styles.css

@@ -29,7 +29,7 @@
     }
   }
 
-  .main-nested-dropdown-container,
+  [class^='main-nested-dropdown-container-'],
   .nested-dropdown-input-container {
     border: 1px solid var(--cool-gray-10);
     min-width: 200px;
@@ -75,7 +75,7 @@
     }
   }
 
-  & .main-nested-dropdown-container {
+  & [class^='main-nested-dropdown-container-'] {
     max-height: 375px;
     overflow-y: scroll;
     position: absolute;