页面需求是下拉选项一直显示。现在不支持。
想自己组织成那种形式，看了下代码这部分逻辑又是揉在一起的。

It looks like the input text width is being incorrectly set when using IE11 when typing characters in the text box of the tree-select component.

Inspecting the DOM the width is getting set to 12px regardless what is typed in the search/input box:

input class="rc-tree-select-search__field" role="textbox" style="width: 12px;" value="the"

Looking into the source I'm seeing in the componentDidUpdate/DidMount its setting the width based on the scrollWidth:

inputNode.style.width = ${inputNode.scrollWidth}px;

Update: Testing it on Edge has the same issue. Other browsers are fine and work perfectly.

Is it possible to have 'single' selection, but to mark selected items? here is case:

1. user selected somewhere some items, each item has additional settings that has no any connection with 'tree'
2. user want to add a new item - popup with tree is opened and user must a new one selection.
3. user want to know what items he/she already selected, so we need somehow to mark already selected items (right now it's possible only with multiple mode)
4. multiple mode can't be used, because user must select one by one, because each selection has additional settings, so case is: user select option, configure it. select another one and configure it. but! during selection he must see somehow items that were already selected before.

1. 异步的树搜索时，默认父亲图标展开

2. 搜索时选择子节点会有问题

现在的场景是这样的，我把部门和用户放在这颗树下，onChange 触发是我想知道选中了哪些部门和用户，现在只能得到ids，无法区分出数组和部门。
期望在onChange 中得到全部的节点数据而不是只有ids。

Changes were made to fireChange method in Select.jsx that are breaking. Previous versions would call fireChange with two params, the code for selected item and extra info. 1.5.0 changed this to be called only with selected item value which is now an object.

Since this is a breaking change the version should have been implemented to 2.0.0 to avoid issues.

Here's the change: https://github.com/react-component/tree-select/blob/master/src/Select.jsx#L658

treeCheckable模式下， 页面刚刚进入，按下BACKSPACE键在inputValue为空的情况下首次能删除node节点。 删除后再选中节点， 再按下BACKSPACE键，发现节点不能删除。

demo：http://codepen.io/mosikoo/pen/RKYeJv?editors=0110

出现bug处： https://github.com/react-component/tree-select/blob/master/src/Select.jsx#L321-L324

我觉得在this.fireChange(value);前上

this. _checkedNodes =  xxxx  // 这里xxx指value值

Hello,

As the title explains, when i remove an item from the list, the dropdown does not update, as depicted + code.

Select

 <TreeSelect
        className="select_country"
        transitionName="rc-tree-select-dropdown-slide-up"
        choiceTransitionName="rc-tree-select-selection__choice-zoom"
        dropdownStyle={{height: 200, overflow: 'auto'}}
        dropdownPopupAlign={{overflow: {adjustY: 0, adjustX: 0}, offset: [0, 2]}}
        searchPlaceholder="Please choose a store"
        treeLine
        maxTagTextLength={10}
        treeNodeFilterProp="title"
        labelInValue={true}
        inputValue={null}
        showSearch={false}
        treeData={simpleData }
        treeDataSimpleMode={{
          id: 'key',
          rootPId: 0,
        }}
        defaultValue={this.props.defaultValue}
        onChange={this.props.onChange}
        allowClear={false}
        treeCheckable={this.props.treeCheckable}
        multiple={this.props.multiple}
      />

defaultValue

[
   {
      "value":256,
      "label":"256 - AMSTERDAM ARENA"
   },
   {
      "value":346,
      "label":"346 - KERKRADE"
   },
   {
      "value":664,
      "label":"664 - BEST."
   },
   {
      "value":896,
      "label":"896 - APELDOORN"
   },
   {
      "value":897,
      "label":"897 - LEEUWARDEN"
   },
   {
      "value":1088,
      "label":"1088 - BREDA."
   },
   {
      "value":1089,
      "label":"1089 - ARNHEM"
   },
   {
      "value":1161,
      "label":"1161 - ROTTERDAM"
   },
   {
      "value":1185,
      "label":"1185 - EINDHOVEN"
   },
   {
      "value":1186,
      "label":"1186 - DEN HAAG"
   }
]

`
treeData (simpleMode)

[
   {
      "key":25,
      "label":"NETHERLANDS",
      "value":10,
      "disabled":false,
      "pId":0
   },
   {
      "key":74,
      "label":"NL DGR PAYS BAS",
      "value":22,
      "disabled":false,
      "pId":25
   },
   {
      "key":42,
      "label":"NL NOORD-HOLLAND",
      "value":29,
      "disabled":false,
      "pId":74
   },
   {
      "key":353,
      "label":"346 - KERKRADE",
      "value":346,
      "disabled":false,
      "pId":42
   },
   {
      "key":671,
      "label":"664 - BEST.",
      "value":664,
      "disabled":false,
      "pId":42
   },
   {
      "key":903,
      "label":"896 - APELDOORN",
      "value":896,
      "disabled":false,
      "pId":42
   },
   {
      "key":904,
      "label":"897 - LEEUWARDEN",
      "value":897,
      "disabled":false,
      "pId":42
   },
   {
      "key":1095,
      "label":"1088 - BREDA.",
      "value":1088,
      "disabled":false,
      "pId":42
   },
   {
      "key":1096,
      "label":"1089 - ARNHEM",
      "value":1089,
      "disabled":false,
      "pId":42
   },
   {
      "key":1168,
      "label":"1161 - ROTTERDAM",
      "value":1161,
      "disabled":false,
      "pId":42
   },
   {
      "key":1192,
      "label":"1185 - EINDHOVEN",
      "value":1185,
      "disabled":false,
      "pId":42
   },
   {
      "key":1193,
      "label":"1186 - DEN HAAG",
      "value":1186,
      "disabled":false,
      "pId":42
   }
]

Input state

After click on the label
default value

[
   {
      "value":664,
      "label":"664 - BEST."
   },
   {
      "value":896,
      "label":"896 - APELDOORN"
   },
   {
      "value":897,
      "label":"897 - LEEUWARDEN"
   },
   {
      "value":1088,
      "label":"1088 - BREDA."
   },
   {
      "value":1089,
      "label":"1089 - ARNHEM"
   },
   {
      "value":1161,
      "label":"1161 - ROTTERDAM"
   },
   {
      "value":1185,
      "label":"1185 - EINDHOVEN"
   },
   {
      "value":1186,
      "label":"1186 - DEN HAAG"
   }
]

simpleTreeData

[
   {
      "key":25,
      "label":"NETHERLANDS",
      "value":10,
      "disabled":false,
      "pId":0
   },
   {
      "key":74,
      "label":"NL DGR PAYS BAS",
      "value":22,
      "disabled":false,
      "pId":25
   },
   {
      "key":42,
      "label":"NL NOORD-HOLLAND",
      "value":29,
      "disabled":false,
      "pId":74
   },
   {
      "key":353,
      "label":"346 - KERKRADE",
      "value":346,
      "disabled":false,
      "pId":42
   },
   {
      "key":671,
      "label":"664 - BEST.",
      "value":664,
      "disabled":false,
      "pId":42
   },
   {
      "key":903,
      "label":"896 - APELDOORN",
      "value":896,
      "disabled":false,
      "pId":42
   },
   {
      "key":904,
      "label":"897 - LEEUWARDEN",
      "value":897,
      "disabled":false,
      "pId":42
   },
   {
      "key":1095,
      "label":"1088 - BREDA.",
      "value":1088,
      "disabled":false,
      "pId":42
   },
   {
      "key":1096,
      "label":"1089 - ARNHEM",
      "value":1089,
      "disabled":false,
      "pId":42
   },
   {
      "key":1168,
      "label":"1161 - ROTTERDAM",
      "value":1161,
      "disabled":false,
      "pId":42
   },
   {
      "key":1192,
      "label":"1185 - EINDHOVEN",
      "value":1185,
      "disabled":false,
      "pId":42
   },
   {
      "key":1193,
      "label":"1186 - DEN HAAG",
      "value":1186,
      "disabled":false,
      "pId":42
   }
]

input state

Any idea?
Cheers!

In the "check select" example (at http://react-component.github.io/tree-select/examples/basic.html) , sometimes is useful to not only to select the leaf nodes, but also the parent's.

For instance, in this example, it should select (maybe with an extra property to allow this mode) not only the already selected nodes, but also the node: 0-0-0-label

As a workaround we simply commented this line at Select.jsx
checkedNodes = checkedNodes.filter(n => !n.props.children);

I just update to 1.7.4, and found the node will be highlighted when I click on the node. I think it doesn't make sense to highlight it, but shows the node is not checked. I guess it needs a fix on rc-tree end.

how to use in modal
在弹窗页面中使用tree-select组件的话无法显示下拉

big data demo 中当节点达到15万个时,整个界面都开始无法操作,反应十分缓慢

i'm talking about only 'select' control, not for tree. You have 'select.less' and looks like it's same as for 'rc-select.less'. So my question - is it possible to use same styles as for rc-select?

ant-design/ant-design#1345

Is it possible to pass custom templates for drowdown items? For example, adding info icons and exclude buttons.

I also tried to add custom styles to items (like greying out certain items) but that didn't work.

Is there any way to do these?

online demo

点开 select，左侧的 展开/收起 背景图显示有误

这个BUG存在于好几个版本中，还是我理解有误，正常显示就是这样的？？？

I cannot change the disabled data, when I change the treeData it doesn't render as the treeData is. The component seems to don't change his property.

I have trees which have icons; these icons depend on the current value of the node (level, node type), and gets the image from the Server. Something like this: ./ImageLoader/${node.level}/${node.type}. Right now I can embed the image on the title:

<TreeNode
  title={
    <div>
      <img src={'myurl...'} />
      <span>{node.title}</span>
    </div>}
  value={node.value}
  key={node.key}
  isLeaf
/>

The problem with this aproach is that:

• I would not get the node title on the onSelect event
• The Image would also be visible when the tree is not open

Would you consider extending the API of the TreeNode to accept an icon prop? I could also prepare a PR if you would be willing to integrate it.

Now it seems the dropdown menu is positioned based on how much top to the whole page, so it gives me a problem that if I use the tree-select in a model. If I can scroll in the model, the dropdown menu will remain at the position it appears, which looks like it's broken.

i used same code as before:

<TreeSelect className={`${prefixCls}-value-input`}
    dropdownClassName={`${prefixCls}-value-dropdown`}
    showSearch
    treeLine
    value={item.id}
    treeData={tree}
    treeDataSimpleMode={{id:'id', pId:'parent_id', rootPId:null}}
    dropdownMatchSelectWidth={false}
    filterTreeNode={filterTreeNode}
    showCheckedStrategy={TreeSelect.SHOW_ALL}
    searchPlaceholder={searchPlaceholder || formatMessage(messages.searchPlaceholder)}
    placeholder={valuePlaceholder || formatMessage(messages.valuePlaceholder)}
    onChange={(id) => this.handleChanges({ id })}
/>

previously it was quite fast. in my case it's about 6k items at tree. Now it takes about 20 secs (previously it was about 3 secs). Any help?

The scenario is if I search something that doesn't exist, then I can see "Not Found" in the drop down menu, however, the drop down menu then closes quickly. It is worse if I take off the animation for the drow down, I won't even be able to see the "Not Found".

I'm trying to figure out why this is happening, and I'm just recording this issue here.

Hello,

would be great to add support for tabIndex. So tree-select can be accessed via tab and open the option list by space bar?

Thank you
Sandster

I have an array of object like this one and i canot see them in the select i get "Not Found" on it

Object
children: Array[11]
disabled : false
label: "FRANCE"
value: "FR"
proto: Object

Hey, I just found that there's an issue for the util. The scenario is that I have multiple trees like this:

[
  {
    "label": "A",
    "value": "1",
    "key": "1",
    "parentId": null,
    "isLeaf": false,
    "children": [
      {
        "label": "A1",
        "value": "2",
        "key": "2",
        "parentId": "1",
        "isLeaf": true
      },
      {
        "label": "A2",
        "value": "3",
        "key": "3",
        "parentId": "1",
        "isLeaf": true
      }
    ]
  },
  {
    "label": "B",
    "value": "4",
    "key": "4",
    "parentId": null,
    "isLeaf": false,
    "children": [
      {
        "label": "BB",
        "value": "5",
        "key": "5",
        "parentId": "4",
        "isLeaf": true
      }
    ]
  },
  {
    "label": "C",
    "value": "8",
    "key": "8",
    "parentId": null,
    "isLeaf": false,
    "children": [
      {
        "label": "CC",
        "value": "9",
        "key": "9",
        "parentId": "8",
        "isLeaf": true
      }
    ]
  }
]

In filterAllCheckedData function, when I select all the root nodes (A B C), and then select some of their children nodes, this checking will push an object with some undefined properties to checkedNodesPositions.

    if (siblingChecked === len) {
      parent.__checked = true;
      checkedNodesPositions.push({ node: parent, pos: parent._pos });

Later, it will throw errors on trying to split on the undefined property within flatToHierarchy function.

The checkboxes are not appearing and I believe it is due to the background-image url being used ("https://t.alipayobjects.com/images/T1.ANfXhXtXXXXXXXX.png") is down.

If I pass in filterTreeNode, I am able to customize which items are filtered. However, that is different from what is highlighted. I'd like for the highlighting to be consistent with the filtering. The easiest way would be to check if filterTreeNode is defined, and if so, apply highlighting based on that prop, rather than highlighting independently

https://github.com/react-component/tree-select/blob/master/src/SelectTrigger.jsx#L175

For example:
filterTreeNode={(input, child) => { return child.props.value.toLowerCase().indexOf(input.toLowerCase()) > -1}}

I'd expect the highlight function to match:
highlightTreeNode={(input, child) => { return child.props.value.toLowerCase().indexOf(input.toLowerCase()) > -1}}

But since highlightTreeNode is not a valid prop, the highlighting is different

https://github.com/react-component/tree-select/blob/master/tests/Select.multiple.spec.js#L72

在谷歌系列的浏览器中 位置不对
在ie10中没有问题

      <TreeSelect
        className={className.select}
        treeLine
        treeCheckable
        treeCheckStrictly
        treeNodeFilterProp="label"
        treeData={treeData}
        value={selected}
        placeholder={'Please Search'}
        onChange={onChange}
      />

This is my code that using the lib, and the onChange is a callback function passed in from parent, the function only calls setState for selected values. But I found that doing search will show the matched items and their parents in the dropdown menu, then if I check an item, the previously selected items (not match the search) will be lost.

Hi,

Closing the dropdown requires two clicks outside the tree-select area. Interestingly, when using multiple=true, after I make a new selection then the first click anywhere in the screen does close the dropdown.

The behavior seems a little bit confusing to me, but it may be deliberate.

Is this working as expected or is it a bug?

(Tested on Chrome and Safari)

checkable/multiple

treeData:[{
label:'y',
children:[{
 label: 'x',
 children: []
}]
}]

一个都选择不了

Felt the little gap is calculated, any way I can control that? In other words, I just want to remove the little gap, and makes it looks like the common bootstrap dropdown component.

First of all: Awesome work on the Component! Thanks!!

I want to show trees with deep hierarchies, which is why I want to set the treeDefaultExpandAll initially to false. However when I perform a search, and there are matches I would like to show the tree expanded. Is there a way to do this?

My first intuition was to set the treeDefaultExpandAll to true while doing a search:

 <TreeSelect
    treeDefaultExpandAll={this.state.expandAll}
    onSearch={(val) => {
     this.setState({expandAll: (val && val !== '')})
    }}>
    ...
/>

But my aproach does not work, the tree does not expand while typing. Is there a way to do this. I would also be willing to help out in any way.

We are loading a tree of thousands of leaves, this component shows it perfectly, but it's so slow to search that it blocks the whole web page for a long while with high CPU usage.

Searching through this amount of leaves wasn't a issue with the jQuery fancytree we used before, so I guess the issue isn't with react, maybe we can figure out a way to improve the search method?

Is it possible to check the checkbox when clicked on the label of that particular checkbox. (may be through onSelect or something along that line)

The height of the input control is decreasing when I deselect the second element.
But the dropdown doesn't change.

If dropdown is open and I resize the window to be shorter, sometimes the dropdown will be positioned above the trigger. I would like an option to ignore this behavior and keep the dropdown placement below. Is this possible?

Hello,

Could it be possible to add a feature to wrap the disabled nodes?

Cheers,

Lilion12

It seems that the current version does not have a insensitive string compare. Will it be possible to make the search case insensitive.

We can add a props that will trigger the type of search.

If I'm not wrong, it may there where we will need to change the current behviour :

SelectTrigger.jsx line 265 to 273

loopAllChildren(treeNodes, (child) => {
      if (props.value.some(item => item.value === getValuePropValue(child))) {
        keys.push(child.key);
      }
      if (props.halfCheckedValues &&
        props.halfCheckedValues.some(item => item.value === getValuePropValue(child))) {
        halfCheckedKeys.push(child.key);
      }
    }); 

需求如题。
急需，下周二交付

然后发个升级 PR 到 antd featrue 分支，并补充下文档。

ant-design/ant-design#4608

I saw this allowClear && !multiple ? clear : null, so I wonder why don't allow clear for multiple mode? I think check select is also considered multiple mode, that would be nice if I can use one button to clear all selection.

Is it possible to use showSearch prop in mutiple mode? I want user to allow search/filter the results in a deep hierarchy tree.
Also, Is there any property to close the tree-input (multiple mode) dropdown once user select any item?

你好。
操作步骤：
1、搜索关键字遍历：b10
2、清除搜索
3、点开 a ， disabled中的a12无法展开

请问这种情况如何处理？
谢谢

treeCheckStrictly， treeCheckable两属性都为true时，rc-animate会报错

错误显示

Animate.js:290 Uncaught Error: must set key for children at http://localhost:3000/dist/demo.js:2646:18 at Array.map (native) at Constructor.render (http://localhost:3000/dist/demo.js:2641:33) at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (http://localhost:3000/node_modules/react/dist/react-with-addons.js:6336:34) at ReactCompositeComponentWrapper._renderValidatedComponent (http://localhost:3000/node_modules/react/dist/react-with-addons.js:6356:32) at ReactCompositeComponentWrapper.wrapper [as _renderValidatedComponent] (http://localhost:3000/node_modules/react/dist/react-with-addons.js:12883:21) at ReactCompositeComponentWrapper.mountComponent (http://localhost:3000/node_modules/react/dist/react-with-addons.js:5969:30) at ReactCompositeComponentWrapper.wrapper [as mountComponent] (http://localhost:3000/node_modules/react/dist/react-with-addons.js:12883:21) at Object.mountComponent (http://localhost:3000/node_modules/react/dist/react-with-addons.js:13617:35) at ReactDOMComponent.mountChildren (http://localhost:3000/node_modules/react/dist/react-with-addons.js:12222:44)

I managed it to display the arrow and clear all for multi-select mode, but when I select more, the new selected nodes will be out of the box. Can it just display 2 or 3 nodes, then follow with "...(x more nodes selected)"?

I want to separate the relationship between parent node children nodes, and I tried to use the checkStrictly props, but seems no effects. Could you help to give an guidance about this?

My treeData is get from remote and it is an JSONArray like:
[ {label:"A", value:"1", children:[ {label:"A1",value:11, childre:[...]} ]} ]

handleUserChanged(option){
        var currentUsers = this.state.userTreeValue;
        for(var i=0;i<option.length;i++){
            var user = this.state.userIdMap[option[i]];
            user.halfChecked = true;
            currentUsers.push(user);
        }
        this.setState({
            userTreeValue: currentUsers
        });
    },

<Row>
          <Col md={6}>
                                <TreeSelect style={{width: 740}} value={this.state.userTreeValue} dropdownStyle={{maxHeight: 400, overflow: 'auto'}} 
                                        treeCheckStrictly={true} treeCheckable={true} treeData={this.state.userTreeData} showSearch treeDefaultExpandAll={false} 
                                        placeholder={<i>请下拉选择</i>} showCheckedStrategy = "SHOW_ALL" treeLine searchPlaceholder="搜索人员..." treeNodeFilterProp="label" 
                                        onChange={this.handleUserChanged} />
          </Col>
 </Row>

Hi there,

I'm using TreeSelect via AntD and noticed that my dataset with approx 4000 nodes was performing extremely slow when expanding/collapsing nodes and especially when searching.

When checking the Big Data example, I had a similar issue, although this managed to cause my browser to crash (in both normal and checkStrictly modes.)

The above picture shows me searching for 0-0, which after taking a screenshot and beginning to report the issue, it finally came back to life:

Browser: Chrome 59.0.3071.115 (Official Build) (64-bit) (OSX)
Available memory: 3.10gb

Is there anyway to improve performance, even in strict checking mode?

Thanks

I'm seeing react-virtualized has an example of visualized tree view, so I'm wondering if the tree-select can take some of that advantage to make the tree view visualized? My data could be pretty large on each level, so it will be useful to make it virtualized.