feat(ui5-input-table-suggest): introduce new InputTableSuggest component - #13678
feat(ui5-input-table-suggest): introduce new InputTableSuggest component#13678ndeshev wants to merge 34 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. |
| {processedRow.cells.map((cell, cellIndex) => ( | ||
| <TableCell | ||
| key={`cell-${rowIndex}-${cellIndex}`} | ||
| dangerouslySetInnerHTML={{ __html: cell.highlightedMarkup }} |
There was a problem hiding this comment.
I can set a script for the table cell like this: <ui5-table-cell><script>alert("aaaaaaaa");</script></ui5-table-cell> and the script will be executed on page load. Also I am not able to select this row from the suggestions by pressing "Enter" - nothing happens.
There was a problem hiding this comment.
This is NOT a vulnerability in the component by itself. The script executes because it's part of the original declarative HTML in the document. When the browser parses <ui5-table-cell><script>alert("XSS");</script></ui5-table-cell> the <script> tag is executed immediately by the browser's HTML parser - this happens before any JavaScript framework code runs. This is standard browser behavior.
If an application allows users to input arbitrary HTML into suggestion rows (e.g., from a database or API), it should sanitize that data before inserting it into the DOM, not rely on the highlighting mechanism or front-end sanitization of any kind. The script executes at HTML parse time, before any sanitization in JavaScript can run.
|
Highlighting of the input text is trimming spaces. The original text in the second column is "Widget Alpha" but when bolded it is "WidgetAlpha": 
|
| id="scrollSearch" | ||
| placeholder="Search with scroll..." | ||
| show-suggestions | ||
| overflow-mode="Scroll" |
There was a problem hiding this comment.
When overflow-mode="Scroll" on mobile devices there is horizontal scroll in the table which I don't think is by spec
There was a problem hiding this comment.
This is the idea of the overflowMode="Scroll" property of the ui5-table
As for our specs - we do not have it specified to not have a horizontal scroll.
| </div> | ||
|
|
||
| <!-- Example 6: Value States --> | ||
| <div class="section"> |
There was a problem hiding this comment.
The value state samples are broken - no table suggestions are shown. If I set a value state to the first table input sample - it works.
Also pressing Ctrl + Alt + F8 focuses an ui5-link in the value state message popup, but once the link is focused - pressing TAB does nothing and the focus remains trapped in the value state popup. For value state header it works
There was a problem hiding this comment.
It is not broken, there are no examples with value state and showSuggestions property set to true, I will add such.
I fixed the link tab navigation.
Fixed |
👋 Heads-up: dev close is in effectThanks for the contribution! This repository is currently in dev close ahead of release This PR appears to introduce public-API changes (detected by diffing the Custom Elements Manifest against the latest published version on npm):
Could you please hold off on merging into If this change must ship in the current release, please request a review from one or two members of @UI5/ui5-team-webc so the team can sign off explicitly.
Posted automatically by the Dev Close Notice workflow. |
rename the component
ndeshev
changed the title
372efd9 to
4f793f9
Compare
fix cypress test file name
0859076 to
f30f39e
Compare
fix selected and focus suggestion row styles
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
2 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