Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(select next): add appendTo #9562

Merged
merged 1 commit into from
Sep 21, 2023
Merged

feat(select next): add appendTo #9562

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 20 additions & 9 deletions packages/react-core/src/next/components/Select/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,14 @@ export interface SelectProps extends MenuProps, OUIAProps {
zIndex?: number;
/** @beta Determines the accessible role of the select. For a checkbox select pass in "menu". */
role?: string;
/** The container to append the select to. Defaults to 'inline'.
* If your select is being cut off you can append it to an element higher up the DOM tree.
* Some examples:
* appendTo="inline"
* appendTo={() => document.body}
* appendTo={document.getElementById('target')}
*/
appendTo?: HTMLElement | (() => HTMLElement) | 'inline';
}

const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
Expand All @@ -45,6 +53,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
innerRef,
zIndex = 9999,
role = 'listbox',
appendTo = 'inline',
...props
}: SelectProps & OUIAProps) => {
const localMenuRef = React.useRef<HTMLDivElement>();
Expand Down Expand Up @@ -115,17 +124,19 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
<MenuContent>{children}</MenuContent>
</Menu>
);
return (
const popperProps = {
trigger: toggle(toggleRef),
removeFindDomNode: true,
popper: menu,
isVisible: isOpen,
zIndex
};
return appendTo === 'inline' ? (
<div ref={containerRef}>
<Popper
trigger={toggle(toggleRef)}
removeFindDomNode
popper={menu}
appendTo={containerRef.current || undefined}
isVisible={isOpen}
zIndex={zIndex}
/>
<Popper {...popperProps} appendTo={containerRef.current || undefined} />
</div>
) : (
<Popper {...popperProps} appendTo={appendTo} />
);
};

Expand Down