Show: Inherited Protected Private Deprecated

# WidgetFocusManager Class

Defined in: `src/ui/react/src/components/base/widget-focus-manager.js:12`

WidgetFocusManager is a mixin that provides keyboard navigation inside a widget. To do this, it exposes the following props and methods:

## Index

### Methods

- _getFocusAction
- _getFocusDismissAction
- _getFocusMoveDirection
- _isValidKey
- _isValidKey
- _moveFocus
- _refresh
- componentDidMount
- componentDidUpdate
- focus
- handleKey
- moveFocus

### Properties

- circular
- descendants
- focusFirstChild
- keys
- onDismiss

## Methods

### `_getFocusAction`

(

- `event`

)
Object protected

Defined in `src/ui/react/src/components/base/widget-focus-manager.js:150`

Returns the action, if any, that a keyboard event in the current focus manager state should produce.

#### Parameters:

- `event` Object

  The Keyboard event.

#### Returns:

Object:

An action object with type and direction properties.

### `_getFocusDismissAction`

(

- `event`
- `focusMoveDirection`

)
Object protected

Defined in `src/ui/react/src/components/base/widget-focus-manager.js:183`

Returns the dismiss action, if any, the focus manager should execute to yield the focus. This will happen in any of these scenarios if a dismiss callback has been specified:

- A dismiss key has been pressed
- In a non-circular focus manager, when:
  - The active descendant is the first one and a prev key has been pressed.
  - The active descendant is the last one and a next key has been pressed.

#### Parameters:

- `event` Object

  The Keyboard event.

- `focusMoveDirection` Number

  The focus movement direction (if any).

#### Returns:

Object:

A dismiss action with dismiss and direction properties.

### `_getFocusMoveDirection`

(

- `event`

)
Number protected

Defined in `src/ui/react/src/components/base/widget-focus-manager.js:227`

Returns the direction, if any, in which the focus should be moved. In presence of the shift key modifier, the direction of the movement is inverted.

#### Parameters:

- `event` Object

  The Keyboard event.

#### Returns:

Number:

The computed direction of the expected focus movement.

### `_isValidKey`

(

- `element`

)
Boolean protected

Defined in `src/ui/react/src/components/base/widget-focus-manager.js:267`

Indicates if a given element is valid for focus management. User input elements such as input, select or textarea are excluded.

#### Parameters:

- `element` DOMNode

  A DOM element.

#### Returns:

Boolean:

A boolean value indicating if the element is valid.

### `_isValidKey`

(

- `keyCode`
- `keys`

)
Boolean protected

Defined in `src/ui/react/src/components/base/widget-focus-manager.js:253`

Indicates if a given keyCode is valid for the given set of keys.

#### Parameters:

- `keyCode` Number

  An event keyCode.

- `keys` Array | Number

  A key set. Can be a number an array of numbers representing the allowed keyCodes.

#### Returns:

Boolean:

A boolean value indicating if the key is valid.

### `_moveFocus`

(

- `direction`

)
protected

Defined in `src/ui/react/src/components/base/widget-focus-manager.js:282`

Moves the focus among descendants in the especified direction.

#### Parameters:

- `direction` Number

  The direction (1 or -1) of the focus movement among descendants.

### `_refresh`

() protected

Defined in `src/ui/react/src/components/base/widget-focus-manager.js:312`

Refreshes the descendants list by executing the CSS selector again and resets the descendants tabIndex.

### `componentDidMount`

()

Defined in `src/ui/react/src/components/base/widget-focus-manager.js:64`

Lifecycle. Invoked once, only on the client, immediately after the initial rendering occurs.

### `componentDidUpdate`

()

Defined in `src/ui/react/src/components/base/widget-focus-manager.js:73`

Lifecycle. Invoked immediately after the component's updates are flushed to the DOM. Refreshes the descendants list.

### `focus`

()

Defined in `src/ui/react/src/components/base/widget-focus-manager.js:83`

Focuses the current active descendant.

Several Widgets can be nested in a component hierarchy by attaching this focus method to the widget DOM node, transferring the DOM focus control to the inner FocusManager.

### `handleKey`

(

- `event`

)

Defined in `src/ui/react/src/components/base/widget-focus-manager.js:113`

Handles the key events on a DOM node to execute the appropriate navigation when needed.

#### Parameters:

- `event` Object

  The Keyboard event that was detected on the widget DOM node.

### `moveFocus`

(

- `direction`

)

Defined in `src/ui/react/src/components/base/widget-focus-manager.js:138`

Moves the focus among descendants in the especified direction.

#### Parameters:

- `direction` Number

  The direction (1 or -1) of the focus movement among descendants.

## Properties

### `circular`

Boolean

Defined in `src/ui/react/src/components/base/widget-focus-manager.js:34`

Indicates if focus should be set to the first/last descendant when the limits are reached.

### `descendants`

String

Defined in `src/ui/react/src/components/base/widget-focus-manager.js:47`

String representing the CSS selector used to define the elements that should be handled.

### `focusFirstChild`

Boolean

Defined in `src/ui/react/src/components/base/widget-focus-manager.js:41`

Indicate if should focus the first child of a container

### `keys`

Object

Defined in `src/ui/react/src/components/base/widget-focus-manager.js:54`

Object representing the keys used to navigate between descendants. The format for the prop is: `{dismiss: value, dismissNext: value, dismissPrev: value, next: value, prev: value}` where value can be both a number or an array of numbers with the allowed keyCodes.

### `onDismiss`

Function

Defined in `src/ui/react/src/components/base/widget-focus-manager.js:22`

Callback method to be invoked when the focus manager is to be dismissed. This happens in the following scenarios if a dismiss callback has been specified:

- A dismiss key has been pressed
- In a non-circular focus manager, when:
  - The active descendant is the first one and a prev key has been pressed.
  - The active descendant is the last one and a next key has been pressed.