fix(ui5-multi-combobox): fix long token deletion

[ndeshev]

fixes: #12423

[ui5-webcomponents-bot]

🧹 Preview deployment cleaned up: https://pr-12514--ui5-webcomponents.netlify.app

[nikoletavnv]

The fix works, but there is a different focus behavior depending on the order of the short and long token. You can try with the following code and observe that after deleting the "short" token, the focus goes to:

• the long token in sample 1
• goes out of the input in sample 2

// sample 1: 
<ui5-multi-input id="multi-input" style="width:210px">
  <ui5-token slot="tokens" text="Something very long here"></ui5-token>
  <ui5-token slot="tokens" text="Short"></ui5-token>
</ui5-multi-input>

// sample 2: 
<ui5-multi-input id="multi-input2" style="width:210px">
  <ui5-token slot="tokens" text="Short"></ui5-token>
  <ui5-token slot="tokens" text="Something very long here"></ui5-token>
</ui5-multi-input>

<script>
	const deleteToken = function (event) {
  const tokens = event.detail?.tokens;

  if (tokens) {
    tokens.forEach((token) => token.remove());
  }
};

document
  .getElementById('multi-input')
  .addEventListener('token-delete', deleteToken);

document
  .getElementById('multi-input2')
  .addEventListener('token-delete', deleteToken);
</script>

[ndeshev]

The strange focus management implementation of the ui5-multi-input where the app is handling the token deletion is out of the scope of the issue.