@defra/interactive-map 0.0.22-alpha → 0.0.23-alpha

package/plugins/interact/src/InteractInit.jsx

@@ -1,11 +1,24 @@
-import { useEffect, useRef } from 'react'
+import { useEffect } from 'react'
 import { EVENTS } from '../../../src/config/events.js'
 import { useInteractionHandlers } from './hooks/useInteractionHandlers.js'
+import { useMapItemList } from './hooks/useMapItemList.js'
 import { useHighlightSync } from './hooks/useHighlightSync.js'
 import { useHoverCursor } from './hooks/useHoverCursor.js'
-import { attachEvents } from './events.js'
+import { useCrossHairVisibility } from './hooks/useCrossHairVisibility.js'
+import { useAttachEvents } from './hooks/useAttachEvents.js'
 import { isSelectMarkerOnly } from './utils/interactionModes.js'
 
+function useListboxCapable ({ enabled, interactionModes, markers, layers, eventBus }) {
+  useEffect(() => {
+    if (!enabled) { return }
+    const hasLabeledMarkers = interactionModes?.includes('selectMarker') && markers.items.some(m => m.label)
+    const hasFeatureLayers = interactionModes?.includes('selectFeature') && layers.some(l => l.labelProperty)
+    if (hasLabeledMarkers || hasFeatureLayers) {
+      eventBus.emit('interact:listboxcapable')
+    }
+  }, [enabled, interactionModes, markers, layers, eventBus])
+}
+
 export const InteractInit = ({
   appState,
   mapState,
@@ -14,14 +27,14 @@ export const InteractInit = ({
   mapProvider,
   pluginState
 }) => {
-  const { interfaceType } = appState
-  const { dispatch, enabled, selectedFeatures, selectionBounds, interactionModes, layers } = pluginState
+  const { dispatch, enabled, selectedFeatures, interactionModes, layers } = pluginState
   const { eventBus, closeApp } = services
-  const { crossHair, mapStyle } = mapState
+  const { crossHair, mapStyle, markers } = mapState
 
-  const isTouchOrKeyboard = ['touch', 'keyboard'].includes(interfaceType)
   const selectMarkerOnly = isSelectMarkerOnly(interactionModes)
 
+  useMapItemList({ mapState, pluginState, services, mapProvider })
+
   // Core interaction logic (click > select/marker)
   const { handleInteraction } = useInteractionHandlers({
     appState,
@@ -31,34 +44,12 @@ export const InteractInit = ({
     mapProvider
   })
 
-  // Refs updated synchronously each render — keeps callbacks fresh without re-attaching events
-  const handleInteractionRef = useRef(handleInteraction)
-  handleInteractionRef.current = handleInteraction
-
-  const pluginStateRef = useRef(pluginState)
-  pluginStateRef.current = pluginState
-
-  const appStateRef = useRef(appState)
-  appStateRef.current = appState
-
-  // Defer click handling by one macrotask so any click that triggered the enable
-  // (e.g. finishing a draw gesture) fires before this handler is live.
-  // Managed separately from attachEvents so re-runs of that effect don't reset it —
-  // only resets when enabled actually changes.
-  const clickReadyRef = useRef(false)
-  useEffect(() => {
-    clickReadyRef.current = false
-    const timer = setTimeout(() => { clickReadyRef.current = true }, 0)
-    return () => clearTimeout(timer)
-  }, [pluginState.enabled])
-
   // Highlight features and sync state selectedBounds from mapProvider
   useHighlightSync({
     mapProvider,
     mapStyle,
     pluginState,
     selectedFeatures,
-    selectionBounds,
     dispatch,
     events: EVENTS,
     eventBus
@@ -69,36 +60,13 @@ export const InteractInit = ({
     eventBus.emit('interact:active', { active: enabled, interactionModes })
   }, [enabled, interactionModes])
 
-  useHoverCursor(mapProvider, enabled, interactionModes, layers)
-
-  // Toggle target marker visibility
-  useEffect(() => {
-    if (enabled && isTouchOrKeyboard && !(interfaceType === 'touch' && selectMarkerOnly)) {
-      crossHair.fixAtCenter()
-    } else {
-      crossHair.hide()
-    }
-  }, [enabled, interfaceType, interactionModes])
+  useListboxCapable({ enabled, interactionModes, markers, layers, eventBus })
 
-  useEffect(() => {
-    if (!pluginState.enabled) {
-      return undefined // Explicit return
-    }
+  useHoverCursor(mapProvider, enabled, interactionModes, layers)
 
-    const cleanupEvents = attachEvents({
-      getAppState: () => appStateRef.current,
-      mapState,
-      getPluginState: () => pluginStateRef.current,
-      buttonConfig,
-      events: EVENTS,
-      eventBus,
-      handleInteraction: (event) => handleInteractionRef.current(event),
-      clickReadyRef,
-      closeApp
-    })
+  useCrossHairVisibility({ crossHair, enabled, selectMarkerOnly, appState })
 
-    return cleanupEvents
-  }, [pluginState.enabled, buttonConfig, eventBus, closeApp])
+  useAttachEvents({ pluginState, appState, mapState, buttonConfig, eventBus, handleInteraction, closeApp })
 
   return null
 }

package/plugins/interact/src/InteractInit.test.js

@@ -1,48 +1,50 @@
-import { act, render } from '@testing-library/react'
+import { render } from '@testing-library/react'
 import { EVENTS } from '../../../src/config/events.js'
 import { InteractInit } from './InteractInit.jsx'
 import { useInteractionHandlers } from './hooks/useInteractionHandlers.js'
 import { useHighlightSync } from './hooks/useHighlightSync.js'
 import { useHoverCursor } from './hooks/useHoverCursor.js'
-import { attachEvents } from './events.js'
+import { useMapItemList } from './hooks/useMapItemList.js'
+
+const LISTBOX_CAPABLE = 'interact:listboxcapable'
 
 jest.mock('./hooks/useInteractionHandlers.js')
 jest.mock('./hooks/useHighlightSync.js')
 jest.mock('./hooks/useHoverCursor.js')
-jest.mock('./events.js')
-
-describe('InteractInit', () => {
-  let props
-  let handleInteractionMock
-  let cleanupMock
-
-  beforeEach(() => {
-    handleInteractionMock = jest.fn()
-    cleanupMock = jest.fn()
-
-    useInteractionHandlers.mockReturnValue({ handleInteraction: handleInteractionMock })
-    useHighlightSync.mockReturnValue(undefined)
-    useHoverCursor.mockReturnValue(undefined)
-    attachEvents.mockReturnValue(cleanupMock)
-
-    props = {
-      appState: { interfaceType: 'mouse', layoutRefs: { viewportRef: { current: null } } },
-      mapState: { crossHair: { fixAtCenter: jest.fn(), hide: jest.fn() }, mapStyle: {} },
-      services: { eventBus: { emit: jest.fn() }, closeApp: jest.fn() },
-      buttonConfig: {},
-      mapProvider: { setHoverCursor: jest.fn() },
-      pluginState: {
-        dispatch: jest.fn(),
-        enabled: true,
-        selectedFeatures: [],
-        selectedMarkers: [],
-        selectionBounds: {},
-        interactionModes: ['selectFeature'],
-        layers: []
-      }
+jest.mock('./hooks/useMapItemList.js')
+jest.mock('./hooks/useCrossHairVisibility.js')
+jest.mock('./hooks/useAttachEvents.js')
+
+let props
+let handleInteractionMock
+
+beforeEach(() => {
+  handleInteractionMock = jest.fn()
+
+  useInteractionHandlers.mockReturnValue({ handleInteraction: handleInteractionMock })
+  useHighlightSync.mockReturnValue(undefined)
+  useHoverCursor.mockReturnValue(undefined)
+  useMapItemList.mockReturnValue(undefined)
+
+  props = {
+    appState: { interfaceType: 'mouse', layoutRefs: { viewportRef: { current: document.createElement('div') }, appContainerRef: { current: document.createElement('div') } } },
+    mapState: { crossHair: { fixAtCenter: jest.fn(), hide: jest.fn() }, mapStyle: {} },
+    services: { eventBus: { emit: jest.fn() }, closeApp: jest.fn() },
+    buttonConfig: {},
+    mapProvider: { setHoverCursor: jest.fn() },
+    pluginState: {
+      dispatch: jest.fn(),
+      enabled: true,
+      selectedFeatures: [],
+      selectedMarkers: [],
+      selectionBounds: {},
+      interactionModes: ['selectFeature'],
+      layers: []
     }
-  })
+  }
+})
 
+describe('InteractInit — hook delegation', () => {
   it('calls useInteractionHandlers with correct arguments', () => {
     render(<InteractInit {...props} />)
     expect(useInteractionHandlers).toHaveBeenCalledWith(expect.objectContaining({
@@ -66,44 +68,9 @@ describe('InteractInit', () => {
       eventBus: props.services.eventBus
     }))
   })
+})
 
-  it('fixes or hides crossHair based on interfaceType and enabled', () => {
-    // enabled true + non-touch = hide
-    render(<InteractInit {...props} />)
-    expect(props.mapState.crossHair.hide).toHaveBeenCalled()
-    expect(props.mapState.crossHair.fixAtCenter).not.toHaveBeenCalled()
-
-    // touch interface
-    props.appState.interfaceType = 'touch'
-    render(<InteractInit {...props} />)
-    expect(props.mapState.crossHair.fixAtCenter).toHaveBeenCalled()
-  })
-
-  it('attaches events and returns cleanup', () => {
-    const { unmount } = render(<InteractInit {...props} />)
-    expect(attachEvents).toHaveBeenCalledWith(expect.objectContaining({
-      getAppState: expect.any(Function),
-      getPluginState: expect.any(Function),
-      handleInteraction: expect.any(Function),
-      mapState: props.mapState,
-      buttonConfig: props.buttonConfig,
-      events: EVENTS,
-      eventBus: props.services.eventBus,
-      closeApp: props.services.closeApp
-    }))
-
-    const { getAppState, getPluginState, handleInteraction } = attachEvents.mock.calls.at(-1)[0]
-    expect(getAppState()).toMatchObject(props.appState)
-    expect(getPluginState()).toMatchObject({ enabled: props.pluginState.enabled })
-
-    const event = { point: {}, coords: [] }
-    handleInteraction(event)
-    expect(handleInteractionMock).toHaveBeenCalledWith(event)
-
-    unmount()
-    expect(cleanupMock).toHaveBeenCalled()
-  })
-
+describe('InteractInit — event bus emissions', () => {
   it('emits interact:active with active state and interactionModes on enable', () => {
     render(<InteractInit {...props} />)
     expect(props.services.eventBus.emit).toHaveBeenCalledWith('interact:active', {
@@ -112,20 +79,31 @@ describe('InteractInit', () => {
     })
   })
 
-  it('enables click handling after a macrotask', () => {
-    jest.useFakeTimers()
-    render(<InteractInit {...props} />)
-    act(() => jest.runAllTimers())
-    jest.useRealTimers()
+  it('emits interact:listboxcapable when enabled with a feature layer that has a labelProperty', () => {
+    const capableProps = {
+      ...props,
+      pluginState: { ...props.pluginState, interactionModes: ['selectFeature'], layers: [{ layerId: 'myLayer', labelProperty: 'name' }] }
+    }
+    render(<InteractInit {...capableProps} />)
+    expect(capableProps.services.eventBus.emit).toHaveBeenCalledWith(LISTBOX_CAPABLE)
+  })
+
+  it('emits interact:listboxcapable when enabled with a labeled marker', () => {
+    const capableProps = {
+      ...props,
+      mapState: { ...props.mapState, markers: { items: [{ id: 'm1', label: 'My marker' }] } },
+      pluginState: { ...props.pluginState, interactionModes: ['selectMarker'] }
+    }
+    render(<InteractInit {...capableProps} />)
+    expect(capableProps.services.eventBus.emit).toHaveBeenCalledWith(LISTBOX_CAPABLE)
   })
 
-  it('does not attach events if plugin not enabled', () => {
+  it('does not emit interact:listboxcapable when disabled', () => {
     const disabledProps = {
       ...props,
-      pluginState: { ...props.pluginState, enabled: false } // fresh object
+      pluginState: { ...props.pluginState, enabled: false, interactionModes: ['selectFeature'], layers: [{ layerId: 'myLayer', labelProperty: 'name' }] }
     }
-    attachEvents.mockClear() // ensure previous calls don't interfere
     render(<InteractInit {...disabledProps} />)
-    expect(attachEvents).not.toHaveBeenCalled()
+    expect(disabledProps.services.eventBus.emit).not.toHaveBeenCalledWith(LISTBOX_CAPABLE)
   })
 })

package/plugins/interact/src/defaults.js

@@ -2,8 +2,6 @@ export const DEFAULTS = {
   tolerance: 10,
   interactionModes: ['selectMarker'],
   multiSelect: false,
-  contiguous: false,
   deselectOnClickOutside: false,
-  marker: {},
-  selectedStrokeWidth: 3
+  marker: {}
 }

package/plugins/interact/src/hooks/useAttachEvents.js

@@ -0,0 +1,46 @@
+import { useEffect, useRef } from 'react'
+import { EVENTS } from '../../../../src/config/events.js'
+import { attachEvents } from '../events.js'
+
+export function useAttachEvents ({ pluginState, appState, mapState, buttonConfig, eventBus, handleInteraction, closeApp }) {
+  // Refs updated synchronously each render — keeps callbacks fresh without re-attaching events
+  const handleInteractionRef = useRef(handleInteraction)
+  handleInteractionRef.current = handleInteraction
+
+  const pluginStateRef = useRef(pluginState)
+  pluginStateRef.current = pluginState
+
+  const appStateRef = useRef(appState)
+  appStateRef.current = appState
+
+  // Defer click handling by one macrotask so any click that triggered the enable
+  // (e.g. finishing a draw gesture) fires before this handler is live.
+  // Managed separately from attachEvents so re-runs of that effect don't reset it —
+  // only resets when enabled actually changes.
+  const clickReadyRef = useRef(false)
+  useEffect(() => {
+    clickReadyRef.current = false
+    const timer = setTimeout(() => { clickReadyRef.current = true }, 0)
+    return () => clearTimeout(timer)
+  }, [pluginState.enabled])
+
+  useEffect(() => {
+    if (!pluginState.enabled) {
+      return undefined
+    }
+
+    const cleanupEvents = attachEvents({
+      getAppState: () => appStateRef.current,
+      mapState,
+      getPluginState: () => pluginStateRef.current,
+      buttonConfig,
+      events: EVENTS,
+      eventBus,
+      handleInteraction: (event) => handleInteractionRef.current(event),
+      clickReadyRef,
+      closeApp
+    })
+
+    return cleanupEvents
+  }, [pluginState.enabled, buttonConfig, eventBus, closeApp])
+}

package/plugins/interact/src/hooks/useAttachEvents.test.js

@@ -0,0 +1,65 @@
+import { act, renderHook } from '@testing-library/react'
+import { useAttachEvents } from './useAttachEvents.js'
+import { attachEvents } from '../events.js'
+import { EVENTS } from '../../../../src/config/events.js'
+
+jest.mock('../events.js')
+
+let props
+let cleanupMock
+let handleInteractionMock
+
+beforeEach(() => {
+  jest.clearAllMocks()
+  cleanupMock = jest.fn()
+  handleInteractionMock = jest.fn()
+  attachEvents.mockReturnValue(cleanupMock)
+
+  props = {
+    pluginState: { enabled: true },
+    appState: { interfaceType: 'mouse' },
+    mapState: { mapStyle: {} },
+    buttonConfig: {},
+    eventBus: { emit: jest.fn() },
+    closeApp: jest.fn(),
+    handleInteraction: handleInteractionMock
+  }
+})
+
+describe('useAttachEvents', () => {
+  it('attaches events and returns cleanup', () => {
+    const { unmount } = renderHook(() => useAttachEvents(props))
+    expect(attachEvents).toHaveBeenCalledWith(expect.objectContaining({
+      getAppState: expect.any(Function),
+      getPluginState: expect.any(Function),
+      handleInteraction: expect.any(Function),
+      mapState: props.mapState,
+      buttonConfig: props.buttonConfig,
+      events: EVENTS,
+      eventBus: props.eventBus,
+      closeApp: props.closeApp
+    }))
+
+    const { getAppState, getPluginState, handleInteraction } = attachEvents.mock.calls.at(-1)[0]
+    expect(getAppState()).toBe(props.appState)
+    expect(getPluginState()).toMatchObject({ enabled: props.pluginState.enabled })
+
+    handleInteraction({ point: {}, coords: [] })
+    expect(handleInteractionMock).toHaveBeenCalled()
+
+    unmount()
+    expect(cleanupMock).toHaveBeenCalled()
+  })
+
+  it('enables click handling after a macrotask', () => {
+    jest.useFakeTimers()
+    renderHook(() => useAttachEvents(props))
+    act(() => jest.runAllTimers())
+    jest.useRealTimers()
+  })
+
+  it('does not attach events if plugin not enabled', () => {
+    renderHook(() => useAttachEvents({ ...props, pluginState: { enabled: false } }))
+    expect(attachEvents).not.toHaveBeenCalled()
+  })
+})

package/plugins/interact/src/hooks/useCrossHairVisibility.js

@@ -0,0 +1,47 @@
+import { useCallback, useEffect, useRef } from 'react'
+import { getInterfaceType, subscribeToInterfaceChangesImmediate } from '../../../../src/utils/detectInterfaceType.js'
+
+export function useCrossHairVisibility ({ crossHair, enabled, selectMarkerOnly, appState }) {
+  const enabledRef = useRef(enabled)
+  enabledRef.current = enabled
+  const selectMarkerOnlyRef = useRef(selectMarkerOnly)
+  selectMarkerOnlyRef.current = selectMarkerOnly
+  const crossHairRef = useRef(crossHair)
+  crossHairRef.current = crossHair
+  const listboxFocusRef = useRef(false)
+
+  const updateCrossHair = useCallback(() => {
+    const type = getInterfaceType()
+    const isToK = ['touch', 'keyboard'].includes(type)
+    if (enabledRef.current && !listboxFocusRef.current && isToK && !(type === 'touch' && selectMarkerOnlyRef.current)) {
+      crossHairRef.current.fixAtCenter()
+    } else {
+      crossHairRef.current.hide()
+    }
+  }, [])
+
+  // Toggle target marker visibility on enabled/interactionModes changes
+  useEffect(() => {
+    updateCrossHair()
+  }, [enabled, selectMarkerOnly, updateCrossHair])
+
+  // Toggle target marker visibility immediately on interface type change (no 150ms React delay)
+  useEffect(() => {
+    return subscribeToInterfaceChangesImmediate(updateCrossHair)
+  }, [updateCrossHair])
+
+  // Hide crosshair when listbox has focus
+  useEffect(() => {
+    const container = appState.layoutRefs?.appContainerRef?.current
+    if (!container) { return undefined }
+    const handleFocusIn = (e) => {
+      const inListbox = !!e.target.closest('[role="listbox"], [role="option"]')
+      if (listboxFocusRef.current !== inListbox) {
+        listboxFocusRef.current = inListbox
+        updateCrossHair()
+      }
+    }
+    container.addEventListener('focusin', handleFocusIn)
+    return () => { container.removeEventListener('focusin', handleFocusIn) }
+  }, [appState.layoutRefs, updateCrossHair])
+}

package/plugins/interact/src/hooks/useCrossHairVisibility.test.js

@@ -0,0 +1,54 @@
+import { act, renderHook } from '@testing-library/react'
+import { useCrossHairVisibility } from './useCrossHairVisibility.js'
+import { getInterfaceType } from '../../../../src/utils/detectInterfaceType.js'
+
+jest.mock('../../../../src/utils/detectInterfaceType.js', () => ({
+  getInterfaceType: jest.fn(() => 'mouse'),
+  subscribeToInterfaceChangesImmediate: jest.fn(() => () => {})
+}))
+
+let crossHair
+let appState
+
+beforeEach(() => {
+  jest.clearAllMocks()
+  crossHair = { fixAtCenter: jest.fn(), hide: jest.fn() }
+  appState = { layoutRefs: { appContainerRef: { current: document.createElement('div') } } }
+  getInterfaceType.mockReturnValue('mouse')
+})
+
+describe('useCrossHairVisibility', () => {
+  it('skips listbox focus listeners when appContainerRef is null', () => {
+    appState.layoutRefs.appContainerRef = { current: null }
+    renderHook(() => useCrossHairVisibility({ crossHair, enabled: true, selectMarkerOnly: false, appState }))
+    expect(crossHair.hide).toHaveBeenCalled()
+  })
+
+  it('shows crosshair on touch/keyboard and hides when listbox has focus', () => {
+    const container = appState.layoutRefs.appContainerRef.current
+    getInterfaceType.mockReturnValue('touch')
+    renderHook(() => useCrossHairVisibility({ crossHair, enabled: true, selectMarkerOnly: false, appState }))
+
+    expect(crossHair.fixAtCenter).toHaveBeenCalled()
+
+    // Focus moves into listbox — hide
+    const listboxEl = document.createElement('div')
+    listboxEl.setAttribute('role', 'listbox')
+    container.appendChild(listboxEl)
+    act(() => listboxEl.dispatchEvent(new FocusEvent('focusin', { bubbles: true })))
+    expect(crossHair.hide).toHaveBeenCalled()
+
+    // Second focusin still inside listbox — no-op (state unchanged)
+    const listboxEl2 = document.createElement('div')
+    listboxEl2.setAttribute('role', 'listbox')
+    container.appendChild(listboxEl2)
+    act(() => listboxEl2.dispatchEvent(new FocusEvent('focusin', { bubbles: true })))
+    expect(crossHair.hide).toHaveBeenCalledTimes(1)
+
+    // Focus moves back out of listbox — show again
+    const otherEl = document.createElement('div')
+    container.appendChild(otherEl)
+    act(() => otherEl.dispatchEvent(new FocusEvent('focusin', { bubbles: true })))
+    expect(crossHair.fixAtCenter).toHaveBeenCalledTimes(2)
+  })
+})

package/plugins/interact/src/hooks/useHighlightSync.js

@@ -1,6 +1,18 @@
 import { useEffect, useMemo } from 'react'
 import { buildStylesMap } from '../utils/buildStylesMap.js'
 
+/**
+ * Keeps map highlight rendering in sync with the current selection and keyboard-active item.
+ *
+ * Calls mapProvider.updateHighlightedFeatures whenever selectedFeatures or listboxActiveItem
+ * changes, passing selected features (shown with the selection ring) and the active item
+ * (shown with the keyboard cursor ring) as separate arguments so the provider can style them
+ * differently. Also re-applies highlights after a map style reload, since highlight layers
+ * are removed when the base style changes.
+ *
+ * Dispatches UPDATE_SELECTED_BOUNDS with the bounding box returned by the provider so
+ * downstream consumers (e.g. interact:done) receive up-to-date bounds.
+ */
 export const useHighlightSync = ({
   mapProvider,
   mapStyle,
@@ -10,7 +22,7 @@ export const useHighlightSync = ({
   events,
   eventBus
 }) => {
-  const { layers } = pluginState
+  const { layers, listboxActiveItem } = pluginState
 
   // Memoize stylesMap so it only recalculates when style or layers change
   const stylesMap = useMemo(() => {
@@ -22,7 +34,10 @@ export const useHighlightSync = ({
 
   // Force re-application of all selected features
   const updateHighlightedFeatures = () => {
-    const bounds = mapProvider.updateHighlightedFeatures?.(selectedFeatures, stylesMap)
+    const activeFeatures = listboxActiveItem
+      ? [{ featureId: listboxActiveItem.featureId, layerId: listboxActiveItem.layerId, idProperty: listboxActiveItem.idProperty, geometry: listboxActiveItem.geometry }]
+      : []
+    const bounds = mapProvider.updateHighlightedFeatures?.(selectedFeatures, activeFeatures, stylesMap)
 
     dispatch({
       type: 'UPDATE_SELECTED_BOUNDS',
@@ -31,18 +46,25 @@ export const useHighlightSync = ({
   }
 
   useEffect(() => {
-    if (!mapProvider || !selectedFeatures || !stylesMap) {
+    if (!mapProvider || !stylesMap) {
       return undefined // Explicit return to match the cleanup function return below
     }
 
-    // Update updateHighlightedFeatures on interaction
     updateHighlightedFeatures()
 
-    // Update updateHighlightedFeatures on stylechange
-    eventBus.on(events.MAP_DATA_CHANGE, updateHighlightedFeatures)
+    // Re-apply after style reload — highlight layers are removed when style reloads.
+    // MAP_STYLE_CHANGE fires as soon as the new style is ready, before any plugin has
+    // re-added its layers, so we register a one-time MAP_DATA_CHANGE listener instead.
+    // MAP_DATA_CHANGE is debounced and fires once all layer additions from every plugin
+    // have settled, giving us a single well-timed trigger. Using once() avoids the
+    // infinite loop a permanent listener would cause (layer moves re-trigger MAP_DATA_CHANGE).
+    const handleStyleChange = () => {
+      eventBus.once(events.MAP_DATA_CHANGE, updateHighlightedFeatures)
+    }
+    eventBus.on(events.MAP_STYLE_CHANGE, handleStyleChange)
 
     return () => {
-      eventBus.off(events.MAP_DATA_CHANGE, updateHighlightedFeatures)
+      eventBus.off(events.MAP_STYLE_CHANGE, handleStyleChange)
     }
-  }, [selectedFeatures, mapProvider, stylesMap])
+  }, [selectedFeatures, listboxActiveItem, mapProvider, stylesMap, eventBus])
 }