fauntleroy / react-simple-dropdown Goto Github PK

Is possible to change the direction of the dropdown?

How Can I change direction of dropdown menu? #47

I was using react simple dropdown but my code was returning error. I found out that when using react hot loader the condition check for classes like this with the child.type and the component class return a falsy value even though both have both are the same class. In order to fix that I came up with a solution where I declared a static method on each class and instead of directly checking the classes I called that static method to check if they return the same string. It worked in all cases and thus I think that it would be much better to declare a static method to check for the child type by checking the return value we receive when calling the method

Problem

  bindChildren(children) {
    return React.Children.map(children, child => {
      **if (child.type == DropdownTrigger) {
        child = React.cloneElement(child, {
          onClick: this.toggleDropdown.bind(this)
        });
      } else if (child.type == DropdownMenu) {
        child = React.cloneElement(child, {
          onClick: this.onOptionClick.bind(this)
        });**
      }
      return child;
    });
  }

Solution

class DropdownMenu extends Component {
  **static check() {
    return "dropdownmenu";**
  }

  bindChildren(children) {
    return React.Children.map(children, child => {
      if **(child.type.check() === DropdownTrigger.check())** {
        child = React.cloneElement(child, {
          onClick: this.toggleDropdown.bind(this)
        });
      } else if (child.type.check() === DropdownMenu.check()) {
        child = React.cloneElement(child, {
          onClick: this.onOptionClick.bind(this)
        });
      }
      return child;
    });
  }

The dropdown seems to be always active and I can't seem to hide it, even though I run dropdown.hide(). It looks like the styles.css is not working, the child elements were shown as plain-text. I am using React JS with ES6 and used npm to install the library.

Since the dropdown trigger is a link without an href, most browsers don't make it focusable, thus it's not possible to tab to the dropdown with a keyboard. This makes the dropdown trigger and all its contents inaccessible to keyboard users.

I found that a previous issue (#29) removed the href attribute, which makes sense in that context.

I could take a stab at a PR, if we agree that this needs to go back in. However, we'll need to decide what a href value should be.

Personally, I don't like using either '#' or 'javascript:void(0)', because the former requires a event.preventDefault() so as not to mess up browser history, and the latter is basically inline JS being eval'd, which makes it incompatible with CSP. In such situations (link that's only used for interaction, not navigation), I usually prefer to use a <button> element instead. Not sure what you'd think about changing the trigger to a button though.

If you don't want to change to a button element, we can stick to a href of '#' with a .preventDefault() on the link.

I have a few dropdowns on the page, and I want to have a few dropdowns openly, and that others dont close, how can I do this?

Not sure if this issue belongs here.

I am facing a problem that I put a datepicker https://github.com/Hacker0x01/react-datepicker as dropdown content. The datepicker is using Tether to connect the input field component to the calendar component.

The date input field is a child of dropdown content

, but the calendar is positioned absolutely to the viewport with javascript and is in the DOM before the closing body tag

Your code adds a click listener on window and inside this click listener you check if the clicked element was the dropdown node or one of its child nodes. What happens now is as soon as the user clicks on the calendar the dropdown closes, since the calendar is technically not inside the dropdown content.

I am not sure how to best tackle this problem, since it could be solved on your side, maybe by adding an extra check for tether elements or by using getBoundingClientRect to determine the position of the clicked element and check if its inside the dropdown content.

Pulling the repo and doing an install, reports lots of potential vulnerabilities:

found 83 vulnerabilities (28 low, 32 moderate, 21 high, 2 critical)

Also some strange entries. Not sure why this project has electron as dev dependency?

Hey.
Im trying to import it to my project but I always get this error when importing on file:
Could not find a declaration file for module 'react-simple-dropdown'.

And then while compiling

Failed to compile.

./src/App.js
Module not found: Can't resolve 'react-simple-dropdown' in '/app/src'

I'm using this drop down on a single page web app with the Dropdown in a global header. In the Dropdown I have links for navigation change the URL. Its a single page web app so its just changing route and the page doesn't reload. As such, after clicking a link and having the page change the Dropdown is still in its active state which is not desirable. This is because the component never umounts/mounts.

I've done some experimentation and put the modified _onWindowClick as follows:

_onWindowClick: function( event ){
    const dropdown_element = findDOMNode( this );
    if( event.target !== dropdown_element && !dropdown_element.contains( event.target ) && this.isActive() ){
      this.hide();
    }

    if (dropdown_element.contains( event.target ) && event.target.tagName === 'A' && !event.target.href.endsWith('#dropdown-trigger')) {
      this.hide();
    }
  }

The additional last if is says that:

• If the event.target is contained with the Dropdown; and
• its an A tag;
• and that A tag does not have an href which ends with the trigger link itself;
• then hide the menu.

This doesn't seem like the most elegant solution but it works.

I'm happy to submit a pull request with this or with any other suggestions you might have.

After upgrading we receive the following error

Warning: Failed propType: Required prop onClick was not specified in DropdownTrigger. Check the render method of ProFilterStatus

1.1.3 sets the prop for onClick in the DropdownTrigger.jsx file to be required. It was not previously required and we handled the events ourselves.

Sticking with 1.1.2 for now. Thanks!

Hello I want to show top direction instead of down one.
Please help me.

doesnt work without es2016 as a preset

ERROR in ./~/react-simple-dropdown/lib/components/Dropdown.js
Module build failed: Error: Couldn't find preset "es2016" relative to directory "C:\\Users\\ALilland\\Documents\\macros\\experiments\\mongoid\\mongoid_heroku\\db_core_app\\node_modules\\react-simple-dropdown"
    at C:\Users\ALilland\Documents\macros\experiments\mongoid\mongoid_heroku\db_core_app\node_modules\babel-core\lib\transformation\file\options\option-manager.js:299:19
    at Array.map (native)
    at OptionManager.resolvePresets (C:\Users\ALilland\Documents\macros\experiments\mongoid\mongoid_heroku\db_core_app\node_modules\babel-core\lib\transformation\file\options\option-manager.js:270:20)
    at OptionManager.mergePresets (C:\Users\ALilland\Documents\macros\experiments\mongoid\mongoid_heroku\db_core_app\node_modules\babel-core\lib\transformation\file\options\option-manager.js:259:10)
    at OptionManager.mergeOptions (C:\Users\ALilland\Documents\macros\experiments\mongoid\mongoid_heroku\db_core_app\node_modules\babel-core\lib\transformation\file\options\option-manager.js:244:14)
    at OptionManager.init (C:\Users\ALilland\Documents\macros\experiments\mongoid\mongoid_heroku\db_core_app\node_modules\babel-core\lib\transformation\file\options\option-manager.js:374:12)
    at File.initOptions (C:\Users\ALilland\Documents\macros\experiments\mongoid\mongoid_heroku\db_core_app\node_modules\babel-core\lib\transformation\file\index.js:216:65)
    at new File (C:\Users\ALilland\Documents\macros\experiments\mongoid\mongoid_heroku\db_core_app\node_modules\babel-core\lib\transformation\file\index.js:139:24)
    at Pipeline.transform (C:\Users\ALilland\Documents\macros\experiments\mongoid\mongoid_heroku\db_core_app\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
    at transpile (C:\Users\ALilland\Documents\macros\experiments\mongoid\mongoid_heroku\db_core_app\node_modules\babel-loader\lib\index.js:38:20)
    at Object.module.exports (C:\Users\ALilland\Documents\macros\experiments\mongoid\mongoid_heroku\db_core_app\node_modules\babel-loader\lib\index.js:133:12)
 @ ./src/components/Navbar.jsx 13:27-59

when installing es2016 errors occur:

npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\ALilland\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "install" "--save-dev" "es2016"
npm ERR! node v6.3.1
npm ERR! npm  v4.0.5

npm ERR! Cannot convert undefined or null to object
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\ALilland\Documents\macros\experiments\mongoid\mongoid_heroku\db_core_app\npm-debug.log

It'd be nice to be able to use enter key to trigger the DropdownTrigger, for accessing an app using only the keyboard.

Is this compatible with 15.1.0 ?
If yes, can you update the dependencies?

npm WARN [email protected] requires a peer of [email protected] || 15.0.x but none was installed.
npm WARN [email protected] requires a peer of react@^15.1.0 but none was installed.

Prop 'active' works for me instead. Fix docs pls.

So I have a status list of each seller that I want to map inside dropdown menu as list.
Now when I map it. It does not show any data but it works when the data is static.

here is my code

<Dropdown class="dropdown-menu--icons"> <DropdownTrigger class={'btn btn-primary'}> ACTION <Icon class="icon inverse" icon="ICON_ANGLE_BOTTOM" /> </DropdownTrigger> <DropdownMenu class="dropdown-menu-right"> {this.renderDropdownAction(this.props.seller.sellerRegistrationStatusList)} </DropdownMenu> </Dropdown>

renderDropdownAction(sellerList) { if(sellerList){ console.log(sellerList); console.log("ssssssssssssssssssssssssss"); return sellerList.map((statusObj)=>{ return ( <li> <a class="menu-item" > {statusObj.id} </a> </li> ); }) }else{ return ( <li> <a class="menu-item" > Not working </a> </li> ); } }

[email protected] requires a peer of [email protected] || 15.x but none was installed.
[email protected] requires a peer of [email protected] || 15.x but none was installed.

Hi Team,
I was using the version react-simple-dropdown version 3.2.0 all these and it worked perfectly fine for me without any issues. But somehow when I am doing Yarn install I am getting the below error.

Module not found: C:\myFolder\myProject\myWork\myApp\node_modules\react-simple-dropdown\lib\components\Dropdown.js does not match the corresponding path on disk dropdown.js.

When I tried to dig deep I noticed that the file name is dropdown.js where in the class Name is Dropdown.js. Hence I changed the filename to Dropdown.js from dropdown.js and it works fine now.
But it is actually not recommended to change the auto generated files so any other solution here ?
Could you please help me on this?

Thanks in advance,
Alex

Hi, on the npm page for this package it says show is the prop to toggle the state of DropdownComponent, but in GitHub it is active.
I'm not sure why, as they both show the same version number.

Hello there,

We have a project that we are building with webpack, using babel-loader and awesome-typescript-loader. All node dependencies, including react-simple-dropdown, are installed with npm install. After the 3.2.1 update, npm run serve began failing with the following error message from webpack:

ERROR in ./app/components/user/User.tsx
Module not found: Error: Can't resolve 'react-simple-dropdown' in '/[REDACTED]/ui/app/components/user'
 @ ./app/components/user/User.tsx 13:27-59
 @ ./app/components/pages/masterPage/MasterPage.tsx
 @ ./app/components/App.tsx
 @ ./app/index.ts
 @ multi (webpack)-dev-server/client?http://0.0.0.0:8086 ./app/index.ts

I checked, and npm did download the react-simple-dropdown package to the usual location. Downgrading to 3.2.0 fixes the problem. Do you know what might cause this?

Hey, I'm trying to use disabled={true} but it's not working. My component is still triggering and the menu pops. I just updated to the newest NPM package.

<Dropdown className={css(this.props.buttonStyle)} ref='dropdown' disabled={true}>

Maybe I'm missing something, but having your example code in gh-pages and pointing to the npm module as source code makes it really hard to contribute back to the dropdown. I was hoping to work on the accessibility of this dropdown and I'm finding it impossible to work with. Having a working example you can run in a local server would make it a lot easier to contribute back to this component.

I think it might be easier for users of this module, if we use the CSS-in-JS approach to inline the required css?
Any thoughts on doing or not-doing this?

Hey there, when upgrading to 1.1.3 I'm receiving the error below

Couldn't find preset "es2016" relative to directory "/Users/me/Work/project/node_modules/react-simple-dropdown" while parsing file: /Users/me/Work/project/node_modules/react-simple-dropdown/lib/components/Dropdown.js

It doesn't appear that babel-preset-es2016 is being installed when I run an npm install from my project (it's not in my node_modules folder). If I install this preset manually then the build works just fine without errors.

npm version: 3.3.12
node version: v5.1.0

Any thoughts?

Thank you!

Could you add a license to this project please?

Thanks.

I came across an issue
while trying to focus(using element.focus()) on the dropdown content when the onShow prop is fired.
The problem is that the dropdown content is still invisble when the onShow is fired.

I've taken a look at the code and noticed that currently the prop onShow is fired before the setState({ active: true }) is applied(in DropDown.js => show(){ ... }).

I added a pull request (#37) regarding that matter, I'd be happy if you could take a look :-).

I'm using modal component with inside dropdown button.
For example, when user click the button, the modal is opened with some information. But user clicks modal any where, behind dropdown is closed. I don't want to close behind dropdown.

How to fix this side effect? Could anyone help me some advice?

I even tried to remove node_modules/ and reinstall all packages, still the same. When I switch back to v0.1.1 it works again.

I'm building with Create React App and React version 16.8.6. I'm trying to use Dropdown component in a function component. I get following build time error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Unknown.getDOMNode(...) is deprecated. Please use ReactDOM.findDOMNode(instance) instead.

This happens when I click on the dropdown trigger. Any thoughts?

For some reason onClicks inside my dropdown are not firing, even this simplest possible example is not working and I cannot figure out why

                        <Dropdown>
                            <DropdownTrigger>Username</DropdownTrigger>
                            <DropdownContent>
                                <ul>
                                    <li>
                                        <a
                                            onClick={() => {
                                                console.log("boo");
                                            }}
                                            href="javascript:void(0);"
                                        >
                                            Sign out
                                        </a>
                                    </li>
                                </ul>
                            </DropdownContent>
                        </Dropdown>

I receive the following error when loading up my React application when using 1.0.1:

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method oft.

I didn't change any of my JSX, simply just upgraded the package. Any help on this would be greatly appreciated.

Thanks

What would be the best way to implement a dropdown with transitions (e.g. http://codepen.io/shshaw/pen/gsFch) using this library?

I'm getting the following error:

Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded

I just installed react-simple-dropdown and used the exact code from the example page (except for the props) http://fauntleroy.github.io/react-simple-dropdown/

Is the problem on my end or has this happened to someone else?

I'm on React 15.5.4, Webpack 2.5.1 and Yarn 0.23.4

As of React v15.5.0 you get deprecation warnings for using React.PropTypes and React.createClass. You now have to import these from separate packages (https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html)

Edit: Also, react-addons-test-utils has been moved to react-dom/test-utils…

It's great that we can pass arbitrary props to the HTML element, but it appears that utility props such as removeElement are passed as well. This causes the following warning:

Non-standard HTML attributes that are only used for utility should not be passed to the HTML element.

What's the reason behind the href in the dropdown trigger?

I'm facing issue while migrating my angular app to react. NgRouter tries to navigate when clicking on the dropdown menu

In mastodon/mastodon#1673 (comment) we're having issues because we can't stop propagation of menu events from this component.

Maybe there could be a top level prop like disablePropagation={true}?