carbon-react 114.17.0 → 114.17.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm/components/menu/__internal__/submenu/submenu.component.js +5 -2
- package/esm/components/menu/menu-item/menu-item.component.js +3 -2
- package/lib/components/menu/__internal__/submenu/submenu.component.js +5 -2
- package/lib/components/menu/menu-item/menu-item.component.js +3 -2
- package/package.json +1 -1
|
@@ -43,6 +43,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
|
|
|
43
43
|
const [submenuItemIds, setSubmenuItemIds] = useState([]);
|
|
44
44
|
const [characterString, setCharacterString] = useState("");
|
|
45
45
|
const shiftTabPressed = useRef(false);
|
|
46
|
+
const focusFirstMenuItemOnOpen = useRef(false);
|
|
46
47
|
const registerItem = useCallback(id => {
|
|
47
48
|
setSubmenuItemIds(prevState => {
|
|
48
49
|
return [...prevState, id];
|
|
@@ -109,6 +110,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
|
|
|
109
110
|
if (Events.isEnterKey(event) || Events.isSpaceKey(event) || Events.isDownKey(event) || Events.isUpKey(event)) {
|
|
110
111
|
event.preventDefault();
|
|
111
112
|
openSubmenu();
|
|
113
|
+
focusFirstMenuItemOnOpen.current = !href;
|
|
112
114
|
}
|
|
113
115
|
}
|
|
114
116
|
|
|
@@ -212,10 +214,11 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
|
|
|
212
214
|
}
|
|
213
215
|
}, [submenuItemIds, submenuOpen, href, numberOfChildren, submenuFocusId, findCurrentIndex, openSubmenu, closeSubmenu, onKeyDown, characterString, restartCharacterTimeout, startCharacterTimeout]);
|
|
214
216
|
useEffect(() => {
|
|
215
|
-
if (
|
|
217
|
+
if (focusFirstMenuItemOnOpen.current && submenuOpen && !submenuFocusId && submenuItemIds.length) {
|
|
218
|
+
focusFirstMenuItemOnOpen.current = false;
|
|
216
219
|
setSubmenuFocusId(submenuItemIds[0]);
|
|
217
220
|
}
|
|
218
|
-
}, [submenuOpen,
|
|
221
|
+
}, [submenuOpen, submenuFocusId, submenuItemIds]);
|
|
219
222
|
|
|
220
223
|
const handleClickAway = () => {
|
|
221
224
|
document.removeEventListener("click", handleClickAway);
|
|
@@ -123,7 +123,7 @@ const MenuItem = ({
|
|
|
123
123
|
href,
|
|
124
124
|
target,
|
|
125
125
|
rel,
|
|
126
|
-
onClick
|
|
126
|
+
onClick,
|
|
127
127
|
icon,
|
|
128
128
|
selected,
|
|
129
129
|
variant,
|
|
@@ -172,7 +172,8 @@ const MenuItem = ({
|
|
|
172
172
|
}, rest, {
|
|
173
173
|
inFullscreenView: inFullscreenView && !Object.keys(submenuContext).length,
|
|
174
174
|
menuOpen: menuOpen,
|
|
175
|
-
id: menuItemId.current
|
|
175
|
+
id: menuItemId.current,
|
|
176
|
+
onClick: updateFocusOnClick
|
|
176
177
|
}), /*#__PURE__*/React.createElement(StyledMenuItemWrapper, _extends({
|
|
177
178
|
as: inputRef.current ? "div" : Link,
|
|
178
179
|
isSearch: inputRef.current,
|
|
@@ -68,6 +68,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
|
|
|
68
68
|
const [submenuItemIds, setSubmenuItemIds] = (0, _react.useState)([]);
|
|
69
69
|
const [characterString, setCharacterString] = (0, _react.useState)("");
|
|
70
70
|
const shiftTabPressed = (0, _react.useRef)(false);
|
|
71
|
+
const focusFirstMenuItemOnOpen = (0, _react.useRef)(false);
|
|
71
72
|
const registerItem = (0, _react.useCallback)(id => {
|
|
72
73
|
setSubmenuItemIds(prevState => {
|
|
73
74
|
return [...prevState, id];
|
|
@@ -134,6 +135,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
|
|
|
134
135
|
if (_events.default.isEnterKey(event) || _events.default.isSpaceKey(event) || _events.default.isDownKey(event) || _events.default.isUpKey(event)) {
|
|
135
136
|
event.preventDefault();
|
|
136
137
|
openSubmenu();
|
|
138
|
+
focusFirstMenuItemOnOpen.current = !href;
|
|
137
139
|
}
|
|
138
140
|
}
|
|
139
141
|
|
|
@@ -237,10 +239,11 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
|
|
|
237
239
|
}
|
|
238
240
|
}, [submenuItemIds, submenuOpen, href, numberOfChildren, submenuFocusId, findCurrentIndex, openSubmenu, closeSubmenu, onKeyDown, characterString, restartCharacterTimeout, startCharacterTimeout]);
|
|
239
241
|
(0, _react.useEffect)(() => {
|
|
240
|
-
if (
|
|
242
|
+
if (focusFirstMenuItemOnOpen.current && submenuOpen && !submenuFocusId && submenuItemIds.length) {
|
|
243
|
+
focusFirstMenuItemOnOpen.current = false;
|
|
241
244
|
setSubmenuFocusId(submenuItemIds[0]);
|
|
242
245
|
}
|
|
243
|
-
}, [submenuOpen,
|
|
246
|
+
}, [submenuOpen, submenuFocusId, submenuItemIds]);
|
|
244
247
|
|
|
245
248
|
const handleClickAway = () => {
|
|
246
249
|
document.removeEventListener("click", handleClickAway);
|
|
@@ -147,7 +147,7 @@ const MenuItem = ({
|
|
|
147
147
|
href,
|
|
148
148
|
target,
|
|
149
149
|
rel,
|
|
150
|
-
onClick
|
|
150
|
+
onClick,
|
|
151
151
|
icon,
|
|
152
152
|
selected,
|
|
153
153
|
variant,
|
|
@@ -196,7 +196,8 @@ const MenuItem = ({
|
|
|
196
196
|
}, rest, {
|
|
197
197
|
inFullscreenView: inFullscreenView && !Object.keys(submenuContext).length,
|
|
198
198
|
menuOpen: menuOpen,
|
|
199
|
-
id: menuItemId.current
|
|
199
|
+
id: menuItemId.current,
|
|
200
|
+
onClick: updateFocusOnClick
|
|
200
201
|
}), /*#__PURE__*/_react.default.createElement(_menuItem.default, _extends({
|
|
201
202
|
as: inputRef.current ? "div" : _link.default,
|
|
202
203
|
isSearch: inputRef.current,
|