select component inside checkbox , antd

Question

I'm working on React project with antd and I have a checkbox component, when use mark the checkbox as checked a select options will be displayed.I'll provide my code to be clear.

        <Checkbox
      key={identifier}
      onClick={(e: any) => {
        setSelectedCheckbox(e.target.checked);
        console.log('test=1', e);
      }}
      name={label}
      disabled={viewAssignment}>
      {selectedCheckbox && (
        <Select
          disabled={viewAssignment}
          key={identifier2}
          onSelect={(e: any) => console.log('test=2', e)}
          defaultValue={inputValue}
          notFoundContent={
            <CustomizeRenderEmpty message={t('NOT_FOUND')} />
          }>
          <Select.Option key={'data'} name={'data'} value={'data'}>
            {'data'}
          </Select.Option>
          )
        </Select>
      )}
    </Checkbox>

if selectedCheckbox is true then the select component will be displayed, but the issue when user try to select an option onSelect function will not be called onClick will be called instead with false value e.target.checked equals to false.

is there any way to have Select component inside checkbox without affecting the onClick function if there is any change made in select?

any suggestion will be helpful, thank you.

Answer 1

As mr-rogers described correct in his comment, the recommended design is to create a parent component which contains the Checkbox and the Select as separate components. Otherwise the onChange from the Checkbox is always called if a user trys to hit the Select. This is obviously wrong.

A simple example could look like this (here is the Stackblitz too):

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Checkbox, Select } from 'antd';

const CheckboxDemo = () => {
  const [selectedCheckbox, setSelectedCheckbox] = useState(false);
  return (
    <div>
      <Checkbox
        onChange={e => {
          setSelectedCheckbox(e.target.checked);
          console.log(e.target);
          console.log('test=1', e.target.checked);
        }}
        name="Test"
      >
        Test
      </Checkbox>
      {selectedCheckbox && (
        <Select
          key="2"
          style={{ width: 100 }}
          onChange={e => console.log('test=2', e)}
        >
          <Select.Option key="data1" name="data1" value="data1">
            data 1
          </Select.Option>
          <Select.Option key="data2" name="data2" value="data2">
            data 2
          </Select.Option>
        </Select>
      )}
    </div>
  );
};

ReactDOM.render(<CheckboxDemo />, document.getElementById('container'));