Focus scopes

Manage focus boundaries and keyboard shortcuts contexts with focus scopes.

Overview

Focus scopes allow you to create isolated focus boundaries within your Handsontable instance, enabling seamless focus switching between the grid and your custom UI elements. They automatically manage keyboard shortcuts contexts and provide fine-grained control over which elements can receive focus and which shortcuts are active.

Access the FocusScopeManager API:
```
1
hot.getFocusScopeManager();
```

Register a focus scope with a container element:

1
const focusScopeManager = hot.getFocusScopeManager();
2

3
focusScopeManager.registerScope('customScope', containerElement, {
4
  shortcutsContextName: 'plugin:customScope',
5
  onActivate: (focusSource) => {
6
    // Focus the first focusable element in your plugin's UI
7
    // container
8
  },
9
});

Focus scope types

Focus scopes come in two types, each with different behavior:

Type	Description
`inline` (default)	The scope is inline and allows the rest of the component to receive focus in the order of the rendered elements in the DOM.
`modal`	The scope is modal and blocks the rest of the component from receiving focus. Only elements within the scope can be focused.

Inline scopes

Inline scopes allow natural tab navigation through the DOM. Users can navigate to other parts of the grid using the Tab or Shift+Tab keys.

1
const focusScopeManager = hot.getFocusScopeManager();
2

3
focusScopeManager.registerScope('pagination', paginationContainer, {
4
  type: 'inline',
5
  shortcutsContextName: 'plugin:pagination',
6
});

The example below demonstrates how the inline focus scope works using the pagination plugin as an example. Let’s focus on the top text input and press the Tab key through the grid to see how the focus moves to the bottom text input and how the internal state changes.

1
import { HotTable, HotColumn } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3
import { useState, useEffect, useRef, useCallback, memo } from 'react';
4

5
// register Handsontable's modules
6
registerAllModules();
7

8
const data = [
9
  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
10
  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
11
  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
12
  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
13
  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
14
  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
15
  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
16
  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
17
  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
18
  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
19
  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
20
  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
21
  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
22
  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
23
  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
24
  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
25
  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
26
  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
27
  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
28
  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
29
  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },
30
  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },
31
  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },
32
  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },
33
  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },
34
  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },
35
  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },
36
  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },
37
  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },
38
  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },
39
  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },
40
  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },
41
  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },
42
  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },
43
  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },
44
  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },
45
  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },
46
  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },
47
  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },
48
  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },
49
  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },
50
  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },
51
  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },
52
  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },
53
  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },
54
  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },
55
  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },
56
  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },
57
  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },
58
  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },
59
  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },
60
  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },
61
  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },
62
  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },
63
  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },
64
  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },
65
  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },
66
  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },
67
  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },
68
  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },
69
  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },
70
  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },
71
  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },
72
  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },
73
  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },
74
  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },
75
  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },
76
  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },
77
  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },
78
  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },
79
  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },
80
  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },
81
  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },
82
  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },
83
  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },
84
  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },
85
  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },
86
  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },
87
  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },
88
  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },
89
  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },
90
  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },
91
  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },
92
  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },
93
  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },
94
  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },
95
  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },
96
  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },
97
  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },
98
  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },
99
  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },
100
  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },
101
  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },
102
  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },
103
  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },
104
  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },
105
  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },
106
  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },
107
  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },
108
  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },
109
];
110

111
const Table = memo(({ hotTableRef, data }) => {
112
  return (
113
    <HotTable
114
      ref={hotTableRef}
115
      pagination={true}
116
      autoRowSize={true}
117
      tabNavigation={false}
118
      data={data}
119
      width="100%"
120
      height={250}
121
      stretchH="all"
122
      contextMenu={true}
123
      rowHeaders={true}
124
      colHeaders={true}
125
      autoWrapRow={true}
126
      autoWrapCol={true}
127
      licenseKey="non-commercial-and-evaluation"
128
    >
129
      <HotColumn title="Model" type="text" data="model" width={150} headerClassName="htLeft" />
130
      <HotColumn
131
        title="Price"
132
        type="numeric"
133
        data="price"
134
        width={80}
135
        locale="en-US"
136
        numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}
137
        className="htRight"
138
        headerClassName="htRight"
139
      />
140
      <HotColumn
141
        title="Date"
142
        type="intl-date"
143
        data="sellDate"
144
        width={131}
145
        locale="en-US"
146
        dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}
147
        className="htRight"
148
        headerClassName="htRight"
149
      />
150
      <HotColumn
151
        title="Time"
152
        type="intl-time"
153
        data="sellTime"
154
        width={81}
155
        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}
156
        className="htRight"
157
        headerClassName="htRight"
158
      />
159
      <HotColumn title="In stock" type="checkbox" data="inStock" className="htCenter" headerClassName="htCenter" />
160
    </HotTable>
161
  );
162
});
163

164
const DebugInfo = memo(({ debugInfo }) => (
165
  <>
166
    <strong>Debug information:</strong>
167
    <table className="debug-table">
168
      <colgroup>
169
        <col />
170
        <col style={{ width: '200px' }} />
171
      </colgroup>
172
      <tbody>
173
        <tr>
174
          <td>
175
            <code>isListening()</code>
176
          </td>
177
          <td>
178
            <code className="isListening">{String(debugInfo.isListening)}</code>
179
          </td>
180
        </tr>
181
        <tr>
182
          <td>
183
            <code>getFocusScopeManager().getActiveScopeId()</code>
184
          </td>
185
          <td>
186
            <code className="focusScope">{String(debugInfo.focusScope)}</code>
187
          </td>
188
        </tr>
189
        <tr>
190
          <td>
191
            <code>getShortcutManager().getActiveContextName()</code>
192
          </td>
193
          <td>
194
            <code className="shortcutsContext">{String(debugInfo.shortcutsContext)}</code>
195
          </td>
196
        </tr>
197
      </tbody>
198
    </table>
199
  </>
200
));
201

