Content
View differences
Updated by Bruno Pagno over 1 year ago
TODO:
* allow free text input
* allow attribute input from dropdown
* introduce first attributes (e.g. author)
* ⚠️ keep in mind that insertion into the pattern is cursor position dependent
Important
* if this one exceed drastically any pragmatic time box, escalation is NEEDED
<br>
### Implemented behaviour
* The field should behave similar to a normal input field, no new lines should be allowed
* Typing any character will get the "current word" and try to show an autocomplete for it
* If there are matches, they will be displayed in an autocomplete box underneath the input field
* If there are no matches the autocomplete is hidden
* Accepting an autocomplete will **replace the current word** and insert a token in it's place
* Pressing the ARROW DOWN while the autocomplete is open will move the focus to the autocomplete and allow the user to navigate UP & DOWN the autocomplete options
* Pressing ENTER while a item is selected should insert the token with the same replacement behaviour described above
* Pressing escape, or moving the cursor, should hide the autocomplete
* Unfocusing the input **does not hide the autocomplete**. This happens because we need to use "focus" to select the autocomplete items
* It's possible to change a token value. If they become an "invalid" value they will become styled differently
* The form currently allows saving invalid tokens. This is not in scope of the component
* allow free text input
* allow attribute input from dropdown
* introduce first attributes (e.g. author)
* ⚠️ keep in mind that insertion into the pattern is cursor position dependent
Important
* if this one exceed drastically any pragmatic time box, escalation is NEEDED
<br>
### Implemented behaviour
* The field should behave similar to a normal input field, no new lines should be allowed
* Typing any character will get the "current word" and try to show an autocomplete for it
* If there are matches, they will be displayed in an autocomplete box underneath the input field
* If there are no matches the autocomplete is hidden
* Accepting an autocomplete will **replace the current word** and insert a token in it's place
* Pressing the ARROW DOWN while the autocomplete is open will move the focus to the autocomplete and allow the user to navigate UP & DOWN the autocomplete options
* Pressing ENTER while a item is selected should insert the token with the same replacement behaviour described above
* Pressing escape, or moving the cursor, should hide the autocomplete
* Unfocusing the input **does not hide the autocomplete**. This happens because we need to use "focus" to select the autocomplete items
* It's possible to change a token value. If they become an "invalid" value they will become styled differently
* The form currently allows saving invalid tokens. This is not in scope of the component