feat(ui5-input-table-suggest): introduce new InputTableSuggest component - #13678
feat(ui5-input-table-suggest): introduce new InputTableSuggest component#13678ndeshev wants to merge 41 commits into
Conversation
…onent (draft) poc
This POC uses ui5-table rendering instead of a native one JIRA: BGSOFUIRILA-4203 related to #13666
|
🚀 Deployed on https://pr-13678--ui5-webcomponents-preview.netlify.app |
major refactoring and improvements, added tests
minor fixes, value state functionality implementation
ndeshev
changed the title
add playground samples
fix table scrolling
fix showSuggestions property behavior
|
The input border disappears once the focus goes to table row but the mouse hovers the input field 
|
|
Announcing the selected row differs from OpenUI5 table suggestions. In the other application when going through the items, first the number of the row is announced with some other information. After the value column is announced, the rest of the columns and their values for the selected row are also announced. |
|
Highlighting of the input text is trimming spaces. The original text in the second column is "Widget Alpha" but when bolded it is "WidgetAlpha": 
|
remove compact class from the html page
refactor ui-input to ui5-input-field and ui5-input for list suggestions functionality, ui5-input-table-suggest now extends ui5-input-field to avoid inheriting redundant logic
fbd4d49 to
366d4a4
Compare
…ent- #13678 lint and test fixes
apply code review feedback
GitHub Actions
Failure
GitHub Actions
Failure
fix template errors
GitHub Actions
Inactive
…ent- #13678 fix template inheritance and css structure and imports
| @@ -0,0 +1,69 @@ | |||
| :host([focused]:not([_row-focused])) .ui5-input-focusable-element::after { | |||
| content: var(--ui5_input_focus_pseudo_element_content); | |||
There was a problem hiding this comment.
that variable as well as many others are defines in Input-parameters. css which is not correct. As a next step we have to properly define all the variables and parameters
| * @public | ||
| */ | ||
| @property({ type: Boolean }) | ||
| open = false; |
There was a problem hiding this comment.
Currently, when a character is typed in the input field, the suggestion picker is open, no matter whether that character matches a suggestion or not. In UI5 as well as in list suggestions case, the picker is open only when the value matches a suggestion
| } | ||
|
|
||
| _afterClosePicker() { | ||
| this.fireDecoratorEvent("close"); |
There was a problem hiding this comment.
When value is deleted (empty) the picker remains open which is not the case with list suggestions and tabular suggestions in UI5
niyap
left a comment
niyap
left a comment
There was a problem hiding this comment.
- If you type something and move the focus in the suggestions list, then continue typing something -> the visual focus remains over the suggestion where it is expected to be in the input field
- I think that it will be nice to adjust one of the samples for the playground to be easier to hit the popin mode.
| const input = document.getElementById("employee-input"); | ||
|
|
||
| function updateSuggestions(filterValue) { | ||
| while (input.querySelector("[slot='suggestionRows']")) { |
There was a problem hiding this comment.
Isn't it better to query the DOM just once, something like:
input.querySelectorAll("[slot='suggestionRows']").forEach(el => el.remove());
| </div> | ||
|
|
||
| <div class="section"> | ||
| <ui5-title class="section-title" level="H2">Popin Overflow Mode (Default)</ui5-title> |
There was a problem hiding this comment.
You can remove "Default" as it is the only currently supported mode
| </p> | ||
|
|
||
| <div style="display: flex; flex-direction: column; gap: 1rem;"> | ||
| <ui5-input-table-suggest |
There was a problem hiding this comment.
add show-suggestion as they are currently defined but not show. The same is valid for the other value states in that sample as well
| <ui5-input-table-suggest | ||
| id="informationMessage" | ||
| placeholder="Information with message..." | ||
| value-state="Information" |
There was a problem hiding this comment.
again show-suggestions is missed
| <ui5-input-table-suggest | ||
| id="formattedNegative" | ||
| placeholder="Error with formatted message..." | ||
| value-state="Negative" |
| <ui5-input-table-suggest | ||
| id="formattedCritical" | ||
| placeholder="Warning with formatted message..." | ||
| value-state="Critical" |
3 participants
JIRA: BGSOFUIRILA-4203
Related to #13666
Overview
This branch introduces a significant refactoring of the
ui5-inputcomponent architecture by extracting a base class (InputField) and creating a newInputTableSuggestcomponentfor tabular suggestions.
Architecture Changes
Before:
ui5-input (All functionality mixed)
After:
InputField (Core input functionality) ← New private base class
├── ui5-input (List-based suggestions)
└── ui5-input-table-suggest (Table suggestions)
New Files
InputField.ts- Private base class with core input functionalityInputFieldTemplate.tsx- Base template with hook system for extensibilityInputField.css- Base styles extracted from Input.cssInputTableSuggest.ts- New component for tabular suggestionsInputTableSuggestTemplate.tsx- Template for tabular suggestions popoverInputTableSuggestPopoverTemplate.tsx- Popover template with Table componentInputField (Base Class)
Contains all non-suggestion-related functionality:
value,placeholder,disabled,readonly,required,type,valueState,maxlength,showClearIcon, accessibility propertiesicon,valueStateMessagechange,input,selectui5-input (Extends InputField)
Adds list-based suggestions:
showSuggestions,highlight,noTypeahead,filtersuggestionItems(SuggestionItem/SuggestionItemGroup)selection-change,type-ahead,suggestion-scroll,open,closeInputSuggestionsfeature for suggestion handlingui5-input-table-suggest (Extends InputField) - NEW
Adds tabular suggestions (like SAPUI5's sap.m.Input with tabular suggestions):
showSuggestions,noTypeahead,opensuggestionColumns(TableHeaderCell),suggestionRows(TableRow)selection-change,type-ahead,open,closeKey Design Decisions
ui5-inputuses List,InputTableSuggestuses TableInputField.stylesarrayMigration Impact
ui5-inputconsumersui5-input-table-suggestcomponent available for tabular suggestion use cases