202
const ExampleComponent = () => {
203
  const [debugInfo, setDebugInfo] = useState({
204
    isListening: false,
205
    focusScope: null,
206
    shortcutsContext: null,
207
  });
208

209
  const hotRef = useRef(null);
210
  const updateDebugInfo = useCallback(() => {
211
    const hotInstance = hotRef.current?.hotInstance;
212

213
    if (hotInstance) {
214
      setDebugInfo({
215
        isListening: hotInstance.isListening(),
216
        focusScope: hotInstance.getFocusScopeManager().getActiveScopeId(),
217
        shortcutsContext: hotInstance.getShortcutManager().getActiveContextName(),
218
      });
219
    }
220
  }, []);
221

222
  useEffect(() => {
223
    const interval = setInterval(updateDebugInfo, 200);
224

225
    return () => clearInterval(interval);
226
  }, [updateDebugInfo]);
227

228
  return (
229
    <div className="example-container">
230
      <input
231
        className="placeholder-input"
232
        type="text"
233
        name="focusable-text-input"
234
        placeholder="Focusable top text input"
235
      />
236

237
      <Table hotTableRef={hotRef} data={data} />
238

239
      <input
240
        className="placeholder-input"
241
        type="text"
242
        name="focusable-text-input"
243
        placeholder="Focusable bottom text input"
244
      />
245

246
      <DebugInfo debugInfo={debugInfo} />
247
    </div>
248
  );
249
};
250

251
export default ExampleComponent;

1
import { HotTable, HotColumn } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3
import { useState, useEffect, useRef, useCallback, memo } from 'react';
4

5
// register Handsontable's modules
6
registerAllModules();
7

8
const data = [
9
  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
10
  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
11
  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
12
  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
13
  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
14
  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
15
  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
16
  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
17
  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
18
  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
19
  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
20
  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
21
  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
22
  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
23
  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
24
  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
25
  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
26
  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
27
  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
28
  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
29
  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },
30
  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },
31
  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },
32
  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },
33
  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },
34
  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },
35
  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },
36
  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },
37
  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },
38
  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },
39
  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },
40
  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },
41
  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },
42
  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },
43
  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },
44
  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },
45
  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },
46
  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },
47
  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },
48
  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },
49
  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },
50
  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },
51
  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },
52
  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },
53
  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },
54
  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },
55
  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },
56
  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },
57
  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },
58
  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },
59
  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },
60
  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },
61
  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },
62
  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },
63
  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },
64
  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },
65
  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },
66
  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },
67
  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },
68
  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },
69
  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },
70
  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },
71
  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },
72
  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },
73
  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },
74
  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },
75
  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },
76
  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },
77
  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },
78
  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },
79
  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },
80
  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },
81
  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },
82
  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },
83
  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },
84
  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },
85
  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },
86
  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },
87
  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },
88
  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },
89
  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },
90
  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },
91
  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },
92
  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },
93
  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },
94
  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },
95
  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },
96
  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },
97
  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },
98
  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },
99
  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },
100
  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },
101
  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },
102
  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },
103
  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },
104
  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },
105
  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },
106
  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },
107
  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },
108
  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },
109
];
110

111
const Table = memo(({ hotTableRef, data }) => {
112
  return (
113
    <HotTable
114
      ref={hotTableRef}
115
      pagination={true}
116
      autoRowSize={true}
117
      tabNavigation={false}
118
      data={data}
119
      width="100%"
120
      height={250}
121
      stretchH="all"
122
      contextMenu={true}
123
      rowHeaders={true}
124
      colHeaders={true}
125
      autoWrapRow={true}
126
      autoWrapCol={true}
127
      licenseKey="non-commercial-and-evaluation"
128
    >
129
      <HotColumn title="Model" type="text" data="model" width={150} headerClassName="htLeft" />
130
      <HotColumn
131
        title="Price"
132
        type="numeric"
133
        data="price"
134
        width={80}
135
        locale="en-US" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}
136
        className="htRight"
137
        headerClassName="htRight"
138
      />
139
      <HotColumn
140
        title="Date"
141
        type="intl-date"
142
        data="sellDate"
143
        width={131}
144
        locale="en-US" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}
145
        className="htRight"
146
        headerClassName="htRight"
147
      />
148
      <HotColumn
149
        title="Time"
150
        type="intl-time"
151
        data="sellTime"
152
        width={81}
153
        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}
154
        className="htRight"
155
        headerClassName="htRight"
156
      />
157
      <HotColumn title="In stock" type="checkbox" data="inStock" className="htCenter" headerClassName="htCenter" />
158
    </HotTable>
159
  );
160
});
161

162
const DebugInfo = memo(({ debugInfo }) => (
163
  <>
164
    <strong>Debug information:</strong>
165
    <table className="debug-table">
166
      <colgroup>
167
        <col />
168
        <col style={{ width: '200px' }} />
169
      </colgroup>
170
      <tbody>
171
        <tr>
172
          <td>
173
            <code>isListening()</code>
174
          </td>
175
          <td>
176
            <code className="isListening">{String(debugInfo.isListening)}</code>
177
          </td>
178
        </tr>
179
        <tr>
180
          <td>
181
            <code>getFocusScopeManager().getActiveScopeId()</code>
182
          </td>
183
          <td>
184
            <code className="focusScope">{String(debugInfo.focusScope)}</code>
185
          </td>
186
        </tr>
187
        <tr>
188
          <td>
189
            <code>getShortcutManager().getActiveContextName()</code>
190
          </td>
191
          <td>
192
            <code className="shortcutsContext">{String(debugInfo.shortcutsContext)}</code>
193
          </td>
194
        </tr>
195
      </tbody>
196
    </table>
197
  </>
198
));
199

