<Form.SelectGroupItem> not accepting event handler

[c-kirkeby]

The <Form.SelectGroupItem> component is not accepting event handlers. e.g.

<Form>
  <Form.Group>
    <Form.SelectGroup>
      <Form.SelectGroupItem label='foo' value='foo' onChange={() => alert('foo')}>
      <Form.SelectGroupItem label='bar' value='bar' onChange={() => alert('bar')}>
    <Form.SelectGroup>
  <Form.Group>
<Form>

Toggling the radio buttons above won't call the onChange function. I was able to get around this by just using plain HTML with the classes from tabler.

[iamzjohn]

Hi @JHeebz I think u are placing wrong the event cuz if the onChange should be placed on the Form.SelectGroup instead of the SelectGroupItem, If u want to archive the effect using SelectGroupItem u can change the event to onClick instead of onChange

The correct way using onClick:

<Form>
  <Form.Group>
    <Form.SelectGroup>
      <Form.SelectGroupItem label='foo' value='foo' onClick={() => alert('foo')}>
      <Form.SelectGroupItem label='bar' value='bar' onClick={() => alert('bar')}>
    <Form.SelectGroup>
  <Form.Group>
<Form>

Correct way using onChange

constructor(){
this.handleChange = this.handleChange.bind(this);
}
handleChange(e){
alert(e.target.value);
}
<Form>
  <Form.Group>
    <Form.SelectGroup  onChange={this.handleChange(e)}>
      <Form.SelectGroupItem label='foo' value='foo'>
      <Form.SelectGroupItem label='bar' value='bar'>
    <Form.SelectGroup>
  <Form.Group>
<Form>

[c-kirkeby]

Form.SelectGroup doesn't accept an event handler either. Using just plain HTML elements I can put the event handler on either selectgroup-item or select-group. I'll try to add an example tonight.

[Greg-Hamel]

@jonthomp, I’ll be merging a PR to resolve this soon. I have it ready, just need to fix the flow errors I have caused in some other components which depend on Form Elements

[jonthomp]

🎉 This issue has been resolved in version 1.12.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