nikoletavnv
commented
3 weeks ago I found an issue with tokens in ui5-multiinput on mobile devices. When a user click on the input field, a dialog with suggestions is opened. The user writes something in the dialog input but after that he/she cancels the change by closing the dialog with the "x" button. Even then a change event is fired and the input field value is changed (not discarded). Tokens are created because the test page is listening for the change event and creates tokens. This issue is caused because we are using ui5-input inside the dialog and it calls the same methods to handle change, handle input and focus out (clicking the dialog "x" button). I think we need to majorly refactor the ui5-input component.
https://sap.github.io/ui5-webcomponents/nightly/packages/main/test/pages/MultiInput.html - sample "Tokens + Suggestions"
Bug Description
1. Focus is moved to the next token even when it is not actually deleted
https://sap.github.io/ui5-webcomponents/nightly/packages/main/test/pages/MultiInput.html
When no logic for deleting tokens is provided, when a user clicks on the X icon of a token in order to delete it, the focus goes to the next item, which is strange.
2. Additional empty token is created (MOBILE EMULATOR)
https://sap.github.io/ui5-webcomponents/nightly/packages/main/test/pages/MultiInput.html - sample "Tokens + Suggestions" - click on the input. Dialog is opened. Start typing "A" - the word "Aute" will be typed ahead. Then select "Aute" directly from the suggestions list. The dialog closes and 2 tokens are created - "Aute" and a token with no text in it. This is the only case an empty token is added to the input. I tried to confirm the typed ahead value by pressing the "OK" button - works fine. I tried to directly select the suggestion "Aute" without writing in the input - also works fine.
3. Canceling token creation still creates the tokens (MOBILE EMULATOR)
https://sap.github.io/ui5-webcomponents/nightly/packages/main/test/pages/MultiInput_Suggestions.html - sample "Token Creation on enter or focus out". Start typing text in the input, a dialog is opened. Click on the "x" button to cancel the operation and close the dialog - token is created despite canceling the operation. The same with "Token Creation onChange (unique)" sample
Affected Component
ui5-multi-input
Expected Behaviour
No response
Isolated Example
No response
Steps to Reproduce
1. 2. 3. ...
Log Output, Stack Trace or Screenshots
No response
Priority
Low
UI5 Web Components Version
2.0.1
Browser
Chrome
Operating System
Windows
Additional Context
No response
Organization
No response
Declaration