tbleckert / react-select-search Goto Github PK

Nice component, but when I tried to use it in my project (react 16.2 version) I've got error

Uncaught TypeError: _react.default.createRef is not a function at new SelectSearch (index.js?cd67:180) at new SelectSearch (eval at <anonymous> (utils.js?0184:112), <anonymous>:5:7) at constructClassInstance (react-dom.development.js?cada:6355) at updateClassComponent (react-dom.development.js?cada:7839) at beginWork (react-dom.development.js?cada:8225) at performUnitOfWork (react-dom.development.js?cada:10224) at workLoop (react-dom.development.js?cada:10288) at HTMLUnknownElement.callCallback (react-dom.development.js?cada:542) at Object.invokeGuardedCallbackDev (react-dom.development.js?cada:581) at invokeGuardedCallback (react-dom.development.js?cada:438)

Currently when no matched results found, the component doesn't show any feedback message.

An empty box, as it's shown in the official demo.

Is it possible to add a feedback message, something like: "No results could be found" or some customizable message?

Thank you,

When I use the keyboard to select an option (e.g. ArrowDown - ArrowDown - ArrowDown - Enter), the field is blurred. So then when I push tab to get to the next field, nothing is focused, so it focuses on the first field in the page instead of the next field in the page.

I think the best behavior would be to keep the search field focused, select() the text, and close the options dropdown. This allows the user to see what they selected and tab to the next field. They could also start typing a fresh search immediately, which would overwrite the selected text. Ideally they could also use the arrow keys to browse the options (which would redisplay the options).

I can accomplish a behavior that's pretty close using the valueChanged callback like this:

        // Need to set the search field value because otherwise it is cleared when the value changes.
        this.selectSearch.refs.search.value = getSelectedOptionDisplayName();
        this.selectSearch.refs.search.select();
        // Trick the SelectSearch into acting like it was blurred.
        this.selectSearch.onBlur();
        var $input = $(ReactDOM.findDOMNode(this.selectSearch.refs.search));
        // If it's the tab key, return true to let the event continue. Otherwise trick the selectSearch to act like it was focused.
        $input.one('keydown', (event) => (event.which == 9 ? true : this.selectSearch.onFocus()));

Which gives this behavior:

What do you think? Should this be the built-in behavior? How could I accomplish this in a less hacky way?

I have read the docs, but can't find how to import and option's format.

maybe like this:

import SelectSearch from 'react-select-search';

const options = [{name: 'Sweden', value: 'SE'}, {name: 'Italy', value: 'IT'}];

render() {
  return (
    <SelectSearch name="country" options={options} value="SE" />
  );
}

Hi Team,
having issue with dropdown -> Onclick dropdown list open after based on the screen it has to adjust but its always dropdown list will open down side only can any one help me

Currently I have a list of 800 items I wish to be able to fuzzy search. The issue arises that this of course is very slow to render and makes it generally sluggish.

I was wondering if there was a way to set a maximum amount of items to render at once. Of course this will mean a user will have to start typing first to filter through the results but it should mean it renders faster.

Thanks

just like the normal multi select, shadowed out options would be nice to have

something like:

let options = [
    {name:'foo', value:123, disabled:true},
    {name:'foo', value:123},
]

There is no property for disabling the drop-down.

v1.0.2 does not properly resets option list on backspace before sending it to fuse.

Minimal reproducible case based on live-demo example code:
https://stackblitz.com/edit/react-7u9dx3

Hi, I was looking for a React select component, and found this library. Thanks for publishing it!

Would you be able to compare it with some of the other React select libraries? How would a developer choose between it, and react-select for example?

how do i make this field as mandatory? required

Need to add more tests.

Hello everyone.
In my case I have a list of objects like that:
[{ id: 1, first_name: 'anyname'} , ... ]

I have

<SelectSearch name="userId" className="select-search-box" // multiple value={0} height={172} customEntries={true} fuse={defaultFormData.userSearchObj} options={ users.length ? users : [{ id: 0, first_name: '' }] } renderOption={option => option ? ${option.first_name}} renderValues={option => option.id } />

but when I select one item all items became selected. How can I fix this situation ?

Selecting an option with zero as value triggers the selection of the first option(index 0) e.g

const options = [
    { name: '100%', value: 100 },
    { name: '50%', value: 50 },
    { name: 'None', value: 0}
]

<SelectSearch
     name="rate"
     options={options}
 />

I'm assuming there's truthy check for null values in the code that gets tripped when it encounters a zero.

hey man,
i'm trying to think of a clever way to clear the input onclick (button). Any thoughts on the best way to approach this?

Hi, in your documentation you said:
/**

• The options array should contain objects.
• Required keys are "name" and "value" but you can have and use any number of key/value pairs.
  */
  So I added new key value pair to the option object (address: "hello@something")
  And I render my options like this (attached screenshot) name, address and image
  
  The question is how can I search by address because now it search only in name values

Can you please let me know how will i disable selectbox in this component?

hello, can u add a pagination for search result.

please help
var options = this.state.LGs
? this.state.LGs.map(function(LG) {
return {
name: LG.StructName,
value: LG.StructID
};
})
: [];

<SelectSearch
        name="LG"
        value={this.state.LG}
        options={options}
        placeholder="Select LG"
      />

I could not set default value.
the error show:

TypeError: this.state is undefined[Learn More] index.js:400
findByValue 25

if (!source || source.length < 1) {
--> findSource = this.state.defaultOptions;
}

Great component, unfortunately I cannot use it with the size of the list I have. If the options could be virtualized, it would be perfect.

Have a new issue that I'm hoping will be as quick to resolve as the last:

When I select an option the input is populated, but focus remains on the field and you can't actually see the text. If I click elsewhere on the page, then it shows, but without the click it makes for a wonky UX. Any thoughts?

