Closed markwinap closed 3 years ago
Found the solution,
TabProps, is using the optional uniqueName prop instead of key for identifiying the selected tab. probably the best solution here is to update the doc, change the prop to mandatory or use key as unique name (key is already required to render the component)
Glad this was fixed.
@markwinap Can you point me to where the documentation was updated for this?
After adding a second plugin that adds a tab, I found that the tab label was being duplicated many times in the UI. (not the tab itself, but just the label). Eventually, I found this issue and setting uniqueName
for each tab solved that problem.
I have added uniqueName props still my "Tickets " tab is getting duplicated, Could you please help me to get it fix.
Thanks
` init(flex, manager) { var clientCTICompatable = true;
let userSysId;
Manager.getInstance().workerClient.on("reservationCreated", reservation => {
console.log(' Task Accepted with userSysId : ', reservation.task.attributes.userDetails.userSysId);
userSysId = reservation.task.attributes.userDetails.userSysId;
console.log('This is Task userSysId', userSysId);
if (clientCTICompatable) {
const options = {
align: 'end',
};
flex.TaskCanvasTabs.Content.add(
<Tab label='TICKETS' key='Tickets-panel-tab-key' uniqueName='Ticket-tab' sortOrder='1' >
<TicketList key='CtiViewPlugin-component-TicketList' userSysId={userSysId} />
</Tab>,
options,
);
}
});
this.registerReducers(manager);
`
Description
Custom tabs added by not seting key name causing errors on multiple custom tabs
flex.TaskCanvasTabs.Content.add(
);
Versions
craco-config-flex-plugin
3.14.2
flex-plugin
3.14.2
craco-config-flex-plugin
3.14.2
react
16.13.1
react-dom
16.13.1
react-scripts
3.4.1
node
12.18.3
npm
6.14.8
Steps to Reproduce
Create 2 tabs with different keys
flex.TaskCanvasTabs.Content.add(
); flex.TaskCanvasTabs.Content.add(
);
both tabs are render with the same key
Expected Behavior
Expected task canvas tabs to have unique keys in order to avoid collisions with components with the same key.
Screenshots
Additional Context
Using React 16.13.1 https://www.twilio.com/docs/flex/plugins/react-versions