Skip to content

Commit 353af74

Browse files
silviuaavramsilviuaavram
committed
wip menulist
1 parent 48d3f5a commit 353af74

File tree

1 file changed

+103
-70
lines changed

1 file changed

+103
-70
lines changed

‎packages/mui-material/src/MenuList/MenuList.js‎

Lines changed: 103 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import getScrollbarSize from '../utils/getScrollbarSize';
99
import useForkRef from '../utils/useForkRef';
1010
import useEnhancedEffect from '../utils/useEnhancedEffect';
1111
import { ownerWindow } from '../utils';
12+
import useRovingTabIndex from '../Stepper/utils/useRovingTabIndex';
1213

1314
function nextItem(list, item, disableListWrap) {
1415
if (list === item) {
@@ -143,73 +144,73 @@ const MenuList = React.forwardRef(function MenuList(props, ref) {
143144
[],
144145
);
145146

146-
const handleKeyDown = (event) => {
147-
const list = listRef.current;
148-
const key = event.key;
149-
const isModifierKeyPressed = event.ctrlKey || event.metaKey || event.altKey;
147+
// const handleKeyDown = (event) => {
148+
// const list = listRef.current;
149+
// const key = event.key;
150+
// const isModifierKeyPressed = event.ctrlKey || event.metaKey || event.altKey;
150151

151-
if (isModifierKeyPressed) {
152-
if (onKeyDown) {
153-
onKeyDown(event);
154-
}
152+
// if (isModifierKeyPressed) {
153+
// if (onKeyDown) {
154+
// onKeyDown(event);
155+
// }
155156

156-
return;
157-
}
157+
// return;
158+
// }
158159

159-
/**
160-
* @type {Element} - will always be defined since we are in a keydown handler
161-
* attached to an element. A keydown event is either dispatched to the activeElement
162-
* or document.body or document.documentElement. Only the first case will
163-
* trigger this specific handler.
164-
*/
165-
const currentFocus = getActiveElement(ownerDocument(list));
166-
167-
if (key === 'ArrowDown') {
168-
// Prevent scroll of the page
169-
event.preventDefault();
170-
moveFocus(list, currentFocus, disableListWrap, disabledItemsFocusable, nextItem);
171-
} else if (key === 'ArrowUp') {
172-
event.preventDefault();
173-
moveFocus(list, currentFocus, disableListWrap, disabledItemsFocusable, previousItem);
174-
} else if (key === 'Home') {
175-
event.preventDefault();
176-
moveFocus(list, null, disableListWrap, disabledItemsFocusable, nextItem);
177-
} else if (key === 'End') {
178-
event.preventDefault();
179-
moveFocus(list, null, disableListWrap, disabledItemsFocusable, previousItem);
180-
} else if (key.length === 1) {
181-
const criteria = textCriteriaRef.current;
182-
const lowerKey = key.toLowerCase();
183-
const currTime = performance.now();
184-
if (criteria.keys.length > 0) {
185-
// Reset
186-
if (currTime - criteria.lastTime > 500) {
187-
criteria.keys = [];
188-
criteria.repeating = true;
189-
criteria.previousKeyMatched = true;
190-
} else if (criteria.repeating && lowerKey !== criteria.keys[0]) {
191-
criteria.repeating = false;
192-
}
193-
}
194-
criteria.lastTime = currTime;
195-
criteria.keys.push(lowerKey);
196-
const keepFocusOnCurrent =
197-
currentFocus && !criteria.repeating && textCriteriaMatches(currentFocus, criteria);
198-
if (
199-
criteria.previousKeyMatched &&
200-
(keepFocusOnCurrent ||
201-
moveFocus(list, currentFocus, false, disabledItemsFocusable, nextItem, criteria))
202-
) {
203-
event.preventDefault();
204-
} else {
205-
criteria.previousKeyMatched = false;
206-
}
207-
}
160+
// /**
161+
// * @type {Element} - will always be defined since we are in a keydown handler
162+
// * attached to an element. A keydown event is either dispatched to the activeElement
163+
// * or document.body or document.documentElement. Only the first case will
164+
// * trigger this specific handler.
165+
// */
166+
// const currentFocus = getActiveElement(ownerDocument(list));
208167

209-
if (onKeyDown) {
210-
onKeyDown(event);
211-
}
212-
};
168+
// if (key === 'ArrowDown') {
169+
// // Prevent scroll of the page
170+
// event.preventDefault();
171+
// moveFocus(list, currentFocus, disableListWrap, disabledItemsFocusable, nextItem);
172+
// } else if (key === 'ArrowUp') {
173+
// event.preventDefault();
174+
// moveFocus(list, currentFocus, disableListWrap, disabledItemsFocusable, previousItem);
175+
// } else if (key === 'Home') {
176+
// event.preventDefault();
177+
// moveFocus(list, null, disableListWrap, disabledItemsFocusable, nextItem);
178+
// } else if (key === 'End') {
179+
// event.preventDefault();
180+
// moveFocus(list, null, disableListWrap, disabledItemsFocusable, previousItem);
181+
// } else if (key.length === 1) {
182+
// const criteria = textCriteriaRef.current;
183+
// const lowerKey = key.toLowerCase();
184+
// const currTime = performance.now();
185+
// if (criteria.keys.length > 0) {
186+
// // Reset
187+
// if (currTime - criteria.lastTime > 500) {
188+
// criteria.keys = [];
189+
// criteria.repeating = true;
190+
// criteria.previousKeyMatched = true;
191+
// } else if (criteria.repeating && lowerKey !== criteria.keys[0]) {
192+
// criteria.repeating = false;
193+
// }
194+
// }
195+
// criteria.lastTime = currTime;
196+
// criteria.keys.push(lowerKey);
197+
// const keepFocusOnCurrent =
198+
// currentFocus && !criteria.repeating && textCriteriaMatches(currentFocus, criteria);
199+
// if (
200+
// criteria.previousKeyMatched &&
201+
// (keepFocusOnCurrent ||
202+
// moveFocus(list, currentFocus, false, disabledItemsFocusable, nextItem, criteria))
203+
// ) {
204+
// event.preventDefault();
205+
// } else {
206+
// criteria.previousKeyMatched = false;
207+
// }
208+
// }
209+
210+
// if (onKeyDown) {
211+
// onKeyDown(event);
212+
// }
213+
// };
213214

214215
const handleRef = useForkRef(listRef, ref);
215216

@@ -265,21 +266,52 @@ const MenuList = React.forwardRef(function MenuList(props, ref) {
265266
}
266267
});
267268

269+
const { getContainerProps, getItemProps } = useRovingTabIndex({
270+
focusableIndex: activeItemIndex,
271+
orientation: 'vertical',
272+
});
273+
const {onFocus, onKeyDown: rovingTabIndexOnKeyDown} = getContainerProps();
274+
275+
const handleKeyDown = React.useCallback(
276+
(event) => {
277+
const isModifierKeyPressed = event.ctrlKey || event.metaKey || event.altKey;
278+
279+
if (isModifierKeyPressed && onKeyDown) {
280+
onKeyDown(event);
281+
282+
return;
283+
}
284+
285+
rovingTabIndexOnKeyDown(event);
286+
287+
// keys focus here
288+
289+
if (onKeyDown) {
290+
onKeyDown(event);
291+
}
292+
},
293+
[onKeyDown, rovingTabIndexOnKeyDown],
294+
);
295+
296+
let foucsableIndex = 0;
268297
const items = React.Children.map(children, (child, index) => {
298+
if (!React.isValidElement(child)) {
299+
return child;
300+
}
301+
302+
const newChildProps = getItemProps(foucsableIndex++, child.ref);
303+
269304
if (index === activeItemIndex) {
270-
const newChildProps = {};
271305
if (autoFocusItem) {
272306
newChildProps.autoFocus = true;
273307
}
274308

275-
if (child.props.tabIndex === undefined && variant === 'selectedMenu') {
276-
newChildProps.tabIndex = 0;
277-
}
278-
279-
return React.cloneElement(child, newChildProps);
309+
// if (child.props.tabIndex === undefined && variant === 'selectedMenu') {
310+
// newChildProps.tabIndex = 0;
311+
// }
280312
}
281313

282-
return child;
314+
return React.cloneElement(child, newChildProps);
283315
});
284316

285317
return (
@@ -288,6 +320,7 @@ const MenuList = React.forwardRef(function MenuList(props, ref) {
288320
ref={handleRef}
289321
className={className}
290322
onKeyDown={handleKeyDown}
323+
onFocus={onFocus}
291324
tabIndex={autoFocus ? 0 : -1}
292325
{...other}
293326
>

0 commit comments

Comments
 (0)