200
const ExampleComponent = () => {
201
  const [debugInfo, setDebugInfo] = useState({
202
    isListening: false,
203
    focusScope: null,
204
    shortcutsContext: null,
205
  });
206

207
  const hotRef = useRef(null);
208
  const updateDebugInfo = useCallback(() => {
209
    const hotInstance = hotRef.current?.hotInstance;
210

211
    if (hotInstance) {
212
      setDebugInfo({
213
        isListening: hotInstance.isListening(),
214
        focusScope: hotInstance.getFocusScopeManager().getActiveScopeId(),
215
        shortcutsContext: hotInstance.getShortcutManager().getActiveContextName(),
216
      });
217
    }
218
  }, []);
219

220
  useEffect(() => {
221
    const interval = setInterval(updateDebugInfo, 200);
222

223
    return () => clearInterval(interval);
224
  }, [updateDebugInfo]);
225

226
  return (
227
    <div className="example-container">
228
      <input
229
        className="placeholder-input"
230
        type="text"
231
        name="focusable-text-input"
232
        placeholder="Focusable top text input"
233
      />
234

235
      <Table hotTableRef={hotRef} data={data} />
236

237
      <input
238
        className="placeholder-input"
239
        type="text"
240
        name="focusable-text-input"
241
        placeholder="Focusable bottom text input"
242
      />
243

244
      <DebugInfo debugInfo={debugInfo} />
245
    </div>
246
  );
247
};
248

249
export default ExampleComponent;

1
.placeholder-input {
2
  max-width: 20rem;
3
  padding: 0.4rem 0.625rem;
4
  font-size: var(--sl-text-sm);
5
  line-height: 1.25rem;
6
  color: var(--sl-color-text);
7
  background: none;
8
  border: 1px solid var(--sl-color-gray-5);
9
  border-radius: 0;
10
  outline: none;
11
}
12

13
.placeholder-input::placeholder {
14
  color: var(--sl-color-gray-3);
15
}
16

17
.placeholder-input:focus {
18
  border-color: var(--sl-color-accent);
19
}
20

21
.example-container {
22
  gap: 1rem;
23
  display: flex;
24
  flex-direction: column;
25
}
26

27
.example-container > strong {
28
  font-size: 0.875rem;
29
  font-weight: 600;
30
  color: var(--sl-color-white);
31
  margin: 0.5rem 0 0;
32
}
33

34
.example-container .debug-table {
35
  font-size: var(--sl-text-sm);
36
  border-collapse: collapse;
37
  width: 100%;
38
}
39

40
.example-container .debug-table td {
41
  padding: 0.4rem 0.75rem !important;
42
  border-bottom: 1px solid var(--sl-color-gray-5);
43
  color: var(--sl-color-gray-2);
44
}
45

46
.example-container .debug-table td:last-child {
47
  font-family: var(--sl-font-mono, ui-monospace, monospace);
48
}
49

50
.example-container .debug-table td code {
51
  font-size: var(--sl-text-xs);
52
}

Modal scopes have a priority over inline scopes. If a modal scope is active, the inline scopes will not be activated. This is useful for dialogs, popups, or any UI that may overlap other inline scopes and need to be activated first.

1
const focusScopeManager = hot.getFocusScopeManager();
2

3
focusScopeManager.registerScope('dialog', dialogContainerElement, {
4
  type: 'modal',
5
  shortcutsContextName: 'plugin:dialog',
6
  // Only activate the scope if the dialog is open
7
  runOnlyIf: () => isDialogOpen(),
8
});

The example below demonstrates how the modal focus scope works using the dialog plugin as an example. The dialog scope takes over focus management for all inline scopes (grid and pagination) automatically, even when the dialog element appears after the inline scope elements in the DOM.

1
import { HotTable, HotColumn } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3
import { useState, useEffect, useRef, useCallback, memo } from 'react';
4

5
// register Handsontable's modules
6
registerAllModules();
7

8
const data = [
9
  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
10
  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
11
  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
12
  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
13
  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
14
  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
15
  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
16
  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
17
  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
18
  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
19
  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
20
  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
21
  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
22
  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
23
  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
24
  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
25
  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
26
  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
27
  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
28
  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
29
  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },
30
  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },
31
  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },
32
  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },
33
  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },
34
  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },
35
  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },
36
  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },
37
  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },
38
  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },
39
  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },
40
  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },
41
  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },
42
  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },
43
  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },
44
  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },
45
  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },
46
  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },
47
  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },
48
  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },
49
  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },
50
  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },
51
  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },
52
  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },
53
  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },
54
  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },
55
  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },
56
  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },
57
  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },
58
  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },
59
  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },
60
  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },
61
  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },
62
  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },
63
  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },
64
  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },
65
  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },
66
  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },
67
  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },
68
  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },
69
  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },
70
  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },
71
  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },
72
  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },
73
  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },
74
  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },
75
  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },
76
  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },
77
  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },
78
  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },
79
  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },
80
  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },
81
  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },
82
  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },
83
  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },
84
  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },
85
  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },
86
  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },
87
  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },
88
  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },
89
  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },
90
  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },
91
  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },
92
  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },
93
  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },
94
  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },
95
  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },
96
  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },
97
  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },
98
  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },
99
  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },
100
  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },
101
  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },
102
  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },
103
  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },
104
  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },
105
  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },
106
  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },
107
  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },
108
  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },
109
];
110

