rsuitejs Check Picker closes after changing

Question

I'am using React Suits components in my project and when i try to use the CheckPicker component it keeps closing after each check and i have to reopen the popup to do my second check

here's my code

const SolvedModal =(props)=>{
  const elmployeeSelector = React.forwardRef((props, ref) => <CheckPicker  size="lg" data={employees}  valueKey="id" labelKey='name'  {...props}  ref={ref}  block />);
  const [group,setGroup]=React.useState([]);
  return (     
            <Form fluid>
                    <Form.Group controlId="group-1" block>
                                <Form.Control name="group" size="lg" accepter={elmployeeSelector} value={group}  onChange={e=>setGroup(e)} placeholder="Group"  block />
                    </Form.Group>
            </Form>)
}

Answer 1

Using React.forwardRef inside another React component is creating a new React component each render cycle. Move it outside the SolvedModal component.

const elmployeeSelector = React.forwardRef((props, ref) => (
  <CheckPicker
    size="lg"
    data={employees}
    valueKey="id"
    labelKey='name'
    {...props}
    ref={ref}
    block
  />
));
  
const SolvedModal = (props) => {
  const [group, setGroup] = React.useState([]);
  return (     
    <Form fluid>
      <Form.Group controlId="group-1" block>
        <Form.Control
          name="group"
          size="lg"
          accepter={elmployeeSelector}
          value={group}
          onChange={e=>setGroup(e)}
          placeholder="Group"
          block
        />
      </Form.Group>
    </Form>
  );
}