fraserxu / react-dropdown Goto Github PK

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

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.

The dropdown doesn't close when a user clicks outside of the dropdown menu.

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

Latest version with this commit b2e6690#diff-168726dbe96b3ce427e7fedce31bb0bc
require from the user to specify the onFocus callback.

We should first check if it's present in order to prevent raising an error (like it is the case with onChange callback)

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" ?

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

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!

It seems that these lines below cause the onBlur event on my input element to not fire if I click on any of my react-dropdowns.

    event.stopPropagation()
    event.preventDefault()

Hi @fraserxu! Great work! You've built an awesome project!

Can you add a link the github page you built somewhere in this repository? Either in a readme or the repository description or website? It was harder to find a demo than it should have been. Thanks so much!

Please add typescript typings - both commands fail:

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

Upon selecting an option via device emulation mode, the button receives click event.
How do I figure this out?

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.

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!

I like the way it looks but I am not able to get it approved because if I click anywhere around the edges it does not select. If I was able to put it on the div rather than the text label in the dropdown i believe this would fix this

Can we have the dropdown icon wrapped into the div , so that I can add some extra for the icon...

Please give us the option object that we've provided to component.

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://github.com/kadirahq/react-komposer/blob/master/package.json#L47
• https://github.com/nfl/react-helmet/blob/master/package.json#L71
• https://github.com/brigand/react-mixin/blob/master/package.json#L15

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

Is there any way to customize the css with some property?

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.

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.

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
    })

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.

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.

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.

Dropdown does not work inside a in Firefox.

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.

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.

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

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?

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)?

No Keyboard support for dropdown.
For accessibility reasons the dropdown should be able to be navigable via keyboard.

Compiled code should not be committed to git repositories. Git is for source code, not built code.

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);
}

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

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.

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]

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'}

Hello.

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

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?

The current check is props.placeholder || 'Select...', which doesn't catch an empty string.

I think it should be typeof props.placeholder === 'undefined' ? 'Select...' : props.placeholder

Please update to react 1.5.4 and fix the dependencies.

https://github.com/fraserxu/react-dropdown/blob/master/index.js#L23

This line is causing issues where "0" is passed as a value. !newProps.value should be a more stringent check, such as newProps.value === undefined || newProps.value === ''. I'm not sure if there are other cases you would want to check for such as null, so I haven't submitted a PR, but tbh this is a fairly trivial fix, so probably easy for you to do.

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.

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!

Hi!

It would be nice that we can pass custom classNames here...

https://github.com/fraserxu/react-dropdown/blob/master/index.js#L107

What do you think? Thanks!

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.