react-component / select Goto Github PK

View Code? Open in Web Editor NEW

889.0 29.0 447.0 25.98 MB

React Select

Home Page: https://select.react-component.now.sh/

License: MIT License

JavaScript 0.78% TypeScript 96.73% Less 2.49%

javascript react react-component

select's People

Stargazers

Watchers

Forkers

e4259 lappb jasonslyvia duoduoin zincli jljsj33 jixiang923 wzuhyl setstate eternalsky zation kylezhang uuid1017 janeluck kafaichoi carlos121493 wang508x102 sundyxfan nordsimon quigebo yesmeck ziaochina hcnode raohai conqa yeliex spendesk rk-wjw ckshekhar kangaroozero mdedetrich elbrus facundogflores darmody julianisrael shikiryougi erdun mariostasos sponia-joker ineo6 notorganization troublemakerst lgordey hsingh23 manjitkumar yaoxiong jasonlin6086 ddcat1115 pindamonhangaba alexxnica kryndex damiangreen bakatrouble l-x-c dennis90 shanda506365 lsroman kotuhan hipsterzipster zangxiaohui bearyinnovative coderpawz queimadus reharik raso-react-components alidaibi darknessjs iuri-gg deju mujinhuakai khankuan ming1014 ambz4lyfe yuzexing mattmanske ginobilee jacqt warnerhooh fytriht chengjianhua codtango marswong vectorm jason121250148 yangdanself danedavid stephanieinez rolftimmermans fatelei lingyunruo grunmin danchab bloody-ux danyun dengfuping dan-diaz micate wilbertian kanweiwei mariomc

select's Issues

input 的 keyDown 事件如何获取

