Enabling interactivity

Function properties such as event handlers are automatically bound to the this context of the widget that instantiated the virtual node. However, if an already-bound function is given as a property value, this will not be bound again.

Handling focus

When outputting VNodes, widgets can use VNodeProperties‘s focus property to control whether the resulting DOM element should receive focus when rendering. This is a special property that accepts either a boolean or a function that returns a .

When passing true directly, the element will only receive focus when the previous value was something other than true (similar to ). When passing a function, the element will receive focus when true is returned, regardless of what the previous return value was.

For example:

Function-based variant:

Class-based variant:

Function-based widgets can use the focus middleware to provide focus to their children or to accept focus from a parent widget. Class-based widgets can use the FocusMixin (from @dojo/framework/core/mixins/Focus) to delegate focus in a similar way.

FocusMixin or the focus middleware also add a focus function property to a widget’s API. The framework uses the boolean result from this property to determine if the widget (or one of its children) should receive focus when rendering. Typically, widgets pass the shouldFocus method to a specific child widget or an output node via their focus property, allowing parent widgets to delegate focus to their children.

See the in the Dojo middleware reference guide for an example for function-based widgets.

The following shows an example of delegating and controlling focus across a class-based widget hierarchy and output VNodes:

src/widgets/FocusableWidget.tsx