Skip to content

GitLab

Commit 649c2b3d authored by Stefan Probst's avatar Stefan Probst
Browse files

fix: fix select popover positioning on mobile

parent 2455d350
Pipeline #292828 passed with stages
in 11 minutes and 22 seconds
Hide whitespace changes
Inline Side-by-side
src/lib/core/ui/Select/Select.tsx
View file @ 649c2b3d
......@@ -14,7 +14,6 @@ import useComposedRef from 'use-composed-ref'
import { useI18n } from '@/lib/core/i18n/useI18n'
import { Field } from '@/lib/core/ui/Field/Field'
import { FieldButton } from '@/lib/core/ui/FieldButton/FieldButton'
import { useIsMobileDevice } from '@/lib/core/ui/hooks/useIsMobileDevice'
import { Icon } from '@/lib/core/ui/Icon/Icon'
import AlertIcon from '@/lib/core/ui/icons/alert.svg?symbol-icon'
import CheckmarkIcon from '@/lib/core/ui/icons/checkmark.svg?symbol-icon'
......@@ -25,7 +24,6 @@ import { useListBoxLayout } from '@/lib/core/ui/ListBox/useListBoxLayout'
import { Popover } from '@/lib/core/ui/Popover/Popover'
import { ProgressSpinner } from '@/lib/core/ui/ProgressSpinner/ProgressSpinner'
import css from '@/lib/core/ui/Select/Select.module.css'
import { Tray } from '@/lib/core/ui/Tray/Tray'
export interface SelectProps<T extends object> extends Omit<AriaSelectProps<T>, 'isLoading'> {
/** @default 'start' */
......@@ -109,10 +107,8 @@ const SelectBase = forwardRef(function SelectBase<T extends object>(
triggerRef,
)
const isMobile = useIsMobileDevice()
const { overlayProps, placement, updatePosition } = useOverlayPosition({
isOpen: state.isOpen && !isMobile,
isOpen: state.isOpen,
maxHeight,
onClose: state.close,
overlayRef: popoverRef,
......@@ -129,17 +125,8 @@ const SelectBase = forwardRef(function SelectBase<T extends object>(
const isInvalid = validationState === 'invalid'
// TODO: add ResizeObserver to useOverlayPosition so we don't need this.
useLayoutEffect(() => {
if (state.isOpen) {
requestAnimationFrame(() => {
updatePosition()
})
}
}, [state.isOpen, updatePosition])
const listbox = (
<FocusScope contain={isMobile} restoreFocus>
<FocusScope contain restoreFocus>
<DismissButton
onDismiss={() => {
return state.close()
......@@ -148,6 +135,7 @@ const SelectBase = forwardRef(function SelectBase<T extends object>(
<ListBoxBase<T>
ref={listboxRef}
{...menuProps}
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
autoFocus={state.focusStrategy || true}
color={color}
disallowEmptySelection
......@@ -157,9 +145,6 @@ const SelectBase = forwardRef(function SelectBase<T extends object>(
onLoadMore={props.onLoadMore}
shouldSelectOnPressUp
state={state}
// TODO: Set max height: inherit so Tray scrolling works
style={{ maxHeight: 'inherit' }}
width={isMobile ? '100%' : undefined}
/>
<DismissButton
onDismiss={() => {
......@@ -172,45 +157,25 @@ const SelectBase = forwardRef(function SelectBase<T extends object>(
const [buttonWidth, setButtonWidth] = useState<number | undefined>(undefined)
const onResize = useCallback(() => {
if (!isMobile && triggerRef.current) {
if (triggerRef.current) {
const width = triggerRef.current.offsetWidth
setButtonWidth(width)
}
}, [triggerRef, setButtonWidth, isMobile])
}, [triggerRef, setButtonWidth])
useResizeObserver({ onResize, ref: triggerRef })
useLayoutEffect(onResize, [state.selectedKey, onResize])
// let overlay
// if (isMobile) {
// overlay = (
// <Tray isOpen={state.isOpen} onClose={state.close}>
// {listbox}
// </Tray>
// )
// } else {
// const style = {
// ...overlayProps.style,
// minWidth: buttonWidth,
// width: buttonWidth,
// // width: menuWidth ?? buttonWidth,
// }
// TODO: add ResizeObserver to useOverlayPosition so we don't need this.
useLayoutEffect(() => {
if (state.isOpen) {
requestAnimationFrame(() => {
updatePosition()
})
}
}, [state.isOpen, updatePosition])
// overlay = (
// <Popover
// ref={popoverRef}
// hideArrow
// isOpen={state.isOpen}
// onClose={state.close}
// placement={placement}
// shouldCloseOnBlur
// style={style}
// >
// {listbox}
// </Popover>
// )
// }
const style = {
...overlayProps.style,
minWidth: buttonWidth,
......@@ -236,8 +201,10 @@ const SelectBase = forwardRef(function SelectBase<T extends object>(
<span
{...valueProps}
className={css['select-value']}
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
data-placeholder={state.selectedItem == null ? '' : undefined}
>
{/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition */}
{state.selectedItem != null ? state.selectedItem.rendered : placeholder}
</span>
)
......
yarn.lock
View file @ 649c2b3d
......@@ -13444,10 +13444,10 @@ ms@2.1.3, ms@^2.1.1:
resolved "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
msw-storybook-addon@^1.6.2:
version "1.6.2"
resolved "https://registry.npmjs.org/msw-storybook-addon/-/msw-storybook-addon-1.6.2.tgz#c34361869ca1eb8f5315b554589784e3cd1f6a70"
integrity sha512-N0eaHY/T2aUGlG8QtX6wSxHXqGS3zum98R1m+AwrCigOxjOWSfGunwGIGVZJCrAWDrS8iIGmfd+ZGyfXuJXy0g==
msw-storybook-addon@^1.6.3:
version "1.6.3"
resolved "https://registry.npmjs.org/msw-storybook-addon/-/msw-storybook-addon-1.6.3.tgz#964df555efa67a07fddccd5966d6794a070e4b89"
integrity sha512-Ps80WdRmXsmenoTwfrgKMNpQD8INUUFyUFyZOecx8QjuqSlL++UYrLaGyACXN2goOn+/VS6rb0ZapbjrasPClg==
dependencies:
"@storybook/addons" "^6.0.0"
is-node-process "^1.0.1"
......@@ -13883,11 +13883,6 @@ netlify-cms-widget-text@^2.4.1:
dependencies:
react-textarea-autosize "^8.0.0"
 
next-theme@^0.1.5:
version "0.1.5"
resolved "https://registry.npmjs.org/next-theme/-/next-theme-0.1.5.tgz#aa6655c516892925e577349d7715a8ed54bad727"
integrity sha512-WR8UCLEFjWvRl+UO2lTM4pGo7R4jzGZqQ6YL3hiL1Ns587Qb91GhJZLPu/Aa4ExtGQ/5wlcDX8zDYZoCN9oDPw==
next@^12.1.5-canary.2:
version "12.1.5-canary.2"
resolved "https://registry.npmjs.org/next/-/next-12.1.5-canary.2.tgz#af99fe07100f370c5dc7bb3c4b01b562acb48be7"
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment