[SwipeableDrawer][material] onTransitionEnter prop throws an error starting in version 5.14.7

[jay-herrera]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:

Steps:

1. Use The SwipableDrawer Component
2. Add an onTransitionExited handler

Current behavior 😯

This Error is produced:

Warning: Unknown event handler property onTransitionExited. It will be ignored.

I assume that this is because the prop is no longer recognized on the component, even though it should be according to the documentation.

Expected behavior 🤔

The onTransitionExited handler should be called after the animation ends

Context 🔦

My team uses client side routing to manage a drawer's open state. The technique works, and has worked previously by allowing the closing animation to play through, then adjusting routing accordingly. Now, there is no direct way to fire a function at the end of the closing animation.

Your environment 🌎

npx @mui/envinfo

    System:
    OS: macOS 12.6.7
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Memory: 1.39 GB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    npm: 9.8.1 - ~/Desktop/GlowstikProjects/glowstik/glowstik-next-pwa/node_modules/.bin/npm
  Managers:
    Homebrew: 4.0.20 - /usr/local/bin/brew
    pip3: 23.0.1 - /usr/local/bin/pip3
    RubyGems: 3.0.3.1 - /usr/bin/gem
  Utilities:
    Make: 3.81 - /usr/bin/make
    GCC: 14.0.0 - /usr/bin/gcc
    Git: 2.37.1 - /usr/bin/git
    Clang: 14.0.0 - /usr/bin/clang
    Curl: 7.87.0 - /usr/bin/curl
  Servers:
    Apache: 2.4.56 - /usr/sbin/apachectl
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
  IDEs:
    VSCode: 1.81.1 - /Applications/Visual Studio Code.app/Contents/Resources/app/bin/code
    Vim: 9.0 - /usr/bin/vim
    Xcode: 14.2/14C18 - /usr/bin/xcodebuild
  Languages:
    Bash: 3.2.57 - /bin/bash
    Java: 17.0.6 - /usr/bin/javac
    Perl: 5.30.3 - /usr/bin/perl
    Python3: 3.11.3 - /usr/local/bin/python3
    Ruby: 2.6.10 - /usr/bin/ruby
  Databases:
    SQLite: 3.37.0 - /usr/bin/sqlite3
  Browsers:
    Chrome: 116.0.5845.179
    Safari: 16.5.1

[DiegoAndai]

Hey @jay-herrera, thanks for the report!

Could you share an example of your code, as it was working before? Preferably a CodeSandbox example.

Could you share the documentation you refer to as well? I don't see the onTransitionExited prop on the SwipeableDrawer API docs.

[jay-herrera]

Hey, @DiegoAndai ! Here is an example of the new functionality, which throws an Error:
https://codesandbox.io/s/mui-swipabledrawer-example-new-7pnch2

Here is an example of it working without an error in version 5.14.5:
https://codesandbox.io/s/mui-swipabledrawer-example-old-kgchsv

According to the docs, SwipableDrawer should also expose all props of the Drawer component, which in turn should expose the props of the Modal component when the varient is temporary (which is the default). The Modal Component has the prop onTransitionExited, which is described as: A function called when a transition has exited.

The funtionality does actually appear to be intact (the function is appropriately called after the animation finishes), but the error suggests a problem.

[sai6855]

this is happening after material Modal is using useModal hook. Opened a PR to fix the issue #38868