CSidebar auto-collapses on clicking on the panel in React app

[tamojay-dey]

I have a React CDatatable(ver 3.2) in which the rows are clickable. On clicking of a row, a sidepanel opens which contains the edit form for that row. The table also has an add button on the header which opens another sidepanel for adding a new row.
This is how my edit sidepanel is mapped to every shiftname column:

scopedSlots = {{ 'shiftname': (item) => { return ( <td className="onClick" onClick={() => onShiftNameClick(item)}> {item.shiftname} <ShiftEditAside/> </td> ); },

This is the handler for the add button which is present on the header of the CDatatable:

<CToggler inNavbar className="ml-auto"> <CButton onClick={onAddButtonClick} className="bg-info align-center">Add Shift</CButton> <ShiftAside/> </CToggler>

ShiftAside and ShiftEdit are the sidepanel components for adding and editing rows. The problem I am facing is when I click on add the button, the ShiftAside panel never auto-collapses when I am trying to fill the form but while editing, the ShiftEditAside expands but as soon as I try to edit the input fields, it auto collapses. Any idea why is that happening? The onShowChange and show props are all same for both the panels.

[clinton-mwachia]

Has anyone found the solution to this problem?

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions