FormidableLabs / react-swipeable

React swipe event handler hook
https://commerce.nearform.com/open-source/react-swipeable
MIT License
2k stars 147 forks source link

TypeError when setting `delta: undefined` #295

Closed simonflk closed 2 years ago

simonflk commented 2 years ago

Describe the bug

Using useSwipeable() with an explicit delta: undefined, will cause an exception since v6.2.0:

useSwipeable({ onSwiped: console.log, delta: undefined })

Results in this error (when swiping):

TypeError: Cannot read properties of undefined (reading 'up')

Steps or Sandbox to reproduce

See the following example:

https://codesandbox.io/s/react-swipeable-image-carousel-forked-obuesx?file=/src/index.js

I have modified the Carousel component to accept a prop which is passed as delta to useSwipeable

Expected behavior

Either the default delta should be applied, or the handlers should not be attached.

Device/Browser

Chrome 98, macOS

Additional context

Error occurs in 6.2.0, but not in earlier versions.

Seems to be a bug introduced in #260 (expecting that delta is either a number or an object)

And also #185 (setting the props like so):

transientProps.current = { ...defaultProps, ...options };

My workaround for now is to rather default delta to {}.

hartzis commented 2 years ago

@simonflk Thank you for the detailed issue and example codesandbox, i greatly appreciate it, so helpful to see the issue and try it out.

Thank you for also identifying the culprit. These config values types do call out undefined as a valid type. I'll work on a bug fix for this tonight with a test for undefined for all config values. Something similar was also identified recently, https://github.com/FormidableLabs/react-swipeable/pull/240#issuecomment-1014980025 .

My workaround for now is to rather default delta to {}.

May I suggest defaulting to 0 instead? It's a bit more inline as a default.

useSwipeable({
  delta: customDelta || 0
})
hartzis commented 2 years ago

fixed with https://github.com/FormidableLabs/react-swipeable/releases/tag/v6.2.1