Refer to - http://somup.com/cq63Isfc5a

Unable to use the module in scss project, it fails to compile when the file is included, because of the wrong @import format in the beginning of style.css file. Should be:

@import url('http://weloveiconfonts.com/api/?family=fontawesome');
instead of just
@import 'http://weloveiconfonts.com/api/?family=fontawesome';

How can you write create a typical react input workflow with react-select-search? onChange is only fired on selection, not keypress so I cant access a state/update state stored value and have to use jquery to select the value if on non selected values.

Instead of moving the selected option to the top, keep it in place but scroll to it when you open it.

Chrome 51, Firefox 46, Safari 9.0.3 on Mac OS 10.10.5

• visit demo page
• click the country selection field
• type ger
• press down key once to focus Germany
• press enter

Result: Nothing happens
Expected behaviour would be that it selects Germany as it does when clicking the item.

When I type in a value in the search list on the demo page, should I be able to use the down arrow key to get to various items? For instance, on the country one, if I type "Fr", I would expect to be able to hit the down arrow key and get to French Guiana. Right now, the only way I see to select it is typing enough that it is the first item on the list or using the mouse.

Thanks!

A really cool project, love it. does exactly what I need.

Might find a defect, my test case: first init with empty value/options, then pass in valid value/options, after re-render, default value would not show properly.

Potential fix as following marked part, should use options from newly passed in props check if new value is valid.

Ning.

componentWillReceiveProps(nextProps) {
const nextState = {};
const { defaultOptions, value } = this.state;

    if (nextProps.options !== defaultOptions) {
        const flattenedOptions = FlattenOptions(nextProps.options);

        nextState.options = flattenedOptions;
        nextState.defaultOptions = flattenedOptions;
    }

     if (nextProps.value !== value) {

const option = this.findByValue(nextState.defaultOptions, nextProps.value);

        if (option) {
            nextState.value = nextProps.value;
            nextState.search = option.name;
        } else {
            nextState.value = [];
            nextState.search = '';
        }
    }

    this.setState(nextState);
}

I have an Select with about 2,900 names. The search is not refined.


If I backspace the search also gets really confused and messes up.

THis happens when i give value in options as JSON object

Currently attempting to modify the options prop with my list in however it does not seem to work. I am loading the list dynamically and as such the option list can change. Is there any way of working around this?

If its by design then can I suggest you rename the options property to initialOptions or defaultOptions (which I believe react ask you to do if it sets the value once and does not update after that)?

We experienced an issue where changing the state value, that the value prop pointed at, to a blank string would change most aspects of the object, however the search input would not clear until a manual click was performed outside of the element. Triggering a click via any other means would not cause a refresh, nor would any changes to the element via jquery or javascript.

The only thing that ended up working was by getting a ref to the index object, and calling the __outsideClickHandler manually after changing the value. On our end we're also running a force update after this, and this is in the callback of the setState that clears the value.

While I've solved the issue on my end, this really doesn't seem like intended behavior, and someone else will likely have this issue.

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

Should be fixed in the next version

A new version under the next branch (and react-select-search@next on npm) is ready for test and will be the new v1. It contains major refactoring and API changes, so migration guide is still left to write. This is also a good place to discuss design decisions.

Is it possible for the user to enter customized data? For example if they're typing and the option they're looking for is not in the selection box, then they can still type it in. This way it could be used as more of a search box with suggestions from the selection rather than the other way around.

Console Error:
Unable to get property 'multiple' of undefined or null reference

Please excuse my ignorance if it's right in front of my face... vary new to react here!

After i've selected one of the options from the array, how do I access that value?

Any guidance much appreciated!

(in my case i'd like to update my state/redux store with the input value)

I got this error when using number as value

Uncaught TypeError: this.state.value.slice is not a function
    at SelectSearch.chooseOption (index.js:509)
    at onClick (index.js:670)

I think this line cause the error

var currentValue = this.state.value.slice();

Hope that you can update it! Thank you so much!

How to setup autocomplete="off" ?

I have forgottent to specify options.

Expected:

propTypes would say that options are required.

Actual:

   FlattenOptions.js:10 Uncaught TypeError: Cannot read property 'forEach' of undefined

The issue start to occured from 10.1 version. message is:
Uncaught TypeError: this.state.value.slice is not a function
My code is below:

changeUser = option => {
    this.setState({
      userId: option.value
    });
  };

<SelectSearch
                          name="userId"
                          className="select-search-box"
                          value={defaultFormData.userId}
                          height={172}
                          onChange={value => this.changeUser(value)}
                          options={ userOptions }
                          placeholder={translate('main.projectList.user')}
                        />

I roll bact to 9.6 version it is fixed.

Hi everybody,
How to assign id to SelectSearch element?

If you open a select and then click on another, the first one doesn't close.

Hi, when I tried react-select is a bit complicated for me and looks like a big bundled. So I searched this package and try it, but I have problem in typing of Typescript.
I would like to ask is there's any support for Typescript?

Error:(.., ..) TS7016: Could not find a declaration file for module 'react-select-search'. '../node_modules/react-select-search/dist/index.js' implicitly has an 'any' type.
  Try `npm install @types/react-select-search` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-select-search';`

package.json

...
"react": "^16.8.6",
"react-select-search": "^0.10.2",
...

I'm sorry I'm still beginner

style for loading icons is not working

Sorry for a silly question, but I can't figure how to get value from it.

It is rendering all the options as pure text and displaying them even when the input isn't selected.
Something isn't right.

You can see the problem in this small example project:

Is there a way to change/pass the chevron icon as an HTML element? I want to replace it with a svg icon I have. How do I do that?