|
|
@@ -59,7 +59,13 @@ export default function RelativeModal({ className, role = 'dialog', children, on
|
|
|
if (top + menuHeight > windowHeight - WINDOW_PADDING) {
|
|
|
top = y - menuHeight;
|
|
|
}
|
|
|
- setPosition({ left, top: top + window.scrollY, width });
|
|
|
+
|
|
|
+ if (top <= WINDOW_PADDING) {
|
|
|
+ top = WINDOW_PADDING;
|
|
|
+ }
|
|
|
+
|
|
|
+ const maxHeight = windowHeight - WINDOW_PADDING * 2 > menuHeight ? null : windowHeight - WINDOW_PADDING * 2;
|
|
|
+ setPosition({ left, top: top + window.scrollY, width, height: maxHeight });
|
|
|
const focusable = ref.current.querySelector('[tabindex]');
|
|
|
focusable && console.log('focusing');
|
|
|
focusable && focusable.focus();
|
|
|
@@ -76,16 +82,20 @@ export default function RelativeModal({ className, role = 'dialog', children, on
|
|
|
|
|
|
const menu = (
|
|
|
<Fragment>
|
|
|
- <div className="absolute inset-0" onClick={handleDismiss} />
|
|
|
+ <div className="absolute inset-0 z-10" onClick={handleDismiss} />
|
|
|
<div
|
|
|
- className={`z-10 bg-white dark:bg-gray-700 dark:text-white absolute shadow-lg rounded w-auto max-h-48 transition-all duration-75 transform scale-90 opacity-0 ${
|
|
|
+ className={`z-10 bg-white dark:bg-gray-700 dark:text-white absolute shadow-lg rounded w-auto h-auto transition-all duration-75 transform scale-90 opacity-0 overflow-scroll ${
|
|
|
show ? 'scale-100 opacity-100' : ''
|
|
|
} ${className}`}
|
|
|
onkeydown={handleKeydown}
|
|
|
role={role}
|
|
|
ref={ref}
|
|
|
style={
|
|
|
- position.width > 0 ? `min-width: ${position.width}px; top: ${position.top}px; left: ${position.left}px` : ''
|
|
|
+ position.width > 0
|
|
|
+ ? `min-width: ${position.width}px; ${position.height ? `max-height: ${position.height}px;` : ''} top: ${
|
|
|
+ position.top
|
|
|
+ }px; left: ${position.left}px`
|
|
|
+ : ''
|
|
|
}
|
|
|
>
|
|
|
{children}
|
Paul Armstrong