Autocomplete.Overlay issue with TextInputWithTokens

[72lions]

Description

I'm using two Autocomplete components with the<Input as={TextInputWithTokens}/> one below the other. When there are any tokens in any of the inputs, then the Xs on each token slip through the overlay of the other Autocomplete

Steps to reproduce

• Create two Autocomplete components
• Make sure that both have <Input as={TextInputWithTokens}/>
• Place them in a way that when the autocomplete overlay opens will overlap with the other Autocomplete component

Version

35.14.2

Browser

Chrome

[72lions]

I've confirmed that the problem is that the RemoveTokenButton style has z-index:1. When I remove it then there is no overlap problem anymore.

The code that adds the `z-index`` is located here:

react/src/Token/Token.tsx

Lines 95 to 109 in 0468315

	<RemoveTokenButton
	borderOffset={tokenBorderWidthPx}
	onClick={onRemoveClick}
	size={size}
	isParentInteractive={isTokenInteractive(props)}
	aria-hidden={hasMultipleActionTargets ? 'true' : 'false'}
	sx={
	hasMultipleActionTargets
	? {
	position: 'relative',
	zIndex: '1'
	}
	: {}
	}
	/>

Any reason why there is a need for a z-index when hasMultipleActionTargets equals true?

[mperrotti]

Sorry about changing the assignees. I needed to record my screen to demo selection behavior for something unrelated.

[mperrotti]

I tested this in Storybook and could not reproduce the problem.

However it looks like that zIndex isn't actually doing anything, so I'm just going to remove it.