dowjones / react-dropdown-tree-select Goto Github PK

I'm using React Redux in my project, and I've been trying to get the drop down to work correctly. In onChange, onAction, onNodeToggle I'm calling redux actions, which essentially is just a function that passes the variables to a reducer that sets the state tree.

Here's the component definition:

<DropdownTreeSelect
	data={this.props.state.tree}
	onChange={(currentNode, selectedNodes) => {
		this.props.actions.treeChange(currentNode, selectedNodes)
	}}
	onAction={({ action, node }) => {
		this.props.actions.treeAction(action, node)
	}}
	onNodeToggle={currentNode => {
		this.props.actions.treeNodeToggle(currentNode)
	}}
	placeholderText={'Select...'}
/>

Let's use the onChange event as an example. Here's the code for the treeChange action:

export const treeChange = (currentNode, selectedNodes) => {
    return (dispatch, getState) => {
        dispatch({
            type: types.TREE_CHANGE,
            payload: {
                currentNode: currentNode,
                selectedNodes: selectedNodes
            }
        })
    }
}

The event fires correctly, the action dispatches correctly, the state tree is modified correctly, i.e. currentNode and selectedNode is passed along and the state is set as desired.

The problem is that the control itself is not updating, i.e. the checkboxes do not get selected, the nodes don't toggle at all. It appears that the "rest" of the function that's supposed to happen after the action is dispatched just doesn't happen. If I comment out actions inside the events, it works perfectly fine.

I might be missing something really obvious... Any help would be appreciated. Thanks!

It appears that the className prop is not being applied when passed though.

Is there currently a way to capture the user hitting enter so that I can trigger submit?

hi
at the first better u know I'm new at the react
I use this but see this error
Calling PropTypes validators directly is not supported by the prop-types package. Use PropTypes.checkPropTypes() to call them.

You can see this even in the example.
https://dowjones.github.io/react-dropdown-tree-select/
If you type in on search field something in uppercase the field will write "No matches found".
I think it is not supposed to be that way

Hi
I'd like some help to understand why my choose box isn't behaving as expected please.
I'm using the bootstrap demo and the select tree is working fine but there is no arrow (or inverted arrow) for the choose box and the select tree values do not populate the choose box.
In short the choose box has no functionality.

Thanks

Hello.
Thank you for your useful library.
I have found a possible issue. When i include your lib in my React.Component it has not any style within itself.
So, it requires to import additional styles which i took from node_modules;

https://dowjones.github.io/react-dropdown-tree-select/#/story/large-tree

When I try, it seems to only find results from the first node. Maybe I'm doing something wrong. Tried with my own data, had the exact same behaviour.

How can I retrieve the complete tree structure containing the selected as well as unselected nodes? Till now I only have the 'selecteNodes' array and 'clickedElement' information but I am unable to save the complete tree on submit button.

When we use the onChange method, we have to rewrite the desired behaviors, which I find problematic.

Could we consider having an onChangeAfter entry, to retrieve the event on the current element and the data modified by the component?

Here is my problem, when I want to update my store I go through the onChange method to retrieve the selected items.

So if I select or deselect a node, I get the selected item, but the different desired behavior are not done anymore:

• selection of children
• parents' deselection
• ...

Maybe have a simpler solution and already implemented?

Based on feedback from here and here, need to improve search performance.

when I try to setState on onChange, checked values disappear.
i think there is a similar issue noted here.

I have a feature request to allow users to specify the maximum number of chips that can be displayed in the dropdown. Once the selected options reach that limit we can show More... text and on clicking that we can show all the selected options with Less... text just before the search box. On clicking Less... it will again show the number of chips specified by the user.

Furthermore, users can specify the text/component that should be shown in place of More... and Less....

Please let me know what you think about this feature.

Below is a GIF showing how it can work. (Example is configured to show maximum of 2 selected options)

Hi

I just installed this component and tried to run and noticed that it's missing a few styles. I don't see the arrow in select input and the expander symbols for opening and closing the data items. Also, only if I search for a keyword, it would expand the data items as shown in the screen-shots. Please advise!

Thanks!

The idea is to have children and leaf count on each node and to embed those infos on node and tag items via custom attributes ("data-nb-children", "data-nb-leaf" for ex.) so user can display them with a bit of css if he need it.

Displaying something like that

is done via content: "("attr(data-nb-leaves)")";

I don't know if you want something like that in your module but if so, I've got a PR for you ;)

