FlatTable component with hasStickyHead set to true obscures tab focus border

[niamhmadden24]

Current behaviour

when selecting a tab the halo focus is missing at least one side.

Tab component and the FlatTable component with hasStickyHead set to true as this sets zIndex: "1005" on the table head. See here: https://github.com/Sage/carbon/blob/dcf5b83e50f8ad44685ee8efec69989d1133f8a4/src/components/flat-table/flat-table.spec.tsx#L177

Expected behaviour

halo focus should be visible.

CodeSandbox or Storybook URL

https://codesandbox.io/s/nifty-payne-4379cn?file=/src/App.js

JIRA Ticket (Sage Only)

No response

Suggested Solution

No response

Carbon Version

119.6.0

Design Tokens Version

No response

What browsers are you seeing the problem on?

Chrome

What Operating System are you seeing the problem on?

MacOS

Anything else we should know?

No response

Confidentiality

• [X] I confirm there is no confidential or commercially sensitive information included.

[robinzigmond]

FE-6052

[nicktitchmarsh]

If you need a temporary solution, you can wrap the FlatTable in a Box with 4px padding, this allows the focus border to be visible. Until we find a solution to this. https://codesandbox.io/s/nifty-payne-4379cn?file=/src/App.js