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>, );
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 on
windowstheexampleto does not work properly but inmacit works.https://ctxhou.github.io/react-tabtab/#complicatedHere 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>, );