Can't extend a Modal

[pama]

I'm trying to extend a Modal. I created a trixmodal_controller.rbfile with the following code

import { Modal } from "tailwindcss-stimulus-components"

export default class Modaltrix extends Modal {
  static targets = ["container"]

  open(e) {
    console.log("opened");
    super.open(e)
  }
}

Then I made the following setup:

<div data-controller="modaltrix" data-modal-allow-background-close="false">
  <a href="#" data-action="click->modaltrix#open" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded">
    <span>Open Modal</span>
  </a>

  <!-- Modal Container -->
  <div data-modal-target="container" data-action="click->modaltrix#closeBackground keyup@window->modaltrix#closeWithKeyboard" class="hidden animated fadeIn fixed inset-0 overflow-y-auto flex items-center justify-center" style="z-index: 9999;">
    <!-- Modal Inner Container -->
    <div class="max-h-screen w-full max-w-lg relative">
      <!-- Modal Card -->
      <div class="m-1 bg-white rounded shadow">
        <div class="p-8">
          <h2 class="text-xl mb-4">Large Modal Content</h2>
          <p class="mb-4">This is an example modal dialog box.</p>

          <div class="flex justify-end items-center flex-wrap mt-6">
            <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" data-action="click->modal#close">Close</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Mainly the same code provided in the README but I changed the controller name. The open method is being called but I always get the following error in the browser console: "Missing target element "modaltrix.container""

Error: Missing target element "modaltrix.container"
    at extended.get (target_properties.js:22)
    at extended.s.open (tailwindcss-stimulus-components.m.js:193)
    at extended.open (modaltrix_controller.js:8)
    at Binding.invokeWithEvent (binding.js:67)
    at Binding.handleEvent (binding.js:40)
    at EventListener.handleEvent (event_listener.js:41)

{identifier: "modaltrix", controller: extended, element: div, index: 0, event: MouseEvent}

Some guidance would be appreciated.

[excid3]

Error: Missing target element "modaltrix.container"

Means that:

  <div data-modal-target="container"

Should be

  <div data-modaltrix-target="container"

[pama]

🤦🏻‍♂️ what a dumb error. Thank you so much!

[excid3]

Haha! No problem. Been there done that too many times myself. 😜