rkit / react-select2-wrapper Goto Github PK

Create wrapper component, which contain something like that:

... render() { return <Select2 defaultValue={this.state.selectedValue} data={this.props.selectData} onChange={(e) => this.onSelection(e.target.value)} options={{disabled: this.props.disabled}} /> }
Then create some toggler, which will change disabled from false to true. Select2 renders the first state of disabling correctly, but afterwards ignores updates of this property.

I am using tags true when I try to create a new tag, Select2 automatically choose the first option though it is not executing onchange event but it should be empty if I didn't select anything already.

other than this wrapper works pretty well, thanks a lot for creating such wrapper, it saved my lot of time.

I have added the folliwing to my Select2 component:

<Select2
    ...
    style={{width:'auto'}}
    ...
/>

This component is rendered as part of a bootstrap modal dialog. The contents of the dropdow list do not force it to expand fully.

If I use this width:auto on a component that is NOT in a modal dialog, it worls ok. Any ideas why this does not work in a modal?

Hi, I'm having a problem displaying the hierarchy.

dataSelect2 : [
        {
            text : '1',
            children : [
                {
                    text : '2',
                    children : [
                        {text : '5', id : 5},
                        {text : '6', id : 6}

                    ]
                },
                {text : '4', id : 4}
            ]
        },
        {text : '7', id : 7},
        {text : '8', id : 8}
    ]

With this data, only the first 2

I got this error running a simple example.

The Select2 control supports optgroup elements, which are represented in data as objects with text and children attributes. I fixed this locally and will send a PR for it.

I'm using React v0.13.3. I install react-select2-wrapper from npm. I follow the example exactly it seems, yet get this error. Any ideas?

Invariant Violation: Select2.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

<Select2
            multiple={false}
            data={[{text: 'Bug', id: 0}, {text: 'Feature', id: 1}, {text: 'Documents', id: 2}, {text: 'Discussion', id: 'UUID'}]}
            options={{
              placeholder: 'search by tags'
            }}/>

My imports:

import React from 'react';
import Select2 from 'react-select2-wrapper';

I am getting the following error when trying to browserify the wrapper