想使用 combo 模式来做搜索框，目前的问题是无法通过组件的 props 来获取 keyDown 事件，来完成比如回车进行搜索 (input 的 keyDown 全都内部处理掉了），关于这个这边推荐的处理方式是什么样的~

删除 onSelect / onDeselect

tree-select 中确定只有 onChange 监听整个所有的变化；onSearch 监听输入框的变化。

select 组件也删除掉 onSelect / onDeselect ，会有什么问题？

Bad export.

The way export now is a bad example.
Instead of this:

import Select from './Select';
import Option from './Option';
import OptGroup from './OptGroup';
Select.Option = Option;
Select.OptGroup = OptGroup;
export default Select;

Should be like this:

import Select from './Select';
import Option from './Option';
import OptGroup from './OptGroup';
export { Select, Option, OptGroup}

With bad export, it makes impossible to use your module correctly in Typescript language.

对于搜索内容的疑问

为什么搜索匹配的是Option的value，而不是展示出来的文字？

<Option value="1">测试一</Option>

我在搜索框中输入“测试”，搜索不到内容，输入“1”，能搜到“测试一”

删除多选框内选项时，不应该弹出选择框

演示：http://react-component.github.io/select/examples/multiple.html
版本：5.4.0
重现步骤：点击删除 x，会弹出下拉框。

placeholder

貌似新版取消了 placeholder 属性？看了下参数列表里好像也没有 placeholder 了，是换新属性名称了么？

Select component breaks on searching unavailable data and using arrow key to select "not found" and pressing enter key

Search for a value not in the drop down list. The notFoundContent "not found" shows up in the drop down, which is disabled and can not be clicked by the mouse. But the component breaks if we press down arrow followed by enter key. The case is possibly not handled. The example in the site also is broken.

multiple 下 onSearch 函数不管用

希望实现 http://react-component.github.io/select/examples/mul-tag-suggest.html 的效果，用户键入后动态获取数据。

但又不希望像 tags 模式下可以随意键入，只能选择。

组件联动存在问题

修改了一个输入框A的值，如果焦点没有离开输入框，就点了另外一个输入框B的增加或减少按钮，输入框A的改动不会生效

4.3.0

new props

renderDropdownToBody

default false

dropdownMatchSelectWidth

defaults to true

dropdownStyle

style applied to dropdown

不再支持 require 的使用方式了吗？

Select.jsx 里面还是有加 module.exports = exports['default'] 的，应该是有在用 add-module-exports ，但 index 的 export 方式会导致 add-module-exports 失效。

export { Option, OptGroup };
export default Select;

但这样不会

export.Option = Option;
export.OptGroup = OptGroup;
export default Select

combobox 的一点小疑问

https://github.com/react-component/select/blob/master/src/Select.jsx#L98

在 props 有 value 的情况下，combobox 的展示值 inputValue 就等于 value[0]，那么可否像 multiple 一样可以对应 label 呢~ 毕竟选出来的值一般还是看 label 的

选中的option应该显示name而不是value

下拉框可以默认滚动到当前选中项吗

没有看到这个配置项

Is it possible to pass no result string down as a prop

Currently, if no result matches the users input string, "NOT_FOUND" is shown.

需支持自定义 render 到 Option 和 Selected.

实际场景大概是这样的:

支持 select 分组

类似原生的 <optgroup></optgroup>。

http://select2.github.io/examples.html#templating

Disabled Prop Issue

Seems as though there is a bug if you have the component go from disabled={false} to disabled={true} and then back to disabled={false}. I'm investigating the issue further to see if I can make a pull request.

tag 输入模式过长的标签问题

应该最大长度截断，然后给 title 。

不支持 react 0.13.3？

目前开发使用的是 0.13.3 的 react，安装这个总是失败，是否有支持 0.13 的版本？

为什么使用绝对定位而不是相对定位来添加 DOM.

发现一个问题, 当点击出下拉菜单后, 这个菜单 DOM 时直接 append 到 body 中, 并且计算了一个绝对定位来搞定位置问题的.

那么问题来了, 如果我本来就是一个绝对定位的 box, 在里面要使用 Select 的话就会变得比较麻烦. 每次移动都要去计算它对于 body 来说的绝对定位位置. (因为实际上这个 box 是没有移动的, 比较典型的场景是 Modal)

在 rc-calendar 中暴露了一个 align 参数使用 dom-align 用来解决这个问题, 这个配置相当繁琐(需要配合 DOM id). 而且在 rc-select 也没有提供相应的接口. 那如果遇到这个情况应该如何处理呢? 像上面说的不停的手动计算吗?

所以, 为什么 rc-select 以及 rc-calendar 不直接把内容 append 到触发的input DOM 的后面呢? 这样只需要相对于父元素定位就可以了, 因为 input 和 rc-xxx 的父元素相同, 定位是相当方便的.

谢谢.

disabled 属性在 IE8/9/10 下失效

目前 disabled 依赖样式 pointer-events: none; 实现，有两个问题：

pointer-events IE11 才支持。
无法设置鼠标手型为 not-allowed.

Infinite scroll

select显示的是option的value 而不是option的children

这样我就必须把option的children和value写成一致

例如：

<Option value="2009年">2009年</Option>

而不能

<Option value="2009">2009年</Option>

多选框宽度计算有误

右边还有足够的空间，光标却切换到下行了。

Add active className when muiltple select input is foucsed

Use tab to focus muiltple Select (tags, combobox)

Now:

Expected:

ref ant-design/ant-design#1358

支持label和value的区分

正常的select应该是这样的：

[
   { value: 'one', label: 'One' },
   { value: 'two', label: 'Two' }
]

选择one的时候，input显示的是One，显示的是label的值。value是one，两个还是不一样的。现在select展示的就是value的值。

https://github.com/JedWatson/react-select 这个select就是这种符合原生select模式的。

支持 placeholder

Get the selected value from React

Hi, how can i get the selected value(s) from the React component?

需求讨论

业务中有这种需求：在 tags input select 里，想直接输入一串如 name1,name2,name3,name4,nam5,.... 这样比较长的内容（预先准备好的人员列表），组件自动根据分隔符(例如这里的逗号)，split 出来，然后分别验证这些条目是否合法（如果分别发Ajax将会很多、不可行），再转换为一个个 tag。

这种需求一般是单独做一个「导入」文件或组的功能来实现，但放到 tags-input 组件或 select 组件里，感觉也有一定合理性。

在 select2 的 Automatic tokenization example 里输入 red,blue,green, 这串特定分割的字符串，会自动根据逗号 split 出三个 tag 出来。select2 这个还能输入更多自动保存到选择list里，也不涉及到发Ajax操作。

当 defaultValue 为 0 时，无法正确初始化

<Select defaultValue={0}>
  <Option value={0}>0</Option>
  <Option value={1}>1</Option>
</Select>

combobox 模式时，默认高亮第一个

演示：http://react-component.github.io/select/examples/suggest.html
版本：5.4.0
重现步骤：输入『w』，弹出搜索建议框，删除『w』后再次输入『r』，第一个选项未默认高亮。希望可以实现默认高亮功能。

Single Select 时宽度固定

当组件就是普通的 select 控件的时候，select 的宽度会随着选择的 option 的值的宽度而变化，是不是考虑能取到最大 option 的宽度赋到 select 上？我看了系统默认控件的系统就是这样的。

combobox中的notFoundContent参数无效

解决方法是Select.jsx中174行改为数组

    if (!sel.length && showNotFound && props.notFoundContent) {
      sel = [<MenuItem disabled value='NOT_FOUND'>{props.notFoundContent}</MenuItem>];
    }

is it possible to render selected image?

i would like to render a value also:

e.g. - select icon with:
https://www.dropbox.com/s/5tsg0vl8lnccfir/Screenshot%202016-02-17%2012.42.15.png?dl=0

but after selection:
https://www.dropbox.com/s/qhea6uik4e93uyl/Screenshot%202016-02-17%2012.42.59.png?dl=0

i would like to render icon, not the value :(

is it possible?

need docs for search options

in this example, , code shows that you can set all data can be searched as Option's desc prop, but there is not doc for this.

allowClear模式下需要支持onDeselect，以告知取消选择哪一项

需求如题

不再支持 require 的使用方式了吗？

#75 的问题并没有解决

问题不是出在没有挂变量，而是多于一个 export 时，add-module-exports 是没有效果，这导致 lib/index.js 里最后是没有那句 module.exports = export['default'].

当tag或者multiple， disabled状态的时候，应该不能删除或者添加tag

我现在是通过 .rc-select-disabled 这个class，把x 的display:none

support filterOption/onSelect props

var Search = React.createClass({
  getInitialState() {
    return {
      data: []
    }
  },

  fetchData(value) {
    jsonp('http://suggest.taobao.com/sug?' + querystring.encode({
      code: 'utf-8',
      q: value
    }), (err, d) => {
      var result = d.result;
      var data = [];
      result.forEach((r)=> {
        data.push({
          value: r[0],
          text: r[0]
        });
      });
      this.setState({
        data: data
      });
    });
  },

  handleSelect(value) {
    console.log('select ', value);
  },

  render() {
    var data = this.state.data;
    var options = data.map((d) => {
      return <Option value={d.value}>{d.text}</Option>;
    });
    return <div>
      <h1>suggest</h1>
      <div style={{width: 300}}>
        <Select combobox onChange={this.fetchData} onSelect={this.handleSelect} filterOption={false}>
        {options}
        </Select>
      </div>
    </div>;
  }
});

Filter null child

If children include a null child, this line will raise error.

Consider following situation, if showJack is null, rc-select should filter the null child.

<Select defaultValue="lucy" style={{ width: 120 }}>
  { showJack && <Option value="jack">Jack</Option> }
  <Option value="lucy">Lucy</Option>
</Select>

Add support to remove selected className if another option is active

Please add support to remove .rc-select-dropdown-menu-item-selected from the selected item if another item has .rc-select-dropdown-menu-item-active.

The reason is that I would like the select dropdown to behave as in native <select> where only a single item of a dropdown is highlighted at a time.

搜索无法检测中文

select的搜索功能无法检测中文

after choosing a value there is a bug with styles

styles changes after selection.

here is before selection:
https://www.dropbox.com/s/p7jgte1ml01f7ea/Screenshot%202016-02-17%2011.55.19.png?dl=0
https://www.dropbox.com/s/zozxao96mbeq9du/Screenshot%202016-02-17%2011.57.44.png?dl=0

and it's after selection:
https://www.dropbox.com/s/0uwb1axgtjld79i/Screenshot%202016-02-17%2011.56.41.png?dl=0
https://www.dropbox.com/s/pm9dzx4siw7gcy6/Screenshot%202016-02-17%2011.57.22.png?dl=0

release 4.0.0

new

onSearch

support monitor search input

defaultValue

support defaultValue prop for select

optionLabelProp

#10

<Select optionLabelProp="label">
<Option value="heihei" labe={<i>!</i>}>haha</Option>
</Select>

filterOption

support filterOption as function

filterOption(inputValue,child):Boolean

optionFilterProp

prop of Option used as filter if filterOption is true

onSelect

support option as second parameter

onSelect(value,option)

placeholder/searchPlaceholder

backspace on mutilple mode

Add extra class to select to distinguish the dropdown placement if dropdown menu is open

Opened dropdown menu has currently a class like rc-select-dropdown-placement-bottomLeft. We need similar class for the select itself.

In our design the dropdown is attached to select and we want to remove the rounded corners on both select and dropdown on the side they touch. For this we must also know which direction did the dropdown open.

How to get rid of the gap between dropdown and select menu?

Hello. Thanks for the awesome component!

Please how to get rid of the gap between dropdown and select menu? The dropdown is positioned absolutely so I can't do .rc-select-dropdown { position: relative; top: -2px }.