Unable to set onShow, onHide functions for drawer

[archonic]

I would like to set custom behavior for onShow, onHide, etc for my drawer. The drawer is auto initializing due to the presence of data-drawer-target="drawer_right" on the trigger button.

I have this stimulus controller:

import { Controller } from "@hotwired/stimulus"
import { Drawer } from 'flowbite'

export default class extends Controller {
  connect() {
    const options = {
      placement: 'right',
      backdrop: true,
      bodyScrolling: false,
      onHide: () => {
        console.log('drawer is hidden');
      },
      onShow: () => {
        console.log('drawer is shown');
      },
      onToggle: () => {
        console.log('drawer has been toggled');
      }
    }
    const drawer = new Drawer(this.element, options)
  }
}

The stimulus controller is connecting, but the callbacks are not running. It seems I'm unable to initialize the drawer with my own options when it's initializing due to data-attributes. If I remove the data-target="drawer_right", it breaks and I get Drawer with id drawer_right has not been initialized. Please initialize it using the data-drawer-target attribute. in the console.

Is it possible to get an already initialized instance of a JS component?

[archonic]

It seems there's several data-attributes which can auto-initialize a drawer. I think that's inherently confusing. There should be one specific data-attribute that does auto initialization, not several. The full list is:

• data-drawer-target
• data-drawer-toggle
• data-drawer-dismiss
• data-drawer-hide
• data-drawer-show

This is especially confusing because a typical drawer will have more than one of these data-attributes across several elements. Is it auto-initializing on all of them?

It's also just not working. The drawer is open by default after initializing, and it's centered on larger layouts when I've specified placement: 'right'.

[archonic]

And now I see the instance manager!

That's great, but I'm still wondering how I can get onShow and onHide callbacks when initializing via data-attributes.

[zoltanszogyenyi]

Hey @archonic,

We're introducing "update" methods for the callback functions in v2.3.

You'll be able to call methods like:

• updateOnShow
• updateOnHide

Here's the commit that does this for the Drawer component: https://github.com/themesberg/flowbite/commit/92681497cff8661d3142f07288df63cbfd0c8ed1