Sometimes remove(close) button is not working

[starrybleu]

Hello,

I have tested remove(close) buttons on your demo site, https://ctxhou.github.io/react-tabtab/#add-close.

When I intentionally clicked remove buttons in tabs again and again, sometimes nothing happened.

That's it. Is there a possibility to fix it ?

[kapilpipaliya]

I have same problem. Please fix it.

[ctxhou]

@starrybleu could you provide your browser version? I tested it again and I didn't happen to me.

[starrybleu]

@ctxhou Hi, the version of my browser(Chrome) is 70.0.3538.77. OS is windows 10 (1803).
I wonder what your browser version is.
It is actually a little tricky to reproduce the issue, but after several tries, you can reproduce it.
I cannot specify the exact conditions to reproduce.

Thank you for trying to help me out.

[ctxhou]

I've also used Chrome. If you met the same bug next time, could you paste the error message in the console?

It would be easier for the community to find the bug : )
Thank you

[starrybleu]

Unfortunately, there was not any message or log in the console.

However, I attached an image how and what I did.

[starrybleu]

Any update on this? I guess this is related with stylesheet(css) that I’m not good at.

[kapilpipaliya]

sometimes I have to press too many times to close the tab. what i did is implement my own close button inside the tab.

[ctxhou]

@starrybleu If this error message only happened in the demo page, I think the chances are the race condition when using react setState.

react-tabtab/docs/components/Complicated.js

Lines 38 to 49 in c682e91

	handleEdit = ({type, index}) => {
	let {tabs, activeIndex} = this.state;
	if (type === 'delete') {
	tabs.splice(index, 1);
	}
	if (index - 1 >= 0) {
	activeIndex = index - 1;
	} else {
	activeIndex = 0;
	}
	this.setState({tabs, activeIndex});
	}

Based on your situation, you click the tab quickly, the race condition would happen. I will push and fix this demo bug.
Therefore I consider in your personal usage, if you use other way to handle the manipulation of the data, this bug should not happen, because the whole react-tabtab is API based, it never manipulate your data.

@kapilpipaliya So your problem is solved by implement your own close button?

[starrybleu]

Thank you for digging this problem. I found that closing action would happen when click close button quickly as you mentioned.
I also retrieve and manipulate my data from async API call.

Now, what I need is to implement debounce on click the close button before it turns out draggable context.

Thanks.

[kapilpipaliya]

My own close button solved the problem.
I tested on your demo site, sometimes drag and drop is not working.
https://i.imgur.com/MGhCziI.gif
see how many times i tried and only one time it worked.

[kapilpipaliya]

sometimes close button still not working on demo too.

[kapilpipaliya]

If I long press the close button, its not working, because close button goes down.

[starrybleu]

It seems that there's no choice any other than my own close button now. I'll try to make my own button. Thank you, @kapilpipaliya.

[kapilpipaliya]

I really dont know how to solve it. Please help me.

[starrybleu]

@kapilpipaliya My front-end co-developer made a workaround as below.

  componentDidUpdate() {
    [...document.getElementsByClassName('react-contextmenu-wrapper')].forEach((element) => {
      element.nextElementSibling.onmousedown = (e) => e.stopPropagation()
    })
  }

[willvoicebase]

I had this problem too. I fixed it by doing this:
1 - duplicate 2 files from the repo: DragTabList and SortMethod. I converted these files to standard components - they used this thing called 'flow' in their repo, I stripped it out.
2 - install 'react-sortable-hoc' in my repo
3 - I changed 'pressDelay' in DragTabList to '200' instead of '100' - this is actually the whole problem. For some reason, 100 was being completely ignored, but 200 does the trick. Here are the contents of the files:

DragTabList:

import React from 'react';
import SortMethod from './SortMethod';
import {SortableContainer} from 'react-sortable-hoc';
import { TabList } from 'react-tabtab';

const DragTabContainer = SortableContainer(({children, ...props}) => {
  return (
    <TabList {...props}>
      {children}
    </TabList>
  );
});

export default class DragTabList extends SortMethod {
  render() {
    const {children, ...props} = this.props;
    return (
      <DragTabContainer onSortEnd={this.onSortEnd}
                        axis='x'
                        lockAxis='x'
                        // if no pressDelay, close button cannot be triggered,
                        // because it would always treat click as dnd action
                        pressDelay={200}
                        {...props}>
        {children}
      </DragTabContainer>
    );
  }
}

DragTabList.displayName = 'DragTabList';

SortMethod:

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';

class SortMethod extends PureComponent {
  constructor(props) {
    super(props);
    this.onSortEnd = this.onSortEnd.bind(this);
  }

  onSortEnd({oldIndex, newIndex}) {
    const {activeIndex, handleTabChange, handleTabSequence} = this.props;
    if (oldIndex === newIndex) {
      if (activeIndex !== oldIndex) {
        handleTabChange(oldIndex);
      }
    } else {
      handleTabSequence({oldIndex, newIndex});
    }
  }
}

SortMethod.propTypes = {
  handleTabChange: PropTypes.func,
  handleTabSequence: PropTypes.func,
  activeIndex: PropTypes.number,
};

export default SortMethod;