111
const Table = memo(({ hotTableRef, data }) => {
112
  return (
113
    <HotTable
114
      ref={hotTableRef}
115
      pagination={true}
116
      dialog={true}
117
      autoRowSize={true}
118
      tabNavigation={false}
119
      data={data}
120
      width="100%"
121
      height={250}
122
      stretchH="all"
123
      contextMenu={true}
124
      rowHeaders={true}
125
      colHeaders={true}
126
      autoWrapRow={true}
127
      autoWrapCol={true}
128
      licenseKey="non-commercial-and-evaluation"
129
    >
130
      <HotColumn title="Model" type="text" data="model" width={150} headerClassName="htLeft" />
131
      <HotColumn
132
        title="Price"
133
        type="numeric"
134
        data="price"
135
        width={80}
136
        locale="en-US"
137
        numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}
138
        className="htRight"
139
        headerClassName="htRight"
140
      />
141
      <HotColumn
142
        title="Date"
143
        type="intl-date"
144
        data="sellDate"
145
        width={131}
146
        locale="en-US"
147
        dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}
148
        className="htRight"
149
        headerClassName="htRight"
150
      />
151
      <HotColumn
152
        title="Time"
153
        type="intl-time"
154
        data="sellTime"
155
        width={81}
156
        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}
157
        className="htRight"
158
        headerClassName="htRight"
159
      />
160
      <HotColumn title="In stock" type="checkbox" data="inStock" className="htCenter" headerClassName="htCenter" />
161
    </HotTable>
162
  );
163
});
164

165
const DebugInfo = memo(({ debugInfo }) => (
166
  <>
167
    <strong>Debug information:</strong>
168
    <table className="debug-table">
169
      <colgroup>
170
        <col />
171
        <col style={{ width: '200px' }} />
172
      </colgroup>
173
      <tbody>
174
        <tr>
175
          <td>
176
            <code>isListening()</code>
177
          </td>
178
          <td>
179
            <code className="isListening">{String(debugInfo.isListening)}</code>
180
          </td>
181
        </tr>
182
        <tr>
183
          <td>
184
            <code>getFocusScopeManager().getActiveScopeId()</code>
185
          </td>
186
          <td>
187
            <code className="focusScope">{String(debugInfo.focusScope)}</code>
188
          </td>
189
        </tr>
190
        <tr>
191
          <td>
192
            <code>getShortcutManager().getActiveContextName()</code>
193
          </td>
194
          <td>
195
            <code className="shortcutsContext">{String(debugInfo.shortcutsContext)}</code>
196
          </td>
197
        </tr>
198
      </tbody>
199
    </table>
200
  </>
201
));
202

203
const ExampleComponent = () => {
204
  const [debugInfo, setDebugInfo] = useState({
205
    isListening: false,
206
    focusScope: null,
207
    shortcutsContext: null,
208
  });
209

210
  const hotRef = useRef(null);
211
  const updateDebugInfo = useCallback(() => {
212
    const hotInstance = hotRef.current?.hotInstance;
213

214
    if (hotInstance) {
215
      setDebugInfo({
216
        isListening: hotInstance.isListening(),
217
        focusScope: hotInstance.getFocusScopeManager().getActiveScopeId(),
218
        shortcutsContext: hotInstance.getShortcutManager().getActiveContextName(),
219
      });
220
    }
221
  }, []);
222

223
  useEffect(() => {
224
    const hotInstance = hotRef.current?.hotInstance;
225

226
    if (hotInstance) {
227
      hotInstance.getPlugin('dialog').show({
228
        content: 'This is a simple text message displayed in the dialog.',
229
        closable: true,
230
        background: 'semi-transparent',
231
      });
232
    }
233
  }, []);
234
  useEffect(() => {
235
    const interval = setInterval(updateDebugInfo, 200);
236

237
    return () => clearInterval(interval);
238
  }, [updateDebugInfo]);
239

240
  return (
241
    <div className="example-container">
242
      <input
243
        className="placeholder-input"
244
        type="text"
245
        name="focusable-text-input"
246
        placeholder="Focusable top text input"
247
      />
248

249
      <Table hotTableRef={hotRef} data={data} />
250

251
      <input
252
        className="placeholder-input"
253
        type="text"
254
        name="focusable-text-input"
255
        placeholder="Focusable bottom text input"
256
      />
257

258
      <DebugInfo debugInfo={debugInfo} />
259
    </div>
260
  );
261
};
262

263
export default ExampleComponent;

1
import { HotTable, HotColumn } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3
import { useState, useEffect, useRef, useCallback, memo } from 'react';
4

5
// register Handsontable's modules
6
registerAllModules();
7

8
const data = [
9
  { model: 'Trail Helmet', price: 1298.14, sellDate: '2025-08-31', sellTime: '14:12', inStock: true },
10
  { model: 'Windbreaker Jacket', price: 178.9, sellDate: '2025-05-10', sellTime: '22:26', inStock: false },
11
  { model: 'Cycling Cap', price: 288.1, sellDate: '2025-09-15', sellTime: '09:37', inStock: true },
12
  { model: 'HL Mountain Frame', price: 94.49, sellDate: '2025-01-17', sellTime: '14:19', inStock: false },
13
  { model: 'Racing Socks', price: 430.38, sellDate: '2025-05-10', sellTime: '13:42', inStock: true },
14
  { model: 'Racing Socks', price: 138.85, sellDate: '2025-09-20', sellTime: '14:48', inStock: true },
15
  { model: 'HL Mountain Frame', price: 1909.63, sellDate: '2025-09-05', sellTime: '09:35', inStock: false },
16
  { model: 'Carbon Handlebar', price: 1080.7, sellDate: '2025-10-24', sellTime: '22:58', inStock: false },
17
  { model: 'Aero Bottle', price: 1571.13, sellDate: '2025-05-24', sellTime: '00:24', inStock: true },
18
  { model: 'Windbreaker Jacket', price: 919.09, sellDate: '2025-07-16', sellTime: '19:11', inStock: true },
19
  { model: 'HL Road Tire', price: 886.22, sellDate: '2025-09-09', sellTime: '00:42', inStock: false },
20
  { model: 'Speed Gloves', price: 635.13, sellDate: '2025-11-17', sellTime: '12:45', inStock: true },
21
  { model: 'Trail Helmet', price: 1440.64, sellDate: '2025-01-03', sellTime: '20:16', inStock: false },
22
  { model: 'Aero Bottle', price: 944.63, sellDate: '2025-11-15', sellTime: '16:14', inStock: false },
23
  { model: 'Windbreaker Jacket', price: 1161.43, sellDate: '2025-06-24', sellTime: '13:19', inStock: false },
24
  { model: 'LED Bike Light', price: 1012.5, sellDate: '2025-05-01', sellTime: '17:30', inStock: false },
25
  { model: 'Windbreaker Jacket', price: 635.37, sellDate: '2025-05-14', sellTime: '09:05', inStock: true },
26
  { model: 'Road Tire Tube', price: 1421.27, sellDate: '2025-01-31', sellTime: '13:33', inStock: true },
27
  { model: 'Action Camera', price: 1019.05, sellDate: '2025-12-07', sellTime: '01:26', inStock: false },
28
  { model: 'Carbon Handlebar', price: 603.96, sellDate: '2025-09-13', sellTime: '04:10', inStock: false },
29
  { model: 'Aero Bottle', price: 1334.03, sellDate: '2025-01-24', sellTime: '03:29', inStock: false },
30
  { model: 'Road Tire Tube', price: 1841.17, sellDate: '2025-05-22', sellTime: '01:45', inStock: false },
31
  { model: 'Aero Bottle', price: 1622.05, sellDate: '2025-01-13', sellTime: '08:30', inStock: true },
32
  { model: 'Comfort Saddle', price: 1456.24, sellDate: '2025-07-20', sellTime: '03:39', inStock: false },
33
  { model: 'Windbreaker Jacket', price: 1736.96, sellDate: '2025-09-25', sellTime: '00:43', inStock: true },
34
  { model: 'Fitness Watch', price: 1075.31, sellDate: '2025-11-07', sellTime: '17:47', inStock: true },
35
  { model: 'Cycling Cap', price: 726.01, sellDate: '2025-10-28', sellTime: '12:44', inStock: true },
36
  { model: 'Road Tire Tube', price: 601.99, sellDate: '2025-09-22', sellTime: '00:26', inStock: true },
37
  { model: 'Speed Gloves', price: 1758.26, sellDate: '2025-10-04', sellTime: '04:59', inStock: true },
38
  { model: 'Speed Gloves', price: 564.35, sellDate: '2025-07-10', sellTime: '18:21', inStock: true },
39
  { model: 'Hydration Pack', price: 954.84, sellDate: '2025-11-02', sellTime: '00:59', inStock: false },
40
  { model: 'Cycling Cap', price: 1511.5, sellDate: '2025-02-11', sellTime: '02:38', inStock: false },
41
  { model: 'HL Road Tire', price: 269.6, sellDate: '2025-06-18', sellTime: '04:58', inStock: false },
42
  { model: 'Road Tire Tube', price: 435.07, sellDate: '2025-07-22', sellTime: '23:12', inStock: false },
43
  { model: 'Fitness Watch', price: 1187.8, sellDate: '2025-08-13', sellTime: '10:19', inStock: true },
44
  { model: 'Racing Socks', price: 770.19, sellDate: '2025-02-02', sellTime: '20:37', inStock: true },
45
  { model: 'Carbon Handlebar', price: 60.41, sellDate: '2025-12-27', sellTime: '20:30', inStock: true },
46
  { model: 'Racing Socks', price: 944.21, sellDate: '2025-05-23', sellTime: '18:43', inStock: false },
47
  { model: 'Racing Socks', price: 621.96, sellDate: '2025-12-12', sellTime: '04:59', inStock: false },
48
  { model: 'HL Road Tire', price: 774.91, sellDate: '2025-06-02', sellTime: '03:48', inStock: true },
49
  { model: 'LED Bike Light', price: 1205.29, sellDate: '2025-04-15', sellTime: '22:08', inStock: false },
50
  { model: 'Racing Socks', price: 388.19, sellDate: '2025-05-24', sellTime: '08:36', inStock: true },
51
  { model: 'Windbreaker Jacket', price: 267.88, sellDate: '2025-05-25', sellTime: '15:00', inStock: true },
52
  { model: 'LED Bike Light', price: 283.72, sellDate: '2025-09-26', sellTime: '02:16', inStock: true },
53
  { model: 'Comfort Saddle', price: 1782.91, sellDate: '2025-03-07', sellTime: '09:43', inStock: false },
54
  { model: 'Trail Helmet', price: 1943.46, sellDate: '2025-06-05', sellTime: '01:49', inStock: true },
55
  { model: 'Speed Gloves', price: 1737.8, sellDate: '2025-09-18', sellTime: '14:21', inStock: true },
56
  { model: 'Road Tire Tube', price: 354.89, sellDate: '2025-08-11', sellTime: '02:03', inStock: true },
57
  { model: 'Hydration Pack', price: 1490.45, sellDate: '2025-12-04', sellTime: '02:23', inStock: true },
58
  { model: 'LED Bike Light', price: 844.48, sellDate: '2025-09-22', sellTime: '02:29', inStock: true },
59
  { model: 'Road Tire Tube', price: 1965.77, sellDate: '2025-02-10', sellTime: '23:52', inStock: false },
60
  { model: 'Action Camera', price: 522.33, sellDate: '2025-11-11', sellTime: '16:50', inStock: false },
61
  { model: 'Comfort Saddle', price: 109.4, sellDate: '2025-05-13', sellTime: '11:41', inStock: true },
62
  { model: 'Hydration Pack', price: 1067.76, sellDate: '2025-08-07', sellTime: '05:04', inStock: false },
63
  { model: 'Speed Gloves', price: 1738.77, sellDate: '2025-01-28', sellTime: '08:38', inStock: false },
64
  { model: 'Aero Bottle', price: 1600.35, sellDate: '2025-01-29', sellTime: '00:36', inStock: false },
65
  { model: 'Speed Gloves', price: 524.91, sellDate: '2025-12-15', sellTime: '12:56', inStock: true },
66
  { model: 'Windbreaker Jacket', price: 1780.51, sellDate: '2025-09-23', sellTime: '05:02', inStock: false },
67
  { model: 'Comfort Saddle', price: 1955.0, sellDate: '2025-09-29', sellTime: '13:03', inStock: false },
68
  { model: 'Speed Gloves', price: 957.4, sellDate: '2025-08-06', sellTime: '03:19', inStock: true },
69
  { model: 'Fitness Watch', price: 193.72, sellDate: '2025-04-01', sellTime: '19:49', inStock: false },
70
  { model: 'Speed Gloves', price: 677.94, sellDate: '2025-10-11', sellTime: '22:25', inStock: false },
71
  { model: 'LED Bike Light', price: 1155.9, sellDate: '2025-03-02', sellTime: '11:36', inStock: false },
72
  { model: 'LED Bike Light', price: 586.82, sellDate: '2025-11-22', sellTime: '20:29', inStock: false },
73
  { model: 'Action Camera', price: 406.41, sellDate: '2025-10-25', sellTime: '11:10', inStock: false },
74
  { model: 'Road Tire Tube', price: 595.55, sellDate: '2025-05-24', sellTime: '01:30', inStock: false },
75
  { model: 'Racing Socks', price: 1078.63, sellDate: '2025-04-28', sellTime: '02:57', inStock: true },
76
  { model: 'Cycling Cap', price: 1781.04, sellDate: '2025-10-07', sellTime: '06:58', inStock: false },
77
  { model: 'Trail Helmet', price: 181.8, sellDate: '2025-10-02', sellTime: '20:04', inStock: false },
78
  { model: 'HL Mountain Frame', price: 489.39, sellDate: '2025-07-20', sellTime: '10:51', inStock: true },
79
  { model: 'HL Road Tire', price: 1964.04, sellDate: '2025-07-10', sellTime: '15:01', inStock: true },
80
  { model: 'Action Camera', price: 1321.19, sellDate: '2025-02-02', sellTime: '13:39', inStock: true },
81
  { model: 'Trail Helmet', price: 1311.09, sellDate: '2025-12-27', sellTime: '14:45', inStock: false },
82
  { model: 'Windbreaker Jacket', price: 1573.57, sellDate: '2025-09-20', sellTime: '20:31', inStock: false },
83
  { model: 'Speed Gloves', price: 338.01, sellDate: '2025-10-22', sellTime: '18:56', inStock: false },
84
  { model: 'Carbon Handlebar', price: 309.18, sellDate: '2025-11-10', sellTime: '15:20', inStock: true },
85
  { model: 'LED Bike Light', price: 1289.0, sellDate: '2025-08-22', sellTime: '15:34', inStock: true },
86
  { model: 'Action Camera', price: 1655.66, sellDate: '2025-06-12', sellTime: '15:38', inStock: false },
87
  { model: 'Hydration Pack', price: 1126.33, sellDate: '2025-09-15', sellTime: '06:29', inStock: false },
88
  { model: 'Racing Socks', price: 157.45, sellDate: '2025-01-26', sellTime: '19:25', inStock: true },
89
  { model: 'Aero Bottle', price: 1707.67, sellDate: '2025-02-02', sellTime: '17:34', inStock: true },
90
  { model: 'Road Tire Tube', price: 601.95, sellDate: '2025-04-14', sellTime: '08:02', inStock: true },
91
  { model: 'HL Road Tire', price: 118.42, sellDate: '2025-02-08', sellTime: '06:08', inStock: false },
92
  { model: 'Racing Socks', price: 1721.99, sellDate: '2025-10-13', sellTime: '09:01', inStock: true },
93
  { model: 'Action Camera', price: 1620.39, sellDate: '2025-07-18', sellTime: '05:53', inStock: false },
94
  { model: 'Trail Helmet', price: 1051.16, sellDate: '2025-01-21', sellTime: '09:44', inStock: true },
95
  { model: 'Fitness Watch', price: 1534.64, sellDate: '2025-02-27', sellTime: '09:19', inStock: true },
96
  { model: 'Comfort Saddle', price: 984.12, sellDate: '2025-03-16', sellTime: '07:24', inStock: false },
97
  { model: 'Comfort Saddle', price: 1316.13, sellDate: '2025-02-11', sellTime: '11:01', inStock: true },
98
  { model: 'Carbon Handlebar', price: 774.69, sellDate: '2025-10-17', sellTime: '11:38', inStock: false },
99
  { model: 'Road Tire Tube', price: 1887.19, sellDate: '2025-10-19', sellTime: '06:02', inStock: true },
100
  { model: 'Cycling Cap', price: 519.44, sellDate: '2025-10-21', sellTime: '03:54', inStock: true },
101
  { model: 'Trail Helmet', price: 1149.2, sellDate: '2025-04-24', sellTime: '04:40', inStock: false },
102
  { model: 'Carbon Handlebar', price: 915.24, sellDate: '2025-07-10', sellTime: '05:22', inStock: true },
103
  { model: 'Comfort Saddle', price: 1625.63, sellDate: '2025-03-31', sellTime: '23:55', inStock: true },
104
  { model: 'Racing Socks', price: 143.76, sellDate: '2025-12-02', sellTime: '07:25', inStock: true },
105
  { model: 'Cycling Cap', price: 981.24, sellDate: '2025-08-09', sellTime: '19:52', inStock: false },
106
  { model: 'Comfort Saddle', price: 779.4, sellDate: '2025-06-12', sellTime: '17:08', inStock: true },
107
  { model: 'Carbon Handlebar', price: 1512.24, sellDate: '2025-07-27', sellTime: '07:02', inStock: true },
108
  { model: 'Cycling Cap', price: 444.79, sellDate: '2025-09-11', sellTime: '10:05', inStock: false },
109
];
110