SyntaxError: node_modules/react-select2-wrapper/src/components/Select2.jsx: Unexpected token (5:19)
3 |
4 | export default class Select2 extends React.Component {

5 | static propTypes = {
| ^
6 | data: React.PropTypes.array,
7 | events: React.PropTypes.array,
8 | options: React.PropTypes.object,

When adding the disabled attribute, the select2 no longer renders the defaultValue

There is only one parameter in the callback function, it is like an event object.But how to get the new value when changing selection.The parameter has a data property, but its value is always null.Should it be getten by the '.target.value' ? what if I set it multiple?what's more, when I select one option the dropdown doesn't fold automatically.

I have a single JS file with the following only:

import React, { Component, PropTypes } from 'react'
import ReactDOM from 'react-dom'
import Select2 from 'react-select2-wrapper'

ReactDOM.render(
  <Select2
    multiple
    data={['bug', 'feature', 'documents', 'discussion']}
    options={
      {
        placeholder: 'search by tags',
      }
    }
  />,
  document.getElementById('content')
);

This throws the following error on React 0.14.8:

app.js:1254Warning: React can't find the root component node for data-reactid value .0.0. If you're seeing this message, it probably means that you've loaded two copies of React on the page. At this time, only a single copy of React can be loaded at a time.

I am not loading any other React instances, in fact, this is the only script I have on the page compiled with Browserify.

I am using many other React components and they work fine, however, this one, even when alone (as in the example above) fails.

This error comes specifically from line 89:

this.el = $(ReactDOM.findDOMNode(this));

Any ideas what could be wrong?

I also tried React 15 RC2 and even though I get a different error message, it traces back to exactly the same line.

Recently I've started to experience an issue that freezes the browser for about 1 minute.

This is the CPU profile:

Any idea of what could be causing this issue?

I'd like to set an initial value for the select2 component

  var _options =    {
      placeholder: '',
      allowClear: true,
      dropdownAutoWidth:true,
      templateResult:this.templateResult,
      sorter:this.sorter,
      ajax:{
        url: "/value/options.json",
        dataType: 'json', 
        delay: 250, 
        data: function (params) {
         return { 
           q:params.q
           page: params.page };
        }
      }
    }

 return (<Select2 key={'select-'+attr.attr_id.toString()} 
        onChange = {this.cbChange}
        value = {_vsc}
        options={ _options}/>
        )

It seems this don't work

The render fails on server side, probably due to the underlying select2

Could you add styles to the package?

I'm curious about this piece of code in the render function:

const { data, value, ...props } = this.props;
const params = Object.assign(props);

Why is Object.assign used here? Is it to make sure params only gets props's "own" properties? What's an example of the Object.assign line coming in handy?

Which is the proper way to apply a different translation file (eg: i18n/es.js) ?

Not sure if this is a wrapper or select issue, but the options don't align to the box...

when use the single select placeholder is not work

realized the following steps:
git clone, npm i --save-dev, npm run start

I received the error:

`

[email protected] start /home/nilo/Documentos/react-select2-wrapper
cd examples && node server.js
events.js:141
throw er; // Unhandled 'error' event
^
Error: listen EADDRINUSE :::3000
at Object.exports._errnoException (util.js:856:11)
at exports._exceptionWithHostPort (util.js:879:20)
at Server._listen2 (net.js:1236:14)
at listen (net.js:1272:10)
at Server.listen (net.js:1368:5)
at Server.listen (/home/nilo/Documentos/react-select2-wrapper/node_modules/webpack-dev-server/lib/Server.js:280:27)
at Object. (/home/nilo/Documentos/react-select2-wrapper/examples/server.js:18:4)
at Module._compile (module.js:397:26)
at Object.Module._extensions..js (module.js:404:10)
at Module.load (module.js:343:32)
npm ERR! Linux 3.13.0-43-generic
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "start"
npm ERR! node v5.4.1
npm ERR! npm v3.3.12
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: cd examples && node server.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'cd examples && node server.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the react-select2-wrapper package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! cd examples && node server.js
npm ERR! You can get their info via:
npm ERR! npm owner ls react-select2-wrapper
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /home/nilo/Documentos/react-select2-wrapper/npm-debug.log
`

any tips?

I have the following select2 component:

<Select2
                                ref={name}
                                name={name}
                                value={selectedValue}
                                className="form-control"
                                options={{
                                    minimumResultsForSearch: Infinity,
                                    dropdownAutoWidth: true
                                }}
                                data={dataArray}
                            />

When the dataArray content changes, the options in the drop-down list are not showing the latest values. I my specific case, I have three select2 components (a simple for loop will generate them) which all use the same dataArray and either none or some of the select2 components update with the latest values in dataArray.
I know that dataArray contains that latest values because I console.log these out beforehand, so this seems to suggest that it is a problem with the react-select2-wrapper package (?)

I am using version 1.0.2

we are trying to use this project but .babelrc creating problem.

Please add .babelrc to .npmignore !
It will be a great help !

I am pulling my hair out trying to figure out why select2 stopped working for me. My best guess is that a package I updated is conflicting with this one. However I figured I would ask here to see if there is an easy way to resolve the issue. Thanks for your help.

I have been trying to do this simple thing with this component and it does not work.

In the onSelect method, I want to return the value to the previous selected value.

So I am trying to manually set the select2 value.

$('.select-input').val('theValue')

but setting it with .val function does not work

Also using the .select2 method does not work because it does not exist.

How can I manually set the select2 value with this component?

I have installed the react-select2-wrapper npm package, but the select element on the page is not rendering correctly. I assume that this is because the css file is not being included (correctly), so how do I go about doing this?

I'm trying to set a class in the generated select2 dropdown container via the dropdownCssClass option.

E.g.

<Select2
  ...
  options={{
    dropdownCssClass: 'my-class-name',
  }}
/>

I read that this option requires the full version of select2 to work.

I'm able to get it working by changing the code on line 29 of /react-select2-wrapper/lib/components/Select2.js from:

require('select2');

to:

require('select2/dist/js/select2.full');

Is there any way I can tell react-select2-wrapper to use the full version without hacking the package?

Thanks

Could you include somehwere what equivalent version of Select2 is included in this package?

Module not found: Error: Cannot resolve module 'expose' in /Users/jiangtong/Desktop/beautyandcar/sunmnet_bigdata_web/node_modules/react-select2-wrapper/lib/components
@ ./~/react-select2-wrapper/lib/components/Select2.js 47:14-31

Thanks for the component. I could be completely missing something obvious here. In case someone else ran into this, I wanted to document a solution. It is a fairly documented case that select2 requires an empty <option> for placeholders to show up on single value fields. This seems to still be the case. I was able to get the placeholder to show up by adding an empty option to the data prop. Something like:

var data = [];
var empty = {id: null, text: null};
data.unshift(empty);

Hi,

I wish to use the package for my project, however i am getting the below error:

Module not found: Error: Cannot resolve 'file' or 'directory' /Users/vsharma/results/html/lib/select2/js/select2.js in /Users/vsharma/results/node_modules/react-select2-wrapper/lib/components

Kindly help me in this regard.

Thanks,
Ved

When I try to use the onChange binding, the page freezes up until I make my first change on the select. Then the page behaves relatively normally. I think there is some kind of circular checking that happens, when using this handler. onSelect seems to do the trick, not causing hanging.

On a separate note, when trying to test the functionality with enzyme, simulate('change') seems to not work, most likely because I'm using onSelect instead of onChange.

Stack trace:

Uncaught (in promise) RangeError: Maximum call stack size exceeded
    at RegExp.[Symbol.replace] (native)
    at String.replace (native)
    at Function.htmlPrefilter
    at jQuery.fn.init.<anonymous>
    at access
    at jQuery.fn.init.html
    at DecoratedClass.Placeholder.createPlaceholder
    at DecoratedClass.createPlaceholder
    at DecoratedClass.Placeholder.update
    at DecoratedClass.update

Please let me know if you need more details, thanks.

Addendum:
My value is '', but my data does not contain this value. I think this is what is causing the infinite loop.

Hi,

If I attach a component value to this.state.items, and I do the following, it doesn't updates :

const items = this.state.items;
items.push(newItem);
this.setState({items};

And if I just add

items = _.clone(items);

before setState, it works. Is it normal? Seems misleading.

Right now the defaultValue is required to be number or array. A string is perfectly valid when the id is not a number. Can you add the string as a valid value?

defaultValue: PropTypes.oneOfType([
      PropTypes.number,
      PropTypes.array,
      PropTypes.string,
    ])

.select2-container .select2-selection--single .select2-selection__rendered {
display: block;
padding-left: 8px;
padding-right: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

I am logged out the event from the onSelect and onChange functions.

I looked at the object in console and nowhere to be found is the previous value. It only gives data on the new value selected. But how can I get access to the previous value?

React DOM 15.2.0 has added warnings for unknown DOM element properties. I noticed one warning from from this library about the options and events props being passed to the <select> element.

I think I can make a quick PR to destructure them before passing ...params to the <select> element.

https://fb.me/react-unknown-prop

I'm attempting to render option groups/sections, following the docs. The optgroups are properly created, however they do no appear within the Select2 dropdown.

<optgroup label="Aatrox">
  <option value="266000">default</option>
  <option value="266001">Justicar Aatrox</option>
  <option value="266002">Mecha Aatrox</option>
  <option value="266003">Sea Hunter Aatrox</option>
</optgroup>

render() {
  var data = [{"text":"Aatrox","children":[{"id":266000,"text":"default"},{"id":266001,"text":"Justicar Aatrox"},{"id":266002,"text":"Mecha Aatrox"},{"id":266003,"text":"Sea Hunter Aatrox"}]}];
  return <Select2 data={data} />;
}

Is there something different I need to be doing?

Is there any way to pass option "maximumSelectionLength" into the component?

Select2's way: select2.github.io/examples.html#multiple-max

I tried your way: https://github.com/rkit/react-select2-wrapper#properties
But it didn't work.

how to set selected on componentDidMount?

Hi,
I've got this error when I load the module
import Select2 from 'react-select2-wrapper';

I'm using Babel, Webpack and React on a 4.2.2 nodejs.

Hi,

I might be doing this wrong, but I'm having a hard time trying to use this inside jest using enzyme's mount to mount my root component. It seems that the Select2 object is not rendered into the DOM when I mount my root component.

This doesn't happen with other components I'm using so I'm not sure whether I'm doing something wrong or rather it is a limitation of this component.

Any help would be greatly appreciated.

Hi,

Any way to load select2.full instead of select2 ? its adds the ability to add a className to the dropdown :
with options.dropdownCssClass

Best regards,

1. Is it possible to not trigger the props.onChange() when Select2 is rendered the very first time or when props.value() is explicitly changed ?

2. When I update both the props.value & props.onChange(), it calls the previously set change handler.
   This seems to be because the setValue() call in componentWillReceiveProps() triggers the change event and the componentWillUpdate() lifecycle method updates the handlers. Is there a particular reason why we update value in componentWillReceiveProps() ?
   https://github.com/rkit/react-select2-wrapper/blob/master/src/components/Select2.js#L54-L58

Hi, I am not sure if I am using it wrong, but this is what I get when selecting any option.

    this.$element.on('change.select2', function () {
      self.dataAdapter.current(function (data) {
        self.trigger('selection:update', {
          data: data
        });
      });
    });

I would like to set the value of the Select2 element after it has been rendered, i.e. when a user clicks a button it changes tha value of the Select2 component. How can I do this?

Hi, does this support templating? I've tried the below but it doesn't render the output as html.

renderTemplate() {
    let format = (data, container) => {
      if (!data.title) return data.text;
      return data.text + "<p style='color:#bbb;font-size:x-small;font-variant:small-caps'>" + data.title + "</p>";
    }

    return (
      <div>
        Template<br/>
        <Select2
          multiple={false}
          defaultValue={2}
          data={[
            { text: 'bug', id: 1, title: 'testing1' },
            { text: 'feature', id: 2, title: 'testing2' },
            { text: 'documents', id: 3, title: 'testing3' },
            { text: 'discussion', id: 4, title: 'testing4' }
          ]}
          options={{
            placeholder: 'search by tags',
            templateResult: format
          }}
        />
      </div>
    );
  }

also tried this like the select2 example shows but that didn't work either.

return $(data.text + "<p style='color:#bbb;font-size:x-small;font-variant:small-caps'>" + data.title + "</p>");

Now i can print id & text, i want to store and print one more value "extra".
If it is possible?

data:[
{id:0,text:"asda",extra:"one"},
{id:1,text:"adasdas",extra:"two"},
],

Hi,
Search field appears but i cant write anything into it.

This is my component settings:

var options = [

        {id:"test1",text:'test1'},
        {id:"test2",text:'test2'},
        {id:"test3",text:'test3'},

      ]
var   selectedOption = null,
<Select2
        options={{

          minimumResultsForSearch:1

        }}
        name="test"
        placeholder="select..."
        value={selectedOption}
        data={options}
      />

Here is HTML

<div class="form-box">
   <select name="select-load-balancer-method" placeholder="select..." tabindex="-1" class="select2-hidden-accessible" aria-hidden="true">
      <option value="test1">test1</option>
      <option value="test2">test2</option>
      <option value="test3">test3</option>
   </select>
   <span class="select2 select2-container select2-container--default select2-container--above select2-container--open" dir="ltr" style="width: 679.006px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="0" aria-labelledby="select2-select-load-balancer-method-ss-container" aria-owns="select2-select-load-balancer-method-ss-results" aria-activedescendant="select2-select-load-balancer-method-ss-result-95lu-test2"><span class="select2-selection__rendered" id="select2-select-load-balancer-method-ss-container" title="test2"></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
</div>

I couldnt make jsfiddle because i didnt find external cdn select2-react-wrapper library.

@edit
I have found this gem

Hello,

Thanks for this component. Im trying to implement this to my project but Im seeing this warning.

I`m using react : 15.0.1