snapPoints `[1]` will cause the copmonent to stop working

[xsjcTony]

Before we start, I can't use dedent="full-height" due to I need to set a maximum height in px, so I have to use a snapPoints dynamically calculated, where sometimes it's equivalent to 1 or 0.99 something like that on small screens (in terms of height)

---

https://stackblitz.com/edit/vitejs-vite-agtxf3?file=src%2FApp.tsx

---

It's basically because of the settings of the height of the sheet is https://github.com/Temzasse/react-modal-sheet/blob/86a0fd29050b5557578483417da00976b9424c9e/src/constants.ts#L1 hence in https://github.com/Temzasse/react-modal-sheet/blob/86a0fd29050b5557578483417da00976b9424c9e/src/sheet.tsx#L126-L128 sheetHeight will be smaller than p, results in snapToValues being an empty array [], then in the function getCloset https://github.com/Temzasse/react-modal-sheet/blob/86a0fd29050b5557578483417da00976b9424c9e/src/sheet.tsx#L136 https://github.com/Temzasse/react-modal-sheet/blob/86a0fd29050b5557578483417da00976b9424c9e/src/utils.ts#L3-L7 It will be something like [].reduce(...), resulting in the above error.

---

So basically anything that's close to 1 or px numbers close to the window height will cause this issue, because of what I described above.

Basically either to

• add another condition || snapToValues.length === 0 here https://github.com/Temzasse/react-modal-sheet/blob/86a0fd29050b5557578483417da00976b9424c9e/src/sheet.tsx#L131-L133
• or provide an initial value to the reduce function here (maybe 0) https://github.com/Temzasse/react-modal-sheet/blob/86a0fd29050b5557578483417da00976b9424c9e/src/utils.ts#L3-L7

---

I have really no idea how you want to fix that, so rather than raising a PR, I'd like to leave it to you. Thanks @Temzasse . I believe this is an issue being there for a while. Suprised no one actually raised it.

[xsjcTony]

My current workaround

  const sheetHeight = Math.min(
    // This is due to a bug in the library `react-modal-sheet` this component is relying on,
    //
    // 1. The maximum height of the sheet is calculated by `calc(100% - env(safe-area-inset-top) - 34px)`
    // https://github.com/Temzasse/react-modal-sheet/blob/86a0fd29050b5557578483417da00976b9424c9e/src/constants.ts#L1
    // 2. If the height of the sheet is smaller than the snapPoint value, it will bug due to no initial value on array reduce
    // https://github.com/Temzasse/react-modal-sheet/blob/86a0fd29050b5557578483417da00976b9424c9e/src/utils.ts#L4-L6
    Math.floor(
      window.innerHeight
      - parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--safe-area-inset-top'))
      // using 35 here for safety purpose instead of 34
      - 35
    ),
    Math.floor(window.innerHeight * Math.min(maximumPercentageHeight, 100) / 100), // this is in percentage, passed in by prop
    preferredHeight // this is in pixel, passed in by prop
  );

  return (
    <Sheet snapPoints={[sheetHeight]}>...</Sheet>
  )

index.css

:root {
  --safe-area-inset-top: env(safe-area-inset-top);
}

[Temzasse]

Thanks for the very detailed bug report! 🙏🏻 I'll try to find time to take a closer look at it 🙂

I've been struggling to find time to go through the issues of this library since I'm not currently using it myself in any project 😅

[Temzasse]

This should be fixed now in: https://github.com/Temzasse/react-modal-sheet/releases/tag/v1.11.1

Please let me know if it's not fixed or if I misunderstood the issue 🙂

[xsjcTony]

Thanks! will have a test next week