111
const Table = memo(({ hotTableRef, data }) => {
112
  return (
113
    <HotTable
114
      ref={hotTableRef}
115
      pagination={true}
116
      dialog={true}
117
      autoRowSize={true}
118
      tabNavigation={false}
119
      data={data}
120
      width="100%"
121
      height={250}
122
      stretchH="all"
123
      contextMenu={true}
124
      rowHeaders={true}
125
      colHeaders={true}
126
      autoWrapRow={true}
127
      autoWrapCol={true}
128
      licenseKey="non-commercial-and-evaluation"
129
    >
130
      <HotColumn title="Model" type="text" data="model" width={150} headerClassName="htLeft" />
131
      <HotColumn
132
        title="Price"
133
        type="numeric"
134
        data="price"
135
        width={80}
136
        locale="en-US" numericFormat={{ style: 'currency', currency: 'USD', minimumFractionDigits: 2 }}
137
        className="htRight"
138
        headerClassName="htRight"
139
      />
140
      <HotColumn
141
        title="Date"
142
        type="intl-date"
143
        data="sellDate"
144
        width={131}
145
        locale="en-US" dateFormat={{ month: 'short', day: 'numeric', year: 'numeric' }}
146
        className="htRight"
147
        headerClassName="htRight"
148
      />
149
      <HotColumn
150
        title="Time"
151
        type="intl-time"
152
        data="sellTime"
153
        width={81}
154
        timeFormat={{ hour: '2-digit', minute: '2-digit', hour12: true }}
155
        className="htRight"
156
        headerClassName="htRight"
157
      />
158
      <HotColumn title="In stock" type="checkbox" data="inStock" className="htCenter" headerClassName="htCenter" />
159
    </HotTable>
160
  );
161
});
162

