Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Search mouse clicks does not work on setting the state of open to true #1417

Closed
Sunanda3094 opened this issue Mar 4, 2017 · 3 comments
Closed

Comments

@Sunanda3094
Copy link

When I click on the Search bar, I would want the results to be displayed for which I am doing the following:
-onFocus={this.openmenu} where
-openmenu = () => {
this.setState({ open: true, results:this.props.source});
}
Here, MouseClicks are not working once the results show up.

@levithomason
Copy link
Member

We want to help, however, there is not enough information provided here. Please use the codepen.io link provided in the issue template to demonstrate the issue.

@Sunanda3094
Copy link
Author

This is my code where mouse clicks don't work onFocus.

export default class SearchInput extends Component {

constructor(props) {
    super(props);
    this.state = { 
        counter: 0,
        open: false
    }
}

componentWillMount() {
    this.resetComponent()
}

openmenu = () => {
    this.setState({ open: true, results:this.props.source});
}

closemenu = (event, data) => {
    this.setState({ open: false});
    this.props.onBlur(data.value, this.props.label);
}

resetComponent = () => this.setState({ isLoading: false, results: [], value: '' })

handleResultSelect = (e, result) => {
    this.setState({ value: result.title })
    this.props.onChange(result.title,this.props.label);
}

handleSearchChange = (e, value) => {
    this.setState({ isLoading: true, value })
    this.props.onChange(value, this.props.label);

    setTimeout(() => {
    if (this.state.value.length < 1) return this.resetComponent()

    const re = new RegExp(_.escapeRegExp(this.state.value), 'i')
    const isMatch = (result) => re.test(result.title)

    this.setState({
        isLoading: false,
        results: _.filter(this.props.source, isMatch),
        })
    }, 500)
    
}

render() {
    const { isLoading, value, results } = this.state
    return (
            <Search
            loading={isLoading}
            onResultSelect={this.handleResultSelect}
            onSearchChange={this.handleSearchChange}
            onFocus={this.openmenu}
            onBlur={this.closemenu}
            open={this.state.open}
            results={results}
            value={this.props.value}
            fluid
            className={this.props.className}
            />
    )
}

}

@levithomason
Copy link
Member

levithomason commented Mar 4, 2017

Please understand that we'd like to help, but we, unfortunately, do not always have the time to setup working examples for each issue reported. Here is the issue template that contains the information that we need to help.

Specifically, I do not know what it is meant by "mouse clicks don't work on focus". This template is designed to get all the information we need to be able to assist. Please complete these fields, including forking the codepen.io template and updating it to demonstrate your issue:


Steps

  1. Boil water.

Expected Result

It should be hot.

Actual Result

It is cold.

Version

x.y.z

Testcase

Fork this to show the issue: http://codepen.io/levithomason/pen/ZpBaJX

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants