diff --git a/packages/form/src/select/Select.tsx b/packages/form/src/select/Select.tsx index ea256c0db6..81f0acdae3 100644 --- a/packages/form/src/select/Select.tsx +++ b/packages/form/src/select/Select.tsx @@ -190,7 +190,7 @@ export const Select = forwardRef(function Select( labelClassName, displayLabelStyle, displayLabelClassName, - listboxStyle, + listboxStyle: propListboxStyle, listboxClassName, anchor = BELOW_CENTER_ANCHOR, theme: propTheme, @@ -286,12 +286,13 @@ export const Select = forwardRef(function Select( }); const { - style: fixedStyle, + style: listboxStyle, onEnter, onEntering, onEntered, onExited, } = useFixedPositioning({ + style: propListboxStyle, fixedTo: () => ref.current, anchor, onScroll: closeOnScroll ? hide : undefined, @@ -393,7 +394,7 @@ export const Select = forwardRef(function Select( void; + onResize?(event: Event): void; /** * An optional function to call when the element is in the DOM and a window scroll @@ -119,9 +136,9 @@ function getFixedTo(fixedTo: FixedTo): HTMLElement | null { return fixedTo; } -interface ReturnValue extends Required { - style?: CSSProperties; - updateStyle: () => void; +interface FixedPositioningHookReturnValue extends Required { + style: CSSProperties; + updateStyle(): void; } /** @@ -138,6 +155,7 @@ interface ReturnValue extends Required { * It is recommended to start the exit animation when that happens though. */ export function useFixedPositioning({ + style: propStyle, onEnter, onEntering, onEntered, @@ -159,7 +177,7 @@ export function useFixedPositioning({ preventOverlap = false, disableSwapping = false, disableVHBounds = false, -}: FixedPositioningOptions): ReturnValue { +}: FixedPositioningOptions): FixedPositioningHookReturnValue { const [style, setStyle] = useState(); const [element, setElement] = useState(null); @@ -326,7 +344,7 @@ export function useFixedPositioning({ }, [initialX, initialY]); return { - style, + style: { ...style, ...propStyle }, updateStyle, onEnter: handleEnter, onEntering: handleEntering,