Horizontal scrolling is not working properly when full size is introduced in snapPointList

[isshi-hasegawa]

I'm using the react-spring-bottom-sheet library in my project. Recently, I introduced a 'full' size in addition to 'middle' and 'small' sizes in snapPointList.

The component of the bottom sheet in the 'middle' size originally had horizontally scrollable elements. However, with the introduction of 'full' size, vertical size changes are prioritized, and horizontal scrolling does not work.

Here is a simplified version of my code:

const BottomSheetBase: React.FC<TProps> = ({ size, setSize, snapPointList, children, ...props }: TProps) => {
  const sheetRef = useRef<BottomSheetRef>()

  const setSizeBySwipe = useCallback((num: number) => {
    if (snapPointList.small && num === snapPointList.small) {
      setSize('small')
    } else if (snapPointList.middle && num === snapPointList.middle) {
      setSize('middle')
    } else if (snapPointList.full && num === snapPointList.full) {
      setSize('full')
    }
  }, [size])

  return (
    <BottomSheet
      ref={sheetRef}
      open={!!size}
      snapPoints={() => Object.values(snapPointList)}
      defaultSnap={snapPointList.middle}
      expandOnContentDrag
      scrollLocking={false}
      onSpringStart={() => {
        requestAnimationFrame(() => {
          setSizeBySwipe(sheetRef.current?.height || 0);
        });
      }}
      {...props}
    >
      {children}
    </BottomSheet>
  )
}

const Main = () => {
  const [size, setSize] = useRecoilState(sizeState);
  const viewportHeight = useViewportHeight();

  const snapPointList = useMemo(() => {

    return {
      full: viewportHeight,
      middle: 200,
      small: 82
    }
  }, [viewportHeight]);

  return (
    <BottomSheetBase
      size={size}
      setSize={setSize}
      snapPointList={snapPointList}
    >
      <Component/>
    </BottomSheetBase>
  )
}

import React, {useCallback} from 'react';

const DetailComponent = ({ items }) => {

  const onClickItem = useCallback((e: React.MouseEvent, item) => {
    e.preventDefault();
  }, []);

  return (
    <div>
      {/* This component's onClick event works as expected */}
      <div onClick={onClickItem}>
        <div>Title</div>
        <div>Company name</div>
      </div>
      {/* This list of items is expected to be horizontally scrollable, 
          but when a full-size snap point is introduced, the horizontal scroll stops working */}
      <div>
        {items.map(file => (
          <div key={file.id}>
            <a
              href={`${file.url}#view=Fit`}
              target="_blank"
              rel="noreferrer"
              onClick={(e) => onClickItem(e, file)}
            >
              <div>
                <img
                  alt={file.filename}
                  src={file.url}
                />
              </div>
              <div>{file.filename}</div>
            </a>
          </div>
        ))}
      </div>
    </div>
  )
}

export default DetailComponent;

For clarity and to maintain privacy, I've generalized the code above and masked specific details.

Expected behavior

I would expect the horizontal scroll to function correctly regardless of the vertical size change in the bottom sheet.

Actual behavior

Horizontal scrolling is not working when the 'full' size is introduced. Vertical size changes are prioritized over horizontal scrolling.

Additional context

Any suggestions on how to solve this issue are highly appreciated.