This sample demonstrates the Map component’s built-in focus region for keyboard-based feature selection.
It also shows how to select features from the focus region in the Map and Feature Table, which can share a selection state through the Map component’s SelectionManager.
How it works
The focus region is built into the Map component and can be toggled using the Shift + Alt/Option + O keyboard shortcut while the view component is in focus. By default, the shortcut is enabled only when a popup component is available and popupDisabled is false. Use focusRegionShortcutEnabled to explicitly enable or disable it for custom selection handling.
The following table summarizes the keyboard shortcuts and properties related to the focus region:
| Action | Keyboard Shortcut / Property |
|---|---|
| Enable or disable focus region | Use the Shift + Alt/Option + O keyboard shortcut while the view component is in focus or set the focusRegionVisible property to true or false. |
| Resize focus region | Use the Shift + Alt/Option + Up/Down arrow keys while the focus region is enabled. |
| Open the Popup for features in the focus region | Press Enter or Spacebar while the focus region is enabled. |
The sample loads a web map and uses its feature layers as sources for the selection manager and as available layers in the feature table. After the view and its feature layer views finish updating, the map receives focus. You can then enable the focus region with the keyboard shortcut or turn on the Focus region switch, which sets the focusRegionVisible property.
Once the focus region is enabled, the user can open the features within the region in the popup component using the Enter or Spacebar keys. By default, the popup component opens docked and in “list” initialDisplayMode (unless otherwise specified).
The arcgisViewFocusRegionSelect handler updates the view’s selection manager. Enable the Show Feature Table switch to call event.detail.preventDefault() before hit testing, preventing the focus region’s default popup behavior while enabling feature selection and table updates.
The read-only focusRegion property provides the screen rectangle passed to hitTest(). For each layer, the handler passes its matching graphics’ object IDs to the map component’s SelectionManager.replace() method, replacing that layer’s previous selection. The manager highlights selected features, and the feature table reflects these updates due to the synchronized selection state.