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: Prevent dropdown misplacement in iOS #3202

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

fix: Prevent dropdown misplacement in iOS #3202

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5b9cecc
fix: Prevent dropdown misplacement in iOS
jperals Jan 16, 2025
291cc98
Revert "fix: Prevent dropdown misplacement in iOS"
jperals Jan 17, 2025
ef671e1
Use absolute position
jperals Jan 17, 2025
9a0c7c1
Use absolute positioning only when iOS virtual keyboard is present
jperals Jan 17, 2025
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
30 changes: 21 additions & 9 deletions src/internal/components/dropdown/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -233,16 +233,20 @@

// Position normal overflow dropdowns with fixed positioning relative to viewport
if (expandToViewport && !interior) {
target.style.position = 'fixed';
const isIOSVirtualKeyboardPresent =
window.visualViewport?.height && window.visualViewport.height < window.innerHeight;
target.style.position = isIOSVirtualKeyboardPresent ? 'absolute' : 'fixed';
const verticalScrollOffset = isIOSVirtualKeyboardPresent ? document.documentElement.scrollTop : 0;
const horizontalScrollOffset = isIOSVirtualKeyboardPresent ? document.documentElement.scrollLeft : 0;
if (position.dropBlockStart) {
target.style.insetBlockEnd = `calc(100% - ${triggerBox.top}px)`;
target.style.insetBlockEnd = `calc(100% - ${verticalScrollOffset + triggerBox.top}px)`;

Check warning on line 242 in src/internal/components/dropdown/index.tsx

View check run for this annotation

Codecov / codecov/patch

src/internal/components/dropdown/index.tsx#L242 

Added line #L242 was not covered by tests
} else {
target.style.insetBlockStart = `${triggerBox.bottom}px`;
target.style.insetBlockStart = `${verticalScrollOffset + triggerBox.bottom}px`;
}
if (position.dropInlineStart) {
target.style.insetInlineStart = `calc(${triggerBox.right}px - ${position.inlineSize})`;
target.style.insetInlineStart = `calc(${horizontalScrollOffset + triggerBox.right}px - ${position.inlineSize})`;

Check warning on line 247 in src/internal/components/dropdown/index.tsx

View check run for this annotation

Codecov / codecov/patch

src/internal/components/dropdown/index.tsx#L247 

Added line #L247 was not covered by tests
} else {
target.style.insetInlineStart = `${triggerBox.left}px`;
target.style.insetInlineStart = `${horizontalScrollOffset + triggerBox.left}px`;
}
// Keep track of the initial dropdown position and direction.
// Dropdown direction doesn't need to change as the user scrolls, just needs to stay attached to the trigger.
Expand Down Expand Up @@ -391,18 +395,26 @@
}
const updateDropdownPosition = () => {
if (triggerRef.current && dropdownRef.current && verticalContainerRef.current) {
const isIOSVirtualKeyboardPresent =
window.visualViewport?.height && window.visualViewport.height < window.innerHeight;

dropdownRef.current.style.position = isIOSVirtualKeyboardPresent ? 'absolute' : 'fixed';

const verticalScrollOffset = isIOSVirtualKeyboardPresent ? document.documentElement.scrollTop : 0;
const horizontalScrollOffset = isIOSVirtualKeyboardPresent ? document.documentElement.scrollLeft : 0;

const triggerRect = getLogicalBoundingClientRect(triggerRef.current);
const target = dropdownRef.current;
if (fixedPosition.current) {
if (fixedPosition.current.dropBlockStart) {
dropdownRef.current.style.insetBlockEnd = `calc(100% - ${triggerRect.insetBlockStart}px)`;
dropdownRef.current.style.insetBlockEnd = `calc(100% - ${verticalScrollOffset + triggerRect.insetBlockStart}px)`;

Check warning on line 410 in src/internal/components/dropdown/index.tsx

View check run for this annotation

Codecov / codecov/patch

src/internal/components/dropdown/index.tsx#L410 

Added line #L410 was not covered by tests
} else {
target.style.insetBlockStart = `${triggerRect.insetBlockEnd}px`;
target.style.insetBlockStart = `${verticalScrollOffset + triggerRect.insetBlockEnd}px`;
}
if (fixedPosition.current.dropInlineStart) {
target.style.insetInlineStart = `calc(${triggerRect.insetInlineEnd}px - ${fixedPosition.current.inlineSize})`;
target.style.insetInlineStart = `calc(${horizontalScrollOffset + triggerRect.insetInlineEnd}px - ${fixedPosition.current.inlineSize})`;

Check warning on line 415 in src/internal/components/dropdown/index.tsx

View check run for this annotation

Codecov / codecov/patch

src/internal/components/dropdown/index.tsx#L415 

Added line #L415 was not covered by tests
} else {
target.style.insetInlineStart = `${triggerRect.insetInlineStart}px`;
target.style.insetInlineStart = `${horizontalScrollOffset + triggerRect.insetInlineStart}px`;
}
}
}
Expand Down
Loading