stimulus-components/stimulus-dropdown

A Stimulus controller to create a dropdown.

Stimulus components

👉 Introducing Stimulus components.

📚 Documentation

See Stimulus Components Website.

👷 Contributing

Do not hesitate to contribute to the controllers by adapting or adding features ! Bug reports or pull requests are welcome.

Don't forget to drop a 🌟 on GitHub to support the project.

📝 License

This project is released under the MIT license.

stimulus-dropdown's Issues

Registering the controller using Import Maps code is removed in auto-generated file.

When using import maps the docs from stimulus-components direct us to register the controller by adding a code snippet to app/javascript/controllers/index.js.

Easy enough, but the default instructions in a Rails 7 app using import maps instruct us that the file is auto-generated:

// This file is auto-generated by ./bin/rails stimulus:manifest:update
// Run that command whenever you add a new controller or create them with
// ./bin/rails generate stimulus controllerName

However, adding in the snippet of code as the docs from stimulus-components suggest works when I added a single component. In my test case the dropdown component.

The problem came when I added more controllers using the ./bin/rails generate stimulus controllerName, and then updated the manifest by running ./bin/rails stimulus:manifest:update.

The app/javascript/controllers/index.js folder is then updated and the code snippet that was copied as instructed to register that controller:

import { Application } from '@hotwired/stimulus'
import Dropdown from '@stimulus-components/dropdown'

const application = Application.start()
application.register('dropdown', Dropdown)

is then removed. Only the snippets that were autogenerated by running the generate command // This file is auto-generated by ./bin/rails stimulus:manifest:update remain, and as the stimulus-component(Dropdown) stops working.

Problem with Typescript

Hello,
Thanks for this great component!

I have a little problem, when I import stimulus-dropdown, typescript says he can't find its type declaration file.

And when I try to use it to extend one of my controller, Typescript raises an error, because my controller that inherits from Dropdown doesn't have the expected properties of a stimulus controller.

How can I fix that? Any idea / recommandations?

thx!

stimulus-dropdown component not working when component updated via Turbo Frames

I have a dropdown controller within a Turbo Frame. When the frame gets updated, the dropdown stops working. How can I fix this?

Dropdown Default

Apologies if question is trivial. I don't think it has been asked before, or at least I didn't find one.

How would I change the default state of the div with dropdown controller. The div that open up upon click doesn't have a hidden class in the source file, but one is added when page loads. I can't find a way to keep the div unhidden on page reload.

Can you help please? Thanks a ton in advance.

Here is the simplified version of my code:

    <div data-controller="dropdown">
      <div>
        <button
          type="button"
          class="inline-flex w-full px-4 py-2 text-sm font-medium text-gray-700 bg-white border-t border-b border-gray-200"
          id="menu-button"
          aria-expanded="true"
          aria-haspopup="true"
          data-action="dropdown#toggle click@window->dropdown#hide"
        >Using a QR Code</button>
      </div>
      <div data-dropdown-target="menu"
        class="w-full" <!-- Not Hidden -->
        role="menu"
        aria-orientation="vertical"
        aria-labelledby="menu-button"
        tabindex="-1"
      >
        <div class="p-4" role="none">
          <div id="qrcode"></div>
        </div>
      </div>
    </div>

When the page is rendered the line with a comment from above becomes this (hidden class is added):

<div 
  data-dropdown-target="menu" 
  class="w-full hidden" <!-- Loads as Hidden -->
  role="menu" 
  aria-orientation="vertical" 
  aria-labelledby="menu-button" 
  tabindex="-1"
>
        <div class="p-4" role="none">
           <div id="qrcode"></div>
        </div>
</div>

Transitions not working properly

I am having an issue in Rails 7 with the transitions not working for the dropdown.

I can disable the 'data-transition' tags and the dropdown functionality remains, but the transitions are running in an unpredicatable way.

They seem to be triggering enter then leave animations all at once without a second click. Connect, toggle and hide functions seem to be working as expected.

I tried overwriting some UseTransition settings from within my Dropdown controller, but no luck.

Mobile friendly demo

Hi Guillaume,
That's a shame that the dropdown is not demo-able from a mobile :-)

Window event listener

Once click@window->dropdown#hide get invoked, action hide will be called any time user clicks somewhere.