rsschermer/ember-rl-dropdown

Dropdown components and mixin for Ember.

ember-rl-dropdown's Issues

No class present to indicate state of dropdown

It would be helpful to have an is-expanded class present on the dropdown-container when it's expanded. That way you could define styles for when the dropdown is expanded (for example, updating a toggle icon).

Same thing for the template:

{{#rl-dropdown-toggle-expanded}}
  {{! expanded icon }}
{{/rl-dropdown-toggle-expanded}}
{{#rl-dropdown-toggle-collapsed}}
  {{! collapsed icon }}
{{/rl-dropdown-toggle-collapsed}}

Or something similar.

Doesn't work on Ember 1.13 beta 1

toggleDropdown action isn't received in rl-dropdown-container, so the dropdown won't open.

Unconsumed actions don't throw any error in components, so I'm not sure where it ends. In the meantime, I've made it work by replacing this.sendAction(); in rl-dropdown-toggle.js with manually toggling the dropdownExpanded property on parentView. That at least allows me to open dropdowns, but leaves other problems (navigating away from current route with expanded dropdown keeps dropdownExpanded enabled for all dropdowns everywhere else in the application etc.). Not sure if the problem is in new Ember, e-r-d or my workaround.

When trying to use dropdownExpanded property while accessing from a different DOM, the property is toggled and the dropdown isn't shown

What the problem is?
Have a DOM (with class rl-dropdown-toggle) that sets the "dropdownExpanded" property to true on click. This property will be used in the dropdown DOM (rl-dropdown). I set this property through a service and have it synced two way via Ember.computed.alias(). As a result this property is set, and reset again, due to the "clickoutHandler" method. The IF condition seems to not work and I have to explicitly overwrite this method.

if(component.get('dropdownExpanded') && $target.closest('html').length !== 0 &&
!($target.closest($c.find(component.get('dropdownToggleSelector'))).length ||
$target.closest($c.find(component.get('dropdownSelector'))).length)
)

Instead of saying $target.closest having a length > 0, we could use $target.is(component.get('dropdownSelector')) and $target.is(component.get('dropdownToggleSelector') thereby causing the clickoutHandler method to function properly.

DEPRECATION Warning

Upgraded to ember 2.18.0 and started to get this warning.

DEPRECATION: An addon is trying to access project.nodeModulesPath. This is not a reliable way to discover npm modules. Instead, consider doing: require("resolve").sync(something, { basedir: project.root }). Accessed from: new NPMDependencyVersionChecker (node_modules\ember-rl-dropdown\node_modules\ember-cli-version-checker\src\npm-dependency-version-checker.js:11:33)

ember-cli: 2.18.0
node: 8.9.4
os: win32 x64

Keyboard events

I noticed this component doesn't manage keyboard events, like going up and down the dropdown with the keyboard arrows for example.

Are you planning on adding support for that? I might be able to open up a PR if you're okay with that.

problem with checkbox inside dropdown since 0.2.2

I am having problems with checking checkbox with ember 1.11.3.
It happened after updating from 0.2.1 to 0.2.2

This is directly from readme, only changed link to a checkbox.
This must be related with the click event that was changed in 0.2.2

    {{#rl-dropdown-container class="dropdown"}}
      {{#rl-dropdown-toggle class="btn btn-default"}}
        Toggle <span class="caret"></span>
      {{/rl-dropdown-toggle}}
      {{#rl-dropdown tagName="ul" class="dropdown-menu" closeOnChildClick="a:link"}}
        {{input type="checkbox" checked=checked}}
      {{/rl-dropdown}}
    {{/rl-dropdown-container}}

Cheers!

Why event.stopPropagation?

I wanted to put a file upload label in my dropdown list

{{#rl-dropdown tagName="ul"}}
  <li class='rl-dropdown-item'>
    <label>
      Upload new video
      <input type="file" style="visibility: hidden">
    </label>
  </li>
  ...

but this wasn't working because rl-dropdown doesn't propagate events. I had to copy + paste rl-dropdown into my project + remove this line to get it working.

Do you recall why?

jQuery 3 deprecation warnings for .bind() and .unbind()

When using the jquery-migrate tool for jQuery 3, ember-rl-dropdown is triggering deprecation warnings for .bind() and .unbind():

A description of the warnings: https://github.com/jquery/jquery-migrate/blob/master/warnings.md#jqmigrate-jqueryfnbind-is-deprecated

Inline if Helper doesn't work with classes

class="{{ if isGradeNotSelected 'disabled' }}" will render class="{{ if isGradeNotSelected 'disabled' }}

Tests don't pass

Clean install, ran ember test, getting 5 failures.

Tap elsewhere doesn't close dropdown

Thanks for this great addon!

Clicking outside of an expanded dropdown closes it, but tapping (chrome, iOS) doesn't. Have you encountered this before, or is it a bug?