JavaScript Data GridPlugin: FocusScopeManager

On this page

• Description
• Methods
  • activateScope
  • deactivateScope
  • getActiveScopeId
  • registerScope
  • unregisterScope

Description

Creates a focus scope manager for a Handsontable instance. The manager handles focus scopes by listening to keydown, focusin, and click events on the document. Based on the currently focused element, it activates or deactivates the appropriate scope. Focus scope contains its own boundaries and logic that once activated allows to focus specific focusable element within the scope container element and/or switch to specific shortcuts context.

The manager also automatically updates the Core#isListening state of the Handsontable instance based on the current state of the scopes.

Methods

activateScope

Source code

focusScopeManager.activateScope(scopeId)

Activates a focus scope by its ID.

Param	Type	Description
scopeId	string	The ID of the scope to activate.

deactivateScope

Source code

focusScopeManager.deactivateScope(scopeId)

Deactivates a scope by its ID.

Param	Type	Description
scopeId	string	The ID of the scope to deactivate.

getActiveScopeId

Source code

focusScopeManager.getActiveScopeId() ⇒ string | null

Returns the ID of the active scope.

Returns: string | null - The ID of the active scope.

registerScope

Source code

focusScopeManager.registerScope(scopeId, container, [options])

Registers a new focus scope.

Example
For regular element (inline scope)

hot.getFocusScopeManager().registerScope('myPluginName', containerElement, {
  shortcutsContextName: 'plugin:myPluginName',
  onActivate: (focusSource) => {
    // Focus the internal focusable element within the plugin UI element
  },
});

or for modal scope

hot.getFocusScopeManager().registerScope('myPluginName', containerElement, {
  shortcutsContextName: 'plugin:myPluginName',
  type: 'modal',
  runOnlyIf: () => isDialogOpened(),
  onActivate: (focusSource) => {
    // Focus the internal focusable element within the plugin UI element
  },
});

Param	Type	Default	Description
scopeId	string		Unique identifier for the scope.
container	HTMLElement		Container element for the scope.
[options]	object		optional Configuration options.
[options.shortcutsContextName]	string	"grid"	optional The name of the shortcuts context to switch to when the scope is activated.
[options.type]	'modal' 'inline'	'inline'	optional The type of the scope: - modal: The scope is modal and blocks the rest of the grid from receiving focus. - inline: The scope is inline and allows the rest of the grid to receive focus in the order of the rendered elements in the DOM.
[options.runOnlyIf]	function		optional Whether the scope is enabled or not depends on the custom logic.
[options.contains]	function		optional Whether the target element is within the scope. If the option is not provided, the scope will be activated if the target element is within the container element.
[options.onActivate]	function		optional Callback function to be called when the scope is activated. The first argument is the source of the activation: - unknown: The scope is activated by an unknown source. - click: The scope is activated by a click event. - tab_from_above: The scope is activated by a tab key press. - tab_from_below: The scope is activated by a shift+tab key press.
[options.onDeactivate]	function		optional Callback function to be called when the scope is deactivated.

unregisterScope

Source code

focusScopeManager.unregisterScope(scopeId)

Unregisters a scope completely.

Param	Type	Description
scopeId	string	The scope to remove.