[MultiInput]: Performance issue with large number of Tokens

[AlekseiSch]

Bug Description

The MultiInput component becomes extremely slow and unresponsive when the number of tokens exceeds approximately 500.

Adding new tokens: There is a significant delay (several seconds) between typing/pasting and the token appearing in the input field. Deleting tokens: Removing tokens is very laggy. The UI does not respond.

Affected Component

MultiInput

Expected Behaviour

The MultiInput component should remain performant and responsive regardless of the number of tokens.

Isolated Example

No response

Steps to Reproduce

No response

Log Output, Stack Trace or Screenshots

https://ui5.github.io/webcomponents-react/v2/?path=/docs/inputs-multiinput--docs

Priority

None

UI5 Web Components Version

2.11.0

Browser

Chrome

Operating System

Windows

Additional Context

No response

Organization

No response

Declaration

• [x] I’m not disclosing any internal or sensitive information.

[dimovpetar]

Hello @UI5/ui5-team-ctr-ril ,

I could not find any performance notes or tokens limit guidelines in the documentation of ui5-multi-input. Simply create 1000 tokens and notice how slow the suggestions popover becomes.

https://ui5.github.io/webcomponents/play/#eNq9Vm1v2zgM_iuaPzldbWc4DBgSt3dtL90KrLgB6T4M8BfFYmxtsmRIdF5Q5L8fJTtttnVbkQFDAtgi-ZDiI5LyfSS1gE1aY6OiyX2keQPR5FB4GpVGI2gkcf4iSVir-LayptMiWRolWJKcFzp_8e9_V3efPsyYB3mBfzLFdXVWRKCLiGT9L6-BC1ox-ucOtwr84mSiDcYTAUupQYzYPcmEdD7YhGmjYUqCnceHCEG_NLYEkZRGGZtw8blz-JUty7O9_z8fLm8AOStrbh0gcfDx7jp5E2gYVJ5qkq8krFtjsYjYQDQJ11JgfSZgJUtIwuKUSS1RcpW4kis4e5WOB2cokWLOedMqyLN-RSxnA830ujBiy8LWyPWCl1-G4wuZTNiK2zhJHG8vH1RXXjOashpkVVOWf70et5vpEPCJIkhAD4XgDTr5Omk6hTKRuu2QSUFxDwSUKuFLqAkJlnRz5BYZblupK2Kh02i3gR-ydLVZJ66rKnAojXbn-wiPskQiNAxh46m7sBVxKDWn3ebZE4a_cnDZqYpbeTR-pisqe3Es_Frq34G_BdtwvT0W_q7TlPzR8Bvk6mjw-24DzcJ0tjrWwy1sZGmORX-opZIt1SC4Y13M1yDCsDsK_XF-8VOokCvmlPGmK646oLZBuAXneEWdcn5nvoBm0jGuLPX-liYGwxqYkg7zjMDBSfZNd_6opft2ppFZWtmG5vTTozGiU6EtbemXXOr0c09XbxhGjx84_ejJ9tfBT4dGtDvduzq4hPaSwxsoOzn0UksB7CQrtGz8CGVFlGYHate1Xhw2SDP6e2zYwVf4f4idbA2L0pBEU0xHxDnMbj1hN56vvbdfQsJxPNt6_nDeN3Tcz4YtgWNnwWVhb49O3N5DoYk8h6x5SICdMWHKriEnaQU4U-BfL7c3Iv5mSo-me3RJBYUQMrq2prmjeiU3y06XPhiLfQH3l6gCqpVQiAdhevgQiaL4EgxGfYwekNI9eYFo5aJDICPvs4hOQ3P82Mr3g7cie692g0cLRMsAofUuMPHctFMuxGxF2vdEMWiw8eA9EUD5gY_3mDt4y5B8gT1b_U6IgKBKBd32Uv2d9uKwkwLlklgLggFaYL9M6TNjxss6Hlg8H_K20JgVxCOfXoH0ubEbTfefVARhsWdeUtDxlB45ezUe-7eXL_tzeTz_lLct1f0VTTsRP3GwsQwxdtFu9z8s35rf

Best regards, Petar