Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Drag Tabs with close button issue on windows #147

Open
MukeshNegi-brillmark opened this issue Mar 3, 2020 · 2 comments
Open

Drag Tabs with close button issue on windows #147

MukeshNegi-brillmark opened this issue Mar 3, 2020 · 2 comments

Comments

@MukeshNegi-brillmark
Copy link

MukeshNegi-brillmark commented Mar 3, 2020

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 onwindowsthe 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>, );

@willvoicebase
Copy link

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.

@chriskonopka
Copy link

chriskonopka commented Apr 16, 2021

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants