How to enable children eventHandlers inside disabled tab?

[mossy steppe]

Hi, i want to make tab, which contain clickable button when it is in disabled state:

rightSectionContent = (
      <ActionIcon
        onClick={() => myEventHandler({ some, args })}
      >
        <IconRestore/>
      </ActionIcon>
    );
...
<Tabs.Tab
      key={'tabId' - InstitutionTab}
      value={'institution-' + institutionId}
      rightSection={rightSectionContent}
      disabled=true
    >
      My disabled tab with button
    </Tabs.Tab>
  )

however, when tab is in disabled state, it prevents ActionIcon from executing myEventHandler. Click event is firing(checked in devtools) but nothing happening.

How can I prevent disabled Tabs.Tab not allowing ActionIcon to work normally?
Or should i avoid using disabled prop and just apply custom "disabled-tab" CSS?

[final monolith]

Please send a sandbox with a reproduction, template – https://codesandbox.io/s/mantine-template-9ze89?file=/src/App.tsx

[mossy steppe]

https://codesandbox.io/s/ecstatic-worker-cg87rc?file=/src/App.tsx

[final monolith]

You cannot use buttons inside Tab left and right sections. Instead, render it with absolute position over the control.

https://codesandbox.io/s/infallible-wozniak-96s69j?file=/src/App.tsx

[mossy steppe]

Thank you that s working. How can i align button to the right edge of tab?

[final monolith]

Set right={0}

[mossy steppe]

Why text aligned right?

[mossy steppe]

Finally done for my project. Thanks for support!