react-z / react-search Goto Github PK

Most search bars behave such that up and down arrows move through the list and the enter key triggers the search function (I think in this case it would be onItemsChanged).

Type something in the input box. Click away and click back in, and the input is cleared. Is this something to do with my implementation or is this the default behaviour? If the latter it should be removed and introduced as an optional setting imo.

I'm a newbie at React so bare with me, but I got this working however I can only select items half of the time or less..

1. I created my App using this: https://github.com/facebookincubator/create-react-app
2. ran npm install react-search --save inside the app folder

And then added this js code to my App:

import Search from 'react-search'
import React, { Component } from 'react'
 
class App extends Component {

  HiItems(items) {
      this.setState({ repos: items })
  }

  constructor (props) {
    super(props)
    this.state = {
      repos: []
    }
  }

  getItemsAsync(searchValue, cb) {
    let url = `https://jsonplaceholder.typicode.com/todos`
    fetch(url).then( (response) => {
      return response.json();
    }).then((results) => {
      if (typeof results !== "undefined"){
        let items = results.map( (res, i) => { return { id: i, value: res.title } })
        cb(searchValue)
        this.setState({ repos: items })        
      }
    });
  }

  render () {

    return (
      <div>
        <Search items={this.state.repos} />

        <Search items={this.state.repos}
                multiple={true}
                getItemsAsync={this.getItemsAsync.bind(this)}
                onItemsChanged={this.HiItems.bind(this)} />
      </div>
    )
  }
}
export default App;

but I can only select items half of the time, here is a video of me trying to select: https://sendvid.com/emr6tqhq

I copied the css from the example folder in node_modules/react-search/example/public/react-search.css

Tested using Chrome Version 54.0.2840.98 (64-bit)

I am trying the async version and and getting the following error:

Uncaught TypeError: Cannot read property 'bind' of undefined
at ./node_modules/core-js-pure/es/instance/bind.js.module.exports (bind.js:6)

Any suggestions?

`class TestComponent extends Component {
constructor(props) {
super(props);
this.state = { repos: [] };
}

getItemsAsync(searchValue, cb) {
let url = https://api.github.com/search/repositories?q=${searchValue}&language=javascript;
fetch(url)
.then(response => {
return response.json();
})
.then(results => {
if (results.items !== undefined) {
let items = results.items.map((res, i) => {
return { id: i, value: res.full_name };
});
this.setState({ repos: items });
cb(searchValue);
}
});
}

render() {
return (

export default TestComponent;`

Expected behaviour:
With the menu focussed, when the component loses focus, the menu should disappear. Effectively, the autocomplete__menu--hidden should be re-applied to the menu when the component loses focus.

Actual behaviour:
When the menu is focussed and displayed, it won't hide again regardless of losing focus or interacting elsewhere within the DOM.

Steps to reproduce:
Pretty self explanatory really, the official demo exhibits the same behaviour.

More info:
I'm using the latest version 2.0.4 via NPM, within a React 15.4.0 app. Below is the bulk of the React component I've wrapped around react-search.

search(text, cb) {
    SearchActions.searchByString(text, this.state.account.authToken);
    cb(text);
}

select(selection) {
    var result = this.state.results.find(function (result) {
        return result.id == selection[0].id;
    });
    if (result) {
        console.log(result);
        browserHistory.push(result.NodeUrl);
    }
}

render() {
    return (
        <div>
            <Search items={this.state.results}
                    placeholder='Search...'
                    multiple={false}
                    maxSelected={1}
                    getItemsAsync={this.search.bind(this)}
                    onItemsChanged={this.select.bind(this)} />
        </div>
    )
}

Looking through you're code, I don't see any reason why someone wouldn't be able to use your module with React 0.14.

Could you please update your peer dependency range to allow for it?

How can I hide the drop down arrow when item is selected ?

I'm having issues using the example. Selecting an item in the drop down only works when the mouse is used, not when the trackpad is used. I'm on Mac. Is anyone else facing the issue?

Hi, 

I'm using the react-search component and I have a question please.
How can I change or delete this message when I want to search a name : "Please search for some items..." that red message.

Thanks a lot.

with and without using NotFoundPlaceholder

I have a huge list of items (over 10k) that is part of the search list. When you try to click the search, it hangs . Is there way to not show items unless a query is typed out? Or maybe a way to lazily load the items as its scrolled down.
It would be great if there is a direction that i can check.
Thanks.

Hello

I have long unique ID's for my items as strings, like "af0aa000-2778-11eb-9d0e-0f95b229692e"

This doesn't work with your component because of this code. (parseInt)

handleSelect(e) {

 let element = e.currentTarget.children[0]

 let item = {
  id: parseInt(element.dataset.id),
  value: element.innerHTML.replace(/&/g, '&')
 }

 this.selectMenuItem(item)

}

Any possibility to change this to without parseInt?

Thx

Do you have any advice on how to use this component in conjunction with redux-form? Redux-form appears to require each custom input field to have a prop of input.value. I haven't yet worked out a way of generating that prop from the selected values. All advice/suggestions would be much appreciated. Thanks.

Hi, Sorry about opening another issue but npm install is not working on the latest version for this. this is my debug log:
Ammars-MBP:recoveryBall AmmarKarim$ npm install react-search --save

[email protected] postinstall /Users/AmmarKarim/Desktop/backUps/recoveryBall/node_modules/react-search
npm run build

[email protected] build /Users/AmmarKarim/Desktop/backUps/recoveryBall/node_modules/react-search
babel src --out-dir lib

The CLI has been moved into the package babel-cli. See http://babeljs.io/docs/usage/cli/

npm ERR! Darwin 15.0.0
npm ERR! argv "/usr/local/bin/node" "/Users/AmmarKarim/Desktop/backUps/recoveryBall/node_modules/.bin/npm" "run" "build"
npm ERR! node v5.2.0
npm ERR! npm v3.5.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: babel src --out-dir lib
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script 'babel src --out-dir lib'.
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-search package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! babel src --out-dir lib
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs react-search
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls react-search
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/AmmarKarim/Desktop/backUps/recoveryBall/node_modules/react-search/npm-debug.log
npm WARN EPACKAGEJSON [email protected] No description
npm WARN EPACKAGEJSON [email protected] No repository field.
npm ERR! Darwin 15.0.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "react-search" "--save"
npm ERR! node v5.2.0
npm ERR! npm v3.3.12
npm ERR! code ELIFECYCLE

npm ERR! [email protected] postinstall: npm run build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script 'npm run build'.
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-search package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run build
npm ERR! You can get their info via:
npm ERR! npm owner ls react-search
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Users/AmmarKarim/Desktop/backUps/recoveryBall/npm-debug.log

I would like to have the capability to pass a default value.
e.g. select a record from a table in a database; Click on the record, the default value in the search box will be updated from a prop or state with the option to change it using the drop down.

Hi,
I would like to use the items found in the search bar and send them as props to a different component. Is there anyway I can get access to the these found items.

Also, I would like to prevent displaying these items. is that possible?

Everything I put inside style={{ ... }} don't work

I have an array of 3 different values, it is possible to search across the three of them?

Hi!

This React components seems rather interesting!
Does it support gathering the items asynchronously from the server when the user types something?

Best regards,