maslianok / react-select-me Goto Github PK

const options = [
  { value: 'CA', label: 'California' }
];
<Select options={options} value={''} />

as a workaround i'm using

if(value===''||value===null) {
   value = undefined;
}

in my render method

Hi
Locally the plugin doesn't work only the page is loaded . that is on Win 10

when value === 0, nothing is selected

example:

const options = [
{ value: 0, label: 'Test' }
];
<Select options={options} value={0} />

this results in nothing being selected.

additionally, it is not possible to select the item who's value is 0, however other options are selectable.

Hi,

I made sure that all scripts related to the search property implemented but unfortunately no search results appear when typing!

In the README docs it is specified that the selectedBlockRenderer receives as an argument the onRemove function. I was passing alongside my close icon and nothing happened. After a while I had to see the source code and noticed that the function that actually is passed along is the onChange, instead of the onRemoveSelected

https://github.com/maslianok/react-select-me#L196

hi,
thank you for the great work!

I tried to use the value: Any , I put it like
value="1" and value="Any" both didn't work. Note that 1 means the value of first object in the options.
Whereas isOpened="true" worked.

Hi guys,

First awesome lightweight without 500 props with useless use case =) That could be better if we add @typed/react-select-me support ? What do u think ? Vincent

Hi @maslianok! Thanks for open sourcing this component! Are you planning on putting out a demo so that users can see the component in action?

To clean an input I set my value to null, not undefined, and this results in a crash. I've read this issue and I'm forced to do the same in my Select wrapper: value: value != null ? value : undefined

ReactSelectMe._this.patchSelectedOption
node_modules/react-select-me/lib/ReactSelectMe.js:85
  82 | 
  83 | // search for this option in the `options` array
  84 | 
> 85 | var value = (typeof selectedOption === 'undefined' ? 'undefined' : _typeof(selectedOption)) === 'object' ? selectedOption[valueKey] : selectedOption;
     | ^  86 | var option = options.find(function (o) {
  87 |   return _this.getProp(o, valueKey) === value;
  88 | });``` 

There is a way to implement tab index to the component?

will submit pr if you will allow it. obviously this removes alot of unnecessary overhead in using this library.

Can't install this amazing library right now on my app because it doesn't support react 17.

I think upgrading the support for react 17 wouldn't be hard due to react 17 having few to none breaking changes.

Error while npm installing...
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14.7 || ^15.0.0 || ^16.0.0" from [email protected]
npm ERR! node_modules/react-select-me
npm ERR! react-select-me@"^1.3.0" from the root project

So, I have multiple Select's in a single parent component. Now, in the onChange, I only get the value selected but it has no information about which CustomSelect changed. How can I get that information, or how would you achieve the same without wrapping the Select into a separate component?

Since this library uses immutable.js (which sucks for treeshaking), having the label "lightweight" can cause confusion for developers expecting smaller build sizes with the packages.

Build size without react-select-me (webpack 4 + uglifyjs, no styles):

site.min.js 149 KiB 0 [emitted] main

Build size with react-select-me (webpack 4 + uglifyjs, no styles):

site.min.js 295 KiB 0 [emitted] [big] main

E.g., when the component is used inside Form

Hi,

I have the message in my application about new react-version migration:

react-dom.development.js:12387 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: ReactSelectMe

It's will be fixed in next releases? Or if I fix it - it's ok?

Thank you for cool select

It would be great to have keyboard support for selecting an item in the list.

Hello, I faced with some problem.
I'm using this code:
<SelectMe searchClearOnClose searchable onChange={handler} placeholder={placeholder} options={['red', 'green', 'blue']} value={value} />

I've seen in live example, when we select props 'Searchable' also select automatically prop 'Clear search on close' and when we write some text in input we see realtime filtering by options. But when I tried code above the list of options did not change. What am I doing wrong?

This is the full error.
warning.js?8a56:36 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of ReactSelectMe. See https://fb.me/react-warning-keys for more information.

Its a very common react error as you know. I even put a key prop in my optionRenderer Component but it still gives me the error. The only time it didnt give me the error was when under listRenderer instead of using the optionRenderer function I used my optionRenderer Component directly instead. But then I lost all the onClick and onChange events which is obvious.

Was wondering If you could shed some light on why is this happening

i tried like this

<Select
                  options={searchOptions || options}
                  value={this.state.value}
                  onChange={this.onChange}
                  placeholder='Country'
                  searchable
                  onSearch={(query) => this.onSearch(query)}
                  style={{backgroundColor: 'red', width: 200}}
                />

but it not work.
How do i custom style box and dropbox?
thank you.