Git Product home page Git Product logo

react-dropdown's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

react-dropdown's Issues

stage-0 problem

Hi,
Sorry, I'm quite novice to all these technologies.
I got this error: couldn't find preset stage-0 and had to:

npm install babel-preset-stage-0

to make all this work. Should this be in the docs or could you point me to some articles where I could learn what happened?

Thanks.

Pass more values on dropdown object

Hi,

More of a feature request, would it make sense to pass more values in the dropdown objects? I think you can only pass value and label

Such as:

{ value: 'one', label: 'One', anotherValue: 'ONE' },

Cheers

placeholder instead of selected label after re-render

There is a bug in index.js:23 in componentWillReceiveProps

there should be:

} else if (!newProps.value && newProps.placeholder) {

instead of:

} else if (newProps.placeholder) {

In current implementation if first if-condition is resolved as false because values are equal and placeholder is given result will be the placeholder label. In other words, even if other value was selected before Dropdown resets to placeholder.

It can be quickfixed by passing to placholder attribute:

placeholder={selectedValue || 'Placeholder label'}

CSS not included in module

styles.css isn't included in the distributed package. is this intentional? I'd like to use this module but don't really want to check in your css.

thanks!

Move React dependencies into peerDependencies or devDependencies

I tried using your plugin but I ran into an issue where, because you have React and ReactDOM set to ^0.14.7 in dependencies inpackage.json`, it installs the latest version of React and ReactDOM (0.14.8 at the time of writing) and I'm still running 0.14.7. This ends up causing two different versions of React to be loaded which causes errors on the page.

I looked at other React plugins and they have their React dependencies in devDependencies or peerDependencies:

https://docs.npmjs.com/files/package.json#peerdependencies

Not removing listeners properly

Hi,

I am not using this module but noticed that in your code, you never unbind events because .bind() returns a new function each time.

componentDidMount() {
    document.addEventListener("click", this.handleDocumentClick.bind(this), false);
}

componentWillUnmount() {
    this.mounted = false;
    document.removeEventListener("click", this.handleDocumentClick.bind(this), false);
}

Instead

constructor(props) {
   // Or in componentDidMout
   this.handleDocumentClick = this.handleDocumentClick.bind(this);
}

componentDidMount() {
    document.addEventListener("click", this.handleDocumentClick, false);
}

componentWillUnmount() {
    this.mounted = false;
    document.removeEventListener("click", this.handleDocumentClick, false);
}

Invalid CSS

Trying to load the CSS with my webpack style loader brings attention to this line, which throws the error:

Argument $alpha of rgba($red, $green, $blue, $alpha) must be between 0 and 1.

Is this intentional? What does having an alpha > 1 do? Can you get more opaque than "fully opaque" ?

Allow setting a flat array as options

e.g. ['Dog', 'Cat', 'Mouse', 'Squirrel']

Option list would look like

<option>Dog</option>
<option>Cat</option>
<option>Mouse</option>
<option>Squirrel</option>

Native browser behavior is to use the "label" value if there isn't a set value.

I have a couple flat lists in my app like this. Right now I have to add little methods like this to get around it:

    const optionsToHash = options.map((opt) => {
      return { value: opt, label: opt }
    })

NBD, but most select widgets do this.

I'll also try to put in a PR for this, as the library otherwise suits my needs swimmingly.

Make it accessible

The dropdown is made of DIV elements, which are not keyboard or screen reader accessible. Consider using a real button element for the trigger and an unordered list for the items. There are plenty of examples out there, here's a resource with a bunch of them and even some explanations of how to do it. http://staff.washington.edu/tft/tests/menus/index.html

npm install fails

Lol, really?

standard: Use JavaScript Standard Style (http://standardjs.com)
    react-dropdown/index.js:5:47: Extra semicolon.
npm ERR! Test failed.  See above for more details.

Disabled state

Hello.

Don't you want to add disable state for control?

Babel throws error

Im trying to use this component with babel (babel-core 6.5.2 to be specific). This works fine with version react-dropdown 0.7.2 but since version 1.0.0, I am getting the following error:

Module parse failed: .../node_modules/react-dropdown/index.js Line 1: Unexpected token

Add onFocus callback

Can we have a callback function every time the dropdown is focused?

There is a use case that I need to manipulate the parent css also since the dropdown is in an accordion wherein parent is set to overflow-y:hidden. And that callback would be a great help.

Thanks!

Bug with dropdown when newProps.value == this.state.selected

In index.js:
componentWillReceiveProps (newProps) {
if (newProps.value && newProps.value !== this.state.selected) {
this.setState({selected: newProps.value})
} else if (!newProps.value && newProps.placeholder) {
this.setState({selected: { label: newProps.placeholder, value: '' }})
} else {
this.setState({selected: { label: DEFAULT_PLACEHOLDER_STRING, value: '' }})
}
}

This code incorrectly falls back to the default placeholder string when newProps.value == this.state.selected. It is causing a bug where the default placeholder string renders instead of the value when the dropdown rerenders.

Example fails to run

I followed the provided instructions $ cd example && npm install && npm run watch but I receive the following error:

npm-debug.log

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/Cellar/node/4.1.2/bin/node',
1 verbose cli   '/usr/local/bin/npm',
1 verbose cli   'run',
1 verbose cli   'browser-sync' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebrowser-sync', 'browser-sync', 'postbrowser-sync' ]
5 info prebrowser-sync react-chartist@
6 info browser-sync react-chartist@
7 verbose unsafe-perm in lifecycle true
8 info react-chartist@ Failed to exec browser-sync script
9 verbose stack Error: react-chartist@ browser-sync: `browser-sync start --server --files './bundle.js'`
9 verbose stack spawn ENOENT
9 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:17:16)
9 verbose stack     at emitTwo (events.js:87:13)
9 verbose stack     at ChildProcess.emit (events.js:172:7)
9 verbose stack     at maybeClose (internal/child_process.js:818:16)
9 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
10 verbose pkgid react-chartist@
11 verbose cwd /Users/frankcash/Code/react-dropdown/example
12 error Darwin 14.1.0
13 error argv "/usr/local/Cellar/node/4.1.2/bin/node" "/usr/local/bin/npm" "run" "browser-sync"
14 error node v4.1.2
15 error npm  v2.14.6
16 error file sh
17 error code ELIFECYCLE
18 error errno ENOENT
19 error syscall spawn
20 error react-chartist@ browser-sync: `browser-sync start --server --files './bundle.js'`
20 error spawn ENOENT
21 error Failed at the react-chartist@ browser-sync script 'browser-sync start --server --files './bundle.js''.
21 error This is most likely a problem with the react-chartist package,
21 error not with npm itself.
21 error Tell the author that this fails on your system:
21 error     browser-sync start --server --files './bundle.js'
21 error You can get their info via:
21 error     npm owner ls react-chartist
21 error There is likely additional logging output above.
22 verbose exit [ 1, true ]

console output

Error: Cannot find module 'react' from '/Users/frankcash/Code/react-dropdown/example'
Error: Cannot find module 'react' from '/Users/frankcash/Code/react-dropdown/dist'
[Error: write after end]
Error: Cannot find module 'react-dom' from '/Users/frankcash/Code/react-dropdown/dist'
[Error: write after end]
Error: Cannot find module 'classnames' from '/Users/frankcash/Code/react-dropdown/dist'
[Error: write after end]

Menu is instantly closed after it is opened by click when running in WebView on Android <=4.3

When running in WebView on Android <=4.3, the dropdown menu is shown and closed right away on clicking. However, if the finger touches down and stays for a while, the menu would not be closed after the finger's up.

I'm guessing it is a compatibility issue for Android's legacy WebView because such issue does not exist for Android 4.4 and above, where Chromium becomes the engine for WebView. Hopefully a workaround can be provided.

Tested with both my own project and the demo page.

Support placeholder change

Hi,

After handling an event, my component re-renders a Select component, providing it with a new 'placeholder' prop (the initial value is "Loading..." and changes when the options are received from the network).

But the change is not reflected. The placeholder prop is ignored in componentWillReceiveProps() so the change is not reflected into state.

Paul

Multiple Dropdowns on same page

For some reason I am having an issue rendering multiple dropdowns on the same page, Im sure I am just missing something simple but I am not sure what it is.

import React, { Component } from 'react';
import Data from '../assets/utils.json';
import Dropdown from 'react-dropdown';

export default class AgeDrop extends Component {
    constructor(props) {
        super();
        this.state = {
            selected: {value: "0", label: props.placeholder}
        }
    }

    handleChange(option) {
        this.setState({selected: option});
        this.props.update(`SET_${props.placeholder.toUpperCase()}`, option);
    }

    render() {
        let val = this.state.selected;
        return (
            <section className="column">
                <Dropdown options={this.props.options} value={val} placeholder={this.props.placeholder} onChange={this.handleChange.bind(this)} />
            </section>
        );
    }
}

When rendering three of these for Months, Days, and Years of someones birthday they all keep getting updated when one changes

Selected option not highlighted

I am using this module and it is really excellent.

The only feature that I am missing is to have selected option highlighted in Dropdown-menu.

How can that kind of functionality be accomplished?

Babel throws error (@1.2.0)

I switched from version 1.0.4 to 1.2.0 and since then my Babel (^6.5.2) is throwing an error.

ReferenceError: [BABEL] /x/node_modules/react-dropdown/dist/index.js: Unknown option: /x/node_modules/react-dropdown/package.json.presets while parsing file: /x/node_modules/react-dropdown/dist/index.js

Could it be the same issue as #35 (forgot to push the dist directory)?

tabindex prop seems to be missing

When trying to select the rendered <Dropdown/> element in a form, using the Tab button on my Keyboard omits the Dropdown-selection box.

This might be due to a missing tabindex attribute.

A quick comparison between searching tabindex in react-select and react-dropdown shows this.

Hope my phrasing makes sense.

Dropdown doesn't open

Has anything changed about the configuration of the component since 0.7.2? My dropdown used to work fine with 0.7.2 but since I upgraded to 1.0.2, it doesn't open anymore. Unfortunately there's no error message at all so I cannot imagine what the problem might be...

The "caret" on the right side of the dropdown actually turns upside down but then the options are not shown.

Unexpected behaviors when default value is provided

Hi,

I'm experiencing unexpected behaviors when changing dropdown values. It only happens when the component is initialized with a default value.

Example:

// ...
const options = [
    { value: 20,   label: 'Show 20' },
    { value: 50,   label: 'Show 50' },
    { value: 100,  label: 'Show 100'}
];

// ...

render()  {

  return(
    <Dropdown
      value={options[0]}
      options={options}
    />
  );

}

When I select an option (that is not the default one), the first time works as expected, but the second time it fails to show the corresponding label, showing the default one.

I tried to pass an integer as an alternative value but it doesn't work.

Thanks!

Customizing class names

Hi there, thanks again for this great component.

I'd like to customize the class names emitted by the component. I'm building an embedded component, which is an area where React really shines.

One of my goals is to protect my content from the integrator's style sheets, so I can better accomplish that by using unique class names โ€“ basically prefixing everything, like mycomponent-dropdown-component etc.

Another advantage to letting the user customize the class names is that it becomes easier to integrate the component with an existing set of styles, such as when migrating an existing app, or having this component coexist on a page with dropdowns built in some other way.

Would you be interested in a PR that pulls the class names from props? They could default to the names you're using now.

Babelify as a dependency

I get this error when building my React app: "Cannot find module 'babelify' from '/home/crunchex/work/ksocv5/frontend/node_modules/react-dropdown'"

I think babelify needs to be added as a dependency.

Dropdown opens and closes immediately in Android 4.1 and 4.4 stock browser

On Android 4.1 and 4.4 stock(Native) browser, dropdown opens and closes immediately. As a result, user is not able to select any option.
This works fine for Chrome browser on those devices but fails for Native browser.
Reason behind this issue is onMouseDown and OnTouchEnd methods in index.js file.
https://github.com/fraserxu/react-dropdown/blob/master/index.js#L129

Both these methods are toggling dropdown state. On browsers other than Android native, stopPropagation() and preventDefault() makes sure that only one of these methods is invoked but on Android native browser, both the methods are being invoked and run. As a result, dropdown is opened by one event and closed by another.

Suggestion to fix: I feel that onTouchEnd listener on select element is not required. OnMouseDown is invoked on all devices( I have tested on android 4.1, 4.4, 5.0 and IOS 7, 9.2, 9.3) . Removing OnTouchEnd should fix this issue.

Allow lookup by value, not full object

When using options with labels and value, const options = [{ label: 'label', value: 'value' }] you should be able to do<Dropdown value="value" /> and have the correct value show as selected, instead of having to actually reference the entire object. This is closer to how traditional DOM selects work, and doesn't require juggling / storing the options array externally somewhere to reference it later. Additionally, what goes through state/flux/redux will be the value only, not the entire option object, which doesn't make any sense since that's display data. Putting it back into the component value={} means having to look up the right thing again in the array.

Typescript typings

Please add typescript typings - both commands fail:

typings install react-dropdown
npm install --save-dev @types/react-dropdown

is-selected doesn't seem to be getting set

When rendering the is-selected class onto an option it never seems to be working. The line responsible seems to be comparing two separate objects, so is always returning false. Should be checking option.value === this.state.selected.value or perhaps even the value and the label.

Relevant lines:

    let optionClass = classNames({
      [`${this.props.baseClassName}-option`]: true,
      'is-selected': option === this.state.selected
    })

Having a dropdown with two options having the same value causes errors

My options array:
[
{"value":[348195],"label":"All Phases"},
{"value":[348195],"label":"0-PH 0 "}
]

Warning I get:
warning.js:36 Warning: flattenChildren(...): Encountered two children with the same key, 348195. Child keys must be unique; when two children share a key, only the first child will be used.
in div (created by Dropdown)
in div (created by Dropdown)
in Dropdown (created by PhaseFilter)
in div (created by PhaseFilter)
in PhaseFilter (created by PhaseFilterContainer)
in div (created by PhaseFilterContainer)
in PhaseFilterContainer (created by Connect(PhaseFilterContainer))
in Connect(PhaseFilterContainer) (created by Schedule)
in div (created by Schedule)
in div (created by Schedule)
in div (created by Schedule)
in Schedule (created by SelectedProjectView)
in div (created by Tab)
in Tab (created by SelectedProjectView)
in div (created by Tabs)
in div (created by Tabs)
in Tabs (created by SelectedProjectView)
in div (created by SelectedProjectView)
in div (created by SelectedProjectView)
in div (created by SelectedProjectView)
in SelectedProjectView (created by MainViewContainer)
in div (created by MainViewContainer)
in div (created by MainViewContainer)
in MainViewContainer (created by Connect(MainViewContainer))
in Connect(MainViewContainer) (created by App)
in div (created by App)
in section (created by App)
in div (created by App)
in div (created by App)
in App (created by Connect(App))
in Connect(App) (created by Root)
in Provider (created by Root)
in Root

I'm guessing its because you're rendering the options with the keys attribute in React? Is there any way to get around it?

Pass through user assigned className attribute

That's a pretty easy fix, and there's times where I want to drop in an additional class on my objects just to assign minor things, in my case it's a static width so the page doesn't shift when I select an option from the dropdown.

I changed in my copy line 197 to:

var dropdownClass = (0, _classnames2.default)((_classNames2 = {}, _defineProperty(_classNames2, this.props.className, true), _defineProperty(_classNames2, baseClassName + '-root', true), _defineProperty(_classNames2, 'is-open', this.state.isOpen), _classNames2));

Basically passing through the className that I've put on the DropDown tag.

npm run watch doesn't work

react-dropdown (master)$ npm run watch
npm ERR! Darwin 14.3.0
npm ERR! argv "node" "/usr/local/bin/npm" "run" "watch"
npm ERR! node v0.12.2
npm ERR! npm  v2.7.5

npm ERR! missing script: watch
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!     /Users/EricFields/Development/react-dropdown/npm-debug.log
react-dropdown (master)$ 

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.