Hi,
Is it possible to get all children values when a parent is selected? Or maybe to get the whole flattened tree and then filter it?
Btw, is it normal that children is undefined in currentNode or SelectedNodes in the onChange callback?

i can use react 16.2.0

All versions above 1.3.0 have the following warning to console; (1.4.0, 1.5.0, 1,6,0, 1,6,1 ... 1.7.0)

When choosing item from Dropdown options

index.js:2178 Warning: A component is changing an uncontrolled input of type checkbox to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components
in input (created by c)
in label (created by c)
in c (created by C)
in li (created by C)
in C (created by l)
in ul (created by l)
in l (created by t)
in div (created by t)
in div (created by t)
in div (created by t)
in t (at App.js:43)
in div (at App.js:38)
in App (at index.js:7)

clicking outside and closing the dropdown

Warning: An update (setState, replaceState, or forceUpdate) was scheduled from inside an update function. Update functions should be pure, with zero side-effects. Consider using componentDidUpdate or a callback.

In Simple select mode,

• Choose an option
• Remove it via the cross button on the tag
• Select that option again
• The option doesn't get selected.

Given a leaf node, Is there a way to find it's full path to the root node?

I have a <DropdownTreeSelect> component with a 3-tier hierarchy of data. I'm using this as a search filter, so onChange I'm sending the data upstream so the search can be performed. When the app re-renders, my search filter receives the selected items as props, and then I'm editing the data I'm providing to the <DropdownTreeSelect> to set the proper items as checked = true.

Everything works perfectly for top-tier parent items. However, when I open a parent item and select a child item, the dropdown immediately closes. The data flow is still working as expected, I'm just not sure why the dropdown closes. I'd like for it to stay open until the user chooses to close it. I also don't understand why it would be working for the parent items but not child items. Any idea what could be going on here?

I'll also note that when I remove my custom onChange function, the dropdown stays open no matter what items I select (but of course my search dataflow no longer works).

Installing Version 1.0.0 with command

yarn add react-dropdown-tree-select

It does not have anything in it other then Readme, package.json and Licence file.

Hi, for our project, we need to disallow selection on specific level. I think I can to this by wrapping DropdownTreeSelect with a custom component which will catch selection and do the job. I don't know if you want to enable this kind of behaviour in your plugin. If so, I can make a pull request to build this natively instead of using an wrapping component.

Currently styles are not minified in the distribution: https://unpkg.com/[email protected]/dist/styles.css

In this example - https://dowjones.github.io/react-dropdown-tree-select/#/story/basic-no-extra-styles
If you clicked on X tag, it's toggle dropdown visibility. But in other example all works correctly.

Thx!

When the dropdown is initialized I set a default pill that is selected, Im trying to see how I could reset this pill in case this pill is removed and they don't select anything else when they close the dropdown.

How can i set if the child is default value to select? when set isDefaultValue true in child, parent automatically checked.

I was wondering is it possible to use custom node component. I would like to replace the checkbox with another widget and I mean widget, not just styling the input. As far as I saw in the source code- the node is not a prop. Maybe if I use a HOC?

And my second question is regarding the tags list - is it possible to disable it?

There are two somewhat related parts to this question:

• Is it possible to lazily load child nodes when the parent (or some ancestor) is expanded?
• Is it possible to use a remote service to fetch search results instead of using only the locally available data?

Nice work on this component btw. It seems very useful. 👍

Hi,

Thanks for this awesome component 😄 . I am using it to show multiple hierarchies on a page and the data for these hierarchies is pulled from a web API. When the data is loaded then the component is rendered.

The problem which I am facing is when I use showPartiallySelected property then the root node(s) become automatically checked in the UI and I see the pill(s) for all of them. I have explicitly marked the property checked as false in the data but that doesn't help also.

Could you please look into this issue? Let me know if you need more details.

PS: I cloned the repo and used showPartiallySelected in the Large Tree example and same thing happens. The root node is checked by default. However, it works fine in the Default Values example. 🤔

Thanks,
Priyanshu

Either use Ava's snapshot testing or move to Jest. Jest offers more than Ava, so is preferred.

Hi
How do I get children value when I select the parent?
thanx

When using the component as a subcomponent componentWillReceiveProps of DropdownTreeSelect will be called for every setState in the parent component which rebuilds everything using data prop (even if data has not changed and even if it is a const variable). This means I have to update data otherwise all selections are cleared on every componentWillReceiveProps.

Since I don't want to manage the selections myself I changed componentWillReceiveProps to check if the data prop has changed and ignore it otherwise. This is however very ugly and more of a hack since the prop and the actual tree diverge this way -> I use data prop as the initial tree (see fork).

My only idea to solve this would be to return the updated tree on onChange (). This way the parent component can still decide to change the selections and the data prop and the actual selections are always in sync. However, this still means that on every componentWillReceiveProps everything is recreated (not sure what this means for the performance).

Any thoughts on this? Did I miss something really obvious?

I got this error when I am import first on the component:
import DropdownTreeSelect from 'react-dropdown-tree-select'

Hi. I'm looking for a widget where a branch or leaf in the tree can be selected. Selecting a branch/parent does not mean the children are selected. Otherwise, this widget looks great! Is there any way you could add that as a configuration option? Or maybe I overlooked a way to do this already?
The use case is that you're selecting a category in a tree. You can select 1 or more categories, but the categories can be parent or child (ie branch or leaf) categories.
Thanks!

Hi,

I am searching for a way to programmatically set the nodes that are selected in the tree without requiring user interaction, is it possible at all?

Thanks in advance!

Pablo

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

The push permission to the Git repository is required.

semantic-release cannot push the version tag to the branch master on remote Git repository.

Please refer to the authentication configuration documentation to configure the Git credentials on your CI environment.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Hi All,
I am trying to use this component in order to replace an older hierarchy selector component. I am facing issue while running the tests on webpack yarn run test-once (which basically runs karma start --log-level info --single-run --browsers PhantomJS) while the test pass with Chrome browser running continuously using yarn run test. I installed the component using yarn add react-dropdown-tree-select and using a mix of default and custom styles.I have copied default styles into a scss file in our project and also import the react-dropdown-tree-select styles like this @import '../node_modules/react-dropdown-tree-select/dist/styles.css' in our common app.scss file which includes all the style imports. We use webpack to bundle the code and following is the error in Jenkins:

PhantomJS 2.1.1 (Linux 0.0.0) ERROR
  {
    "message": "SyntaxError: Unexpected token 'const'\nat tests.webpack.js:140960:0",
    "str": "SyntaxError: Unexpected token 'const'\nat tests.webpack.js:140960:0"
  }
PhantomJS 2.1.1 (Linux 0.0.0) ERROR
  {
    "message": "SyntaxError: Unexpected token 'const'\nat tests.webpack.js:140960:0",
    "str": "SyntaxError: Unexpected token 'const'\nat tests.webpack.js:140960:0"
  }

Anyone faced this issue before while using this component? Any help/suggestions would be appreciated.

I want to set the selectedNodes data from the onChange to the state.

but when i use .setState(..) transferred to state but dropdown is not showing any item.
doesn't selected any items and doesn't show any selected items.

Forms like redux-form rely on onFocus, onBlur events to toggle dirty, touched states. Exposing these will help in validation.

I am trying to use this component in my app but getting the following error:

Element ref was specified as a string (trigger) but no owner was set. You may have multiple copies of React loaded. (details: https://fb.me/react-refs-must-have-owner).

I cannot find the string "trigger" anywhere in the source code. Thanks for any help!

Hi could you please change "console.table" to "console.log" or just add some props to disable it. so we can use this lib on IE11.

thx in advance 💯

I don't want the tree to be displayed only after the click event is performed on the search bar. Is it possible to display only the tree by default and hide the search bar?

Version 10 of Node.js (code name Dubnium) has been released! 🎊

To see what happens to your code in Node.js 10, Greenkeeper has created a branch with the following changes:

• Added the new Node.js version to your .travis.yml

If you’re interested in upgrading this repo to Node.js 10, you can open a PR with these changes. Please note that this issue is just intended as a friendly reminder and the PR as a possible starting point for getting your code running on Node.js 10.

Your Greenkeeper Bot 🌴

Hi Team,

I have a need to show the dropdown option in a hierarchy form and allow only to select one of them.
I tried passing keepTreeOnSearch and simpleSelect to the component but it is not working.
Do you know if there is a way to acheive this?

Disabled and readonly states should prevent the control from being edited. This will also support better integration as form control with components like redux-forms and formik.

Version 1.11.0 introducing react-infinite-scroll-component at the same time breaks server-side rendering because this dependency uses window internally.

ERROR:
ReferenceError: window is not defined

Is it possible to clear / deselect the check boxes?

Hello,

Already a big thank you for your work 👏

I need a CSS class that is not present at the moment in your plugin.
Adding a CSS class on the parent node when children are partially selected.

In my example, below, the 'SKI DE FOND' node should have this CSS class because their second child is not selected.

Does this feature seem interesting to you for your plugin?