Tabs onActive callback called twice for each action

If you go to online playground https://operational-ui.netlify.com/#/Components/Tabs and change code like this:

- <Tabs tabs={tabs} active={active} onActivate={setActive} onClose={onClose} onInsert={onInsert}>
+ <Tabs tabs={tabs} active={active} onActivate={(x) => { console.log(`onActivate ${x}`); setActive(x);} } onClose={onClose} onInsert={onInsert}>

And then click any tab you will see it is called twice

[kazionovm]

@stereobooster I’ll try it now 😃

[stereobooster]

My guess the issue is here

              <TabHeader
                center={!scroll}
                tabIndex={i === active ? 0 : -1}
                first={i === 0}
                aria-selected={i === active}
                aria-controls={`TabPanel-${uid}-${i}`}
                id={`TabHeader-${uid}-${i}`}
                key={i}
                onClick={onClick}
-                onFocus={onClick}
                ref={i === active ? activeTab : undefined}
              >

We don’t need to track focus at all. We only need to react on keyboard and clicks