Drag Tabs with close button issue on windows
Opened this issue · 2 comments
I want a dot like option inside my each draggable tab so i passed it as an children to drag <DragTab>
with dots on click of which I want to show a popover which shows an option of renaming and deleting that tab. But when I click the dots popover open but at the same time tab becomes draggable which I don't want when I click the dots.
I have tried mouse down up click but nothing works properly and onwindows
the example
to does not work properly but in mac
it works.
https://ctxhou.github.io/react-tabtab/#complicated
Here is my code:
tabsTemplate.push( <DragTab key={index}> {tab.title} <span className="dots" onMouseDown={e => this.handleJourneyOptions(e)}>...</span> {showOption ? <Popover open={showJourneyOptions} onClose={this.handleJourneyOptionsClose} anchorEl={journeyHeaderEl} anchorOrigin={{ vertical: 'center', horizontal: 'center', }} transformOrigin={{ vertical: 'top', horizontal: 'center', }} > <JourneyOptions> <span>Rename journey</span> <span className="deleteJourney" onClick={() => this.handleDeleteJourney({type: 'delete', index: index})} >Delete journey</span> </JourneyOptions> </Popover> : null} </DragTab>, );
I'm guessing my fix for this issue will also fix your issue:
#116
Bottom line, the draggable event needs to be delayed enough so you can click something inside the tab.
@willvoicebase I'm was using your exact custom files workaround for my app but now am running into an issue where
import { TabList } from 'react-tabtab' and then using tabList component
causes the following error TypeError: Cannot read property 'remove' of undefined
with this stack trace
react_devtools_backend.js:2556 TypeError: Cannot read property 'remove' of undefined
at _class.removeDraggable (index.js?c1a6:113)
at _class.componentWillUnmount (index.js?c1a6:94)
at callComponentWillUnmountWithTimer (VM177781 react-dom.development.js:19580)
at HTMLUnknownElement.callCallback (VM177781 react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (VM177781 react-dom.development.js:237)
at invokeGuardedCallback (VM177781 react-dom.development.js:292)
at safelyCallComponentWillUnmount (VM177781 react-dom.development.js:19587)
at commitUnmount (VM177781 react-dom.development.js:20109)
at commitNestedUnmounts (VM177781 react-dom.development.js:20163)
at unmountHostComponents (VM177781 react-dom.development.js:20443) "
I was wondering if you have encountered this problem yourself and if you know a solution since this removes the ability to have a custom workaround delay