react-z/react-search

Can't select items randomly

Opened this issue · 1 comments

OZZlE commented

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)

OZZlE commented

Also what is the purpose of the dropdown menu? I only want an input with autocomplete..