tedkulp/Sonarr
1
0
Fork 0
mirror of https://github.com/Sonarr/Sonarr.git synced 2026-04-19 21:46:43 -04:00
Code Issues Projects Releases Wiki Activity

Fixed: Drop downs flickering in some cases

Browse Source 
Closes #7608
This commit is contained in:
Mark McDowall
2025-01-29 18:46:19 -08:00
parent 4ba9b21bb7
commit 3b024443c5
1 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/Components/Form/Select/EnhancedSelectInput.tsx
+7 -6
View File
@@ -29,6 +29,8 @@ import HintedSelectInputOption from './HintedSelectInputOption';
import HintedSelectInputSelectedValue from './HintedSelectInputSelectedValue'; import HintedSelectInputSelectedValue from './HintedSelectInputSelectedValue';
import styles from './EnhancedSelectInput.css'; import styles from './EnhancedSelectInput.css';
const MINIMUM_DISTANCE_FROM_EDGE = 10;
function isArrowKey(keyCode: number) { function isArrowKey(keyCode: number) {
return keyCode === keyCodes.UP_ARROW || keyCode === keyCodes.DOWN_ARROW; return keyCode === keyCodes.UP_ARROW || keyCode === keyCodes.DOWN_ARROW;
} }
@@ -189,14 +191,9 @@ function EnhancedSelectInput<T extends EnhancedSelectInputValue<V>, V>(
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
const handleComputeMaxHeight = useCallback((data: any) => { const handleComputeMaxHeight = useCallback((data: any) => {
const { top, bottom } = data.offsets.reference;
const windowHeight = window.innerHeight; const windowHeight = window.innerHeight;
if (/^bottom/.test(data.placement)) { data.styles.maxHeight = windowHeight - MINIMUM_DISTANCE_FROM_EDGE;
data.styles.maxHeight = windowHeight - bottom;
} else {
data.styles.maxHeight = top;
}
return data; return data;
}, []); }, []);
@@ -508,6 +505,10 @@ function EnhancedSelectInput<T extends EnhancedSelectInputValue<V>, V>(
enabled: true, enabled: true,
fn: handleComputeMaxHeight, fn: handleComputeMaxHeight,
}, },
preventOverflow: {
enabled: true,
boundariesElement: 'viewport',
},
}} }}
> >
{({ ref, style, scheduleUpdate }) => { {({ ref, style, scheduleUpdate }) => {