163
const DebugInfo = memo(({ debugInfo }) => (
164
  <>
165
    <strong>Debug information:</strong>
166
    <table className="debug-table">
167
      <colgroup>
168
        <col />
169
        <col style={{ width: '200px' }} />
170
      </colgroup>
171
      <tbody>
172
        <tr>
173
          <td>
174
            <code>isListening()</code>
175
          </td>
176
          <td>
177
            <code className="isListening">{String(debugInfo.isListening)}</code>
178
          </td>
179
        </tr>
180
        <tr>
181
          <td>
182
            <code>getFocusScopeManager().getActiveScopeId()</code>
183
          </td>
184
          <td>
185
            <code className="focusScope">{String(debugInfo.focusScope)}</code>
186
          </td>
187
        </tr>
188
        <tr>
189
          <td>
190
            <code>getShortcutManager().getActiveContextName()</code>
191
          </td>
192
          <td>
193
            <code className="shortcutsContext">{String(debugInfo.shortcutsContext)}</code>
194
          </td>
195
        </tr>
196
      </tbody>
197
    </table>
198
  </>
199
));
200

201
const ExampleComponent = () => {
202
  const [debugInfo, setDebugInfo] = useState({
203
    isListening: false,
204
    focusScope: null,
205
    shortcutsContext: null,
206
  });
207

208
  const hotRef = useRef(null);
209
  const updateDebugInfo = useCallback(() => {
210
    const hotInstance = hotRef.current?.hotInstance;
211

212
    if (hotInstance) {
213
      setDebugInfo({
214
        isListening: hotInstance.isListening(),
215
        focusScope: hotInstance.getFocusScopeManager().getActiveScopeId(),
216
        shortcutsContext: hotInstance.getShortcutManager().getActiveContextName(),
217
      });
218
    }
219
  }, []);
220

221
  useEffect(() => {
222
    const hotInstance = hotRef.current?.hotInstance;
223

224
    if (hotInstance) {
225
      hotInstance.getPlugin('dialog').show({
226
        content: 'This is a simple text message displayed in the dialog.',
227
        closable: true,
228
        background: 'semi-transparent',
229
      });
230
    }
231
  }, []);
232

233
  useEffect(() => {
234
    const interval = setInterval(updateDebugInfo, 200);
235

236
    return () => clearInterval(interval);
237
  }, [updateDebugInfo]);
238

239
  return (
240
    <div className="example-container">
241
      <input
242
        className="placeholder-input"
243
        type="text"
244
        name="focusable-text-input"
245
        placeholder="Focusable top text input"
246
      />
247

248
      <Table hotTableRef={hotRef} data={data} />
249

250
      <input
251
        className="placeholder-input"
252
        type="text"
253
        name="focusable-text-input"
254
        placeholder="Focusable bottom text input"
255
      />
256

257
      <DebugInfo debugInfo={debugInfo} />
258
    </div>
259
  );
260
};
261

262
export default ExampleComponent;

1
.placeholder-input {
2
  max-width: 20rem;
3
  padding: 0.4rem 0.625rem;
4
  font-size: var(--sl-text-sm);
5
  line-height: 1.25rem;
6
  color: var(--sl-color-text);
7
  background: none;
8
  border: 1px solid var(--sl-color-gray-5);
9
  border-radius: 0;
10
  outline: none;
11
}
12

13
.placeholder-input::placeholder {
14
  color: var(--sl-color-gray-3);
15
}
16

17
.placeholder-input:focus {
18
  border-color: var(--sl-color-accent);
19
}
20

21
.example-container {
22
  gap: 1rem;
23
  display: flex;
24
  flex-direction: column;
25
}
26

27
.example-container > strong {
28
  font-size: 0.875rem;
29
  font-weight: 600;
30
  color: var(--sl-color-white);
31
  margin: 0.5rem 0 0;
32
}
33

34
.example-container .debug-table {
35
  font-size: var(--sl-text-sm);
36
  border-collapse: collapse;
37
  width: 100%;
38
}
39

40
.example-container .debug-table td {
41
  padding: 0.4rem 0.75rem !important;
42
  border-bottom: 1px solid var(--sl-color-gray-5);
43
  color: var(--sl-color-gray-2);
44
}
45

46
.example-container .debug-table td:last-child {
47
  font-family: var(--sl-font-mono, ui-monospace, monospace);
48
}
49

50
.example-container .debug-table td code {
51
  font-size: var(--sl-text-xs);
52
}

Register a focus scope

To register a focus scope:

Access the FocusScopeManager API:

1
const focusScopeManager = hot.getFocusScopeManager();

Use the registerScope() method:

1
focusScopeManager.registerScope('customScope', containerElement);

Connect a scope with a shortcuts context

To connect a scope with a shortcuts context, use the shortcutsContextName option. When the scope is activated, the shortcuts context automatically switches to the scope’s specified context name. This allows you to define custom shortcuts that work only within that scope. For more information, see the Custom shortcuts page. If no context name is specified, the scope uses the grid context name by default.

1
const focusScopeManager = hot.getFocusScopeManager();
2
const shortcutManager = hot.getShortcutManager();
3

4
focusScopeManager.registerScope('customScope', containerElement, {
5
  shortcutsContextName: 'plugin:customScope',
6
});
7

8
// Add shortcuts to the customScope context
9
const customScopeContext = shortcutManager.getContext('plugin:customScope');
10

11
customScopeContext.addShortcut({
12
  group: 'customScope',
13
  keys: [['enter']],
14
  callback: () => {
15
    console.log('Enter pressed within the customScope scope');
16
  },
17
});

Add conditional scope activation

To add conditional scope activation, use the runOnlyIf option. This allows you to enable or disable the scope based on custom logic. The option is useful for situations where your UI depends on whether it has any focusable elements, or when you want to prevent the scope from activating for a particular part of the UI. For cases where focus should bypass the scope activation after Tab or Shift+Tab key presses, the logic should return false.

1
const focusScopeManager = hot.getFocusScopeManager();
2

3
focusScopeManager.registerScope('customScope', containerElement, {
4
  runOnlyIf: () => isPluginActive(),
5
});

Custom focus detection

By default, a scope is considered active if the focused element is within the scope’s container element. However, there are cases where you need to provide custom logic to determine if the scope should be active. You can provide custom logic using the contains option.

1
const focusScopeManager = hot.getFocusScopeManager();
2

3
focusScopeManager.registerScope('myPlugin', containerElement, {
4
  contains: (target) => {
5
    // check if the target is within the scope's container element or
6
    // if its parent has the 'my-plugin' class
7
    return containerElement.contains(target) || target.closest('.my-plugin');
8
  },
9
  onActivate: (focusSource) => {
10
    console.log('MyPlugin scope activated');
11
  },
12
});

Scope callbacks

You can provide a callback function to be called when the scope is activated using the onActivate option. The callback function is called with the source of the activation as the first argument. You can also provide a callback function to be called when the scope is deactivated using the onDeactivate option.

The focusSource argument can be one of the following values:

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.

1
const focusScopeManager = hot.getFocusScopeManager();
2

3
focusScopeManager.registerScope('customScope', containerElement, {
4
  onActivate: (focusSource) => {
5
    console.log('Custom scope activated');
6
  },
7
  onDeactivate: () => {
8
    console.log('Custom scope deactivated');
9
  },
10
});

Manage focus scopes

Get the active scope

To get the currently active scope ID:

1
const focusScopeManager = hot.getFocusScopeManager();
2
const activeScopeId = focusScopeManager.getActiveScopeId();
3

4
if (activeScopeId) {
5
  console.log(`Active scope: ${activeScopeId}`);
6
} else {
7
  console.log('No active scope');
8
}

Activate a scope

The focus manager automatically tries to activate the appropriate scope based on the focused element. However, there are cases where you need to manually activate a scope. For example, you might need to activate a scope after programmatically triggering an action. An example is the Dialog plugin: when the show() method is called, it manually activates its focus scope as there is no event triggered that would activate the scope.

1
const focusScopeManager = hot.getFocusScopeManager();
2

3
focusScopeManager.activateScope('myPlugin');

Deactivate a scope

To manually deactivate a scope by its ID:

1
const focusScopeManager = hot.getFocusScopeManager();
2

3
focusScopeManager.deactivateScope('myPlugin');

Unregister a scope

To remove a scope from the collection:

1
const focusScopeManager = hot.getFocusScopeManager();
2

3
focusScopeManager.unregisterScope('myPlugin');

Automatic focus management

The focus scope manager automatically:

Listens to document events and activates the appropriate scope based on the focused element
Updates the Core#isListening state based on scope activity
Switches the shortcuts context to the scope’s specified context name when the scope is activated
Handles tab navigation between scopes

API reference

For the complete API reference, see the following pages:

APIs

FocusScopeManager

Configuration options

tabMoves

tabNavigation

navigableHeaders

Core methods

getFocusScopeManager()

Hooks

Troubleshooting

Didn’t find what you need? Try this:

View related topics

Report an issue

Start a discussion

Contact our technical support