'Open Accordion only on click of the accordion
when i click on the checkbox it opens the accordion. what can i do to prevent the accordion from opening when i click on the checkbox. is there any style for this? or what should i do to make it open
export const FinancialAccordions: React.FC<Props> = ({ control, operation, index }) => {
const [expanded, setExpanded] = useState('panel_0');
const handleChangeExpanded = useCallback(
(panel: string) => (event, newExpanded) => {
setExpanded(newExpanded ? panel : false);
},
[expanded],
);
return (
<>
<Accordion key={operation.expenseId} onChange={handleChangeExpanded(`panel_${operation.expenseId}`)}>
<AccordionSummary expandIcon={<SvgArrowFinancial />}>
<Grid css={pl(12)} container justifyContent="flex-start" alignItems="center">
<Grid item xs={0.3}>
<Controller
control={control}
name={`selections.${index}`}
render={({ field: { value, onChange } }) => (
<FormControlLabel
value={value}
onChange={(e, checked) => onChange(checked)}
css={labelTextCSS}
control={<Checkbox />}
label=""
/>
)}
/>
</Grid>
</Grid>
</AccordionSummary>
<AccordionDetails>
<Grid container justifyContent="space-between" flexDirection="column">
<Grid item xs={11.35}>
<Grid container justifyContent="center" alignItems="start">
<Grid item xs={5.7}></Grid>
<Grid item xs={3.8}>
<Typography css={operationsChildDataCSS}>На сумму {operation.money} в том числе НДС 18%</Typography>
</Grid>
<Grid item xs={2.14}>
<Typography css={[operationsChildDataCSS, textRightCSS]}>По счёту</Typography>
</Grid>
</Grid>
</Grid>
<Grid></Grid>
</Grid>
</AccordionDetails>
</Accordion>
</>
);
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
