[Bug] Children with aria role="tab" cause parent tabs to reset #345

Activity

1. lauriejones commented on Nov 19, 2020

   

   lauriejones

   on Nov 19, 2020

   More actions

   We were having the exact same issue. Our accordion component when used within tabs would break as this package assumed all role="tab*" attributes were for it.

   A surprisingly small fix we were able to make was to add a data-tabs attribute to our Accordion component to make use of this functionality:

   react-tabs/src/components/UncontrolledTabs.js

   Lines 318 to 339 in a37ca85

   	/**
   	* Determine if a node from event.target is a Tab element for the current Tabs container.
   	* If the clicked element is not a Tab, it returns false.
   	* If it finds another Tabs container between the Tab and `this`, it returns false.
   	*/
   	isTabFromContainer(node) {
   	// return immediately if the clicked element is not a Tab.
   	if (!isTabNode(node)) {
   	return false;
   	}
   	// Check if the first occurrence of a Tabs container is `this` one.
   	let nodeAncestor = node.parentElement;
   	do {
   	if (nodeAncestor === this.node) return true;
   	if (nodeAncestor.getAttribute('data-tabs')) break;
   	nodeAncestor = nodeAncestor.parentElement;
   	} while (nodeAncestor);
   	return false;
   	}
2. SaayanBiswas98 commented on May 25, 2023

   

   SaayanBiswas98

   on May 25, 2023

   More actions

   
3. SaayanBiswas98 commented on May 25, 2023

   

   SaayanBiswas98

   on May 25, 2023

   More actions

   this will not reset the tabs