Tab Header click event

[Gareth]

Hi,

Is there any way to access a click event on the tab header?  I realise that there are the 'selected' and 'selecting' events but these only fire when a tab selection is changed.  I'd like to detect multiple click events in a row on the same tab header (e.g. if I click a tab header 5 times in a row, I'd like to be able to detect all of 5 these clicks)

Thanks,

Gareth

[Satheesh Kumar Balasubramanian]

Hi Gareth, 

  

Greetings from Syncfusion Support..! 

  

We have validated your reported query at our end and achieved your requirement by adding click event listener to tab header in tab created event. We have prepared a sample for your reference, which can be viewed from the following link. 

  

Sample: https://stackblitz.com/edit/tab-header-click?file=index.js 

  

Code Snippet:  

    return ( 

      <div className="control-pane"> 

        <div className="control-section tab-control-section"> 

          <TabComponent 

            heightAdjustMode="Auto" 

            id="defaultTab" 

            ref={tab => (this.tabInstance = tab)} 

            created={this.tabCreated.bind(this)} 

          > 

            <TabItemsDirective> 

              <TabItemDirective header={headertext[0]} content={tabContent1} /> 

  

              <TabItemDirective header={headertext[1]} content={tabContent2} /> 

  

              <TabItemDirective header={headertext[2]} content={tabContent3} /> 

            </TabItemsDirective> 

          </TabComponent> 

        </div> 

      </div> 

    ); 

  

  tabCreated() { 

    var tab = document.querySelector("#defaultTab .e-tab-header"); 

    tab.addEventListener("click", this.onClick.bind(this)); 

  } 

  onClick(event) { 

    console.log(event); 

  } 

  

Kindly try the above sample and get back to us, if you need further assistance.   

    

Regards,    

Satheesh Kumar B  

[Gareth]

Hi thanks for this solution.  It initially worked for me but now I notice that when the tab is refreshed the click listener is not recreated. Is this a bug or is there some other way?

Steps to reproduce in following example: https://stackblitz.com/edit/tab-header-click-pfzhkq?file=index.js

1. Click on the tab headers and the click event is detected in the console

2.  Refresh the tab by clicking on the 'refresh tab' button

3.  Now try clicking on the tab headers as in step 1 - the click event is lost

It seams that the 'created' prop is not running when the tab is refreshed.  Is this normal - is there any way to ensure that the click event is maintained after a tab refresh?

Thanks,

Gareth

[Satheesh Kumar Balasubramanian]

Hi Gareth, 

  

Thanks for your update. 

  

We have validated your reported query "Created event is not triggered when the tab is refreshed" at our end and let you know that this is not a bug, which is the default behavior of tab component. Alternatively we suggest you to add click event listener after tab refresh method is called. 

  

Sample: https://stackblitz.com/edit/tab-header-click-n4z7ba?file=index.js 

  

index.js:    

        <button 

          onClick={() => { 

            this.tabInstance.refresh(); 

            var tab = document.querySelector("#defaultTab .e-tab-header"); 

            tab.addEventListener("click", this.onClick.bind(this)); 

          }} 

        > 

          refresh tab 

        </button> 

  

Kindly try the above solution and get back to us, if you need further assistance. 

  

Regards, 

Satheesh Kumar B 

[Yogesh Patil]

Hello Syncfusion,

Can we get name of the Tab onClick() event.

Thanks

Yogesh

[Ravikumar Venkatesan]

Yogesh, You can get the clicked tab name with the help of the code highlighted in the below code snippet.

Sample: https://stackblitz.com/edit/ej2-react-tab-get-clicked-tab-header-name-sample?file=index.js

[index.js]

  onClick(event) {

    if (event) {

      var target = event.target.closest('.e-toolbar-item');

      // Checking whether the clicked item is a tab header item or not

      if (target) {

        // If the clicked item is a tab header getting the name using the innerText property

        alert(target.innerText);

      }

    }

  }