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

🐛 fix issue with select menu getting cut by edge of modal #1428

Merged
merged 6 commits into from
Oct 5, 2023
Merged

🐛 fix issue with select menu getting cut by edge of modal #1428

Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
14dd35b
fix issue with select menu getting cut by edge of modal
gitdallas Oct 3, 2023
c7a9b11
remove unnecessary brackets
gitdallas Oct 3, 2023
da050d4
add maxheight to select
gitdallas Oct 4, 2023
4a5c462
cleanup console logs
gitdallas Oct 4, 2023
044401e
Merge branch 'main' into fix/select-cut-by-modal
gitdallas Oct 4, 2023
7ed9d05
Merge branch 'main' into fix/select-cut-by-modal
sjd78 Oct 5, 2023
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
4 changes: 3 additions & 1 deletion client/src/app/components/SimpleSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,11 @@ export const SimpleSelect: React.FC<ISimpleSelectProps> = ({
...props
}) => {
const [isOpen, setIsOpen] = useState(false);

console.log({ ...props });
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This guy snuck in. Otherwise LGTM.

return (
<Select
menuAppendTo="parent" // prevent menu from being clipped by modal edges
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding this overflow seems to be a much better experience, but not sure if it is the PF friendly way to accomplish this.

Suggested change
menuAppendTo="parent" // prevent menu from being clipped by modal edges
menuAppendTo="parent" // prevent menu from being clipped by modal edges
style={{ overflowY: "auto", maxHeight: "200px" }}

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screenshot 2023-10-03 at 7 54 02 PM

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i added a maxHeight of 200

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about the overflow?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see the overflow now with the maxHeight set. LGTM other than the console.log

maxHeight={200}
placeholderText={placeholderText}
toggleAriaLabel={toggleAriaLabel}
isOpen={isOpen}
Expand Down