Function call under onKeyPress in reactjs isn't getting called

Question

In the below code when i enter a search string and press enter, this is becoming undefined and as a result the function is not getting called.Can anybody please help me understand why? I have tried almost everything but nothing seems to be working neither could i find any pointers to the problem i am facing.

    class HomepageBody extends Component{ 
    constructor(props){
    super(props);
    this.state = {
    value :'',
    error: null,
    isLoaded: false,
    array: [],
    mobile: ''
   }
this.readSearchString = this.readSearchString.bind(this);
this.doSomething = this.doSomething.bind(this);
}

 readSearchString(event){
if(event.target.value === ''){
  this.setState({
    error: null,
    array: ''
  });
}
else{
this.setState ({
  value : event.target.value
});
}
}

doSomething = () => {
 fetch(`http://localhost:8080/items?search=${this.state.value}&page=1`, 
 {
  headers: {
    'Accept': 'application/json'
  }
})
  .then(res => res.json())
  .then(
    (result) => {
      if(result.length != 0){
      this.setState({
        isLoaded: true,
        array: result,
        error: null
      });
    }
    else{
      this.setState({
        isLoaded: true,
        error : "No matches found",
        array: ''
      })
    }
    },
    (error) => {
      this.setState({
        isLoaded: true,
        error: "We are experiencing some temporary problem, please try again later"
      });
    }
  )
  }

 render () {
const {mobile} = this.props;
return(
<Container>
  <Header
    as='h1'
    content='Title'
    style={{
      fontSize: mobile ? '1.2em' : '3em',
      fontWeight: 'normal',
      marginBottom: 0,
      marginTop: mobile ? '5em' : '3em',
      display:'block'
    }}
  />
<Input  icon={<Icon name='search' inverted circular link />}
    placeholder='Search .....'
    style={{
    fontSize: mobile ? '1em' : '1em',
    fontWeight: 'normal',
    marginTop: mobile ? '1em' : '1em',
    width: mobile ? '280px' : '600px',
  }}
  onChange={ this.readSearchString }
  onKeyPress={(event) => {
    if(event.key === 'Enter'){
      this.doSomething()
    }
  }}
  focus
/>
  </Container>
)
}
}
   HomepageBody.propTypes = {
   mobile: PropTypes.bool,
}

Thanks, Vikram

Answer 1

Set an attribute of tabIndex="0" and it will work.

tabindex="0" allows elements besides links and form elements to receive keyboard focus. It does not change the tab order, but places the element in the logical navigation flow, as if it were a link on the page.

Answer 2

Yes, thats what i had done. But it didn't work. However i figured out a solution. If i'm not using the semantic ui framework's component, then i can define the function inline for onKeyPress and it works without any problems, but when i use the semantic ui framework and use the <Input> component, i have to override the function call. So this is how i did it

    <Input>
      ..........
      .........
      onKeyPress = {this.onKeyPress}
      </Input>


    onKeyPress= (e) => {
    if(e.key === 'Enter')
    this.doSomething();
   }

So i presume its got to something to do with semantic ui and the way it handles events within the component.