feat(ui5-input-table-suggest): introduce new InputTableSuggest component by ndeshev · Pull Request #13678 · UI5/webcomponents

ndeshev · 2026-06-11T08:10:08Z

JIRA: BGSOFUIRILA-4203

Related to #13666

Summary

Introduces ui5-input-table-suggest, a new experimental input component that displays suggestions in a tabular format with
multiple columns. This is the UI5 Web Components equivalent of OpenUI5's sap.m.Input with tabular suggestions.

Key Features

Multi-column suggestions - Display rich suggestion data in a table format via suggestionColumns (headers) and
suggestionRows (data) slots
Text highlighting - Automatically highlights matching text in suggestion cells based on user input
Typeahead/Autocomplete - Matches against the first column of suggestion rows
Keyboard navigation - Full arrow key navigation with [Up]/[Down] to navigate rows, [Enter] to select, [Escape] to
close
Responsive popin mode - Columns automatically collapse on smaller screens using Table's built-in popin behavior
Value state support - Supports all input value states (Negative, Critical, Positive, Information)
Screen reader support - Announces row position and column values during keyboard navigation
Mobile support - Full-screen popover experience on phones with dedicated OK/Cancel buttons

Usage

<ui5-input-table-suggest placeholder="Search..." show-suggestions>
    <ui5-table-header-cell slot="suggestionColumns" width="120px">Product ID</ui5-table-header-cell>
    <ui5-table-header-cell slot="suggestionColumns" width="200px">Name</ui5-table-header-cell>

    <ui5-table-row slot="suggestionRows">
        <ui5-table-cell>PRD-001</ui5-table-cell>
        <ui5-table-cell>Laptop Pro 15</ui5-table-cell>
    </ui5-table-row>
</ui5-input-table-suggest>


API

Slots

┌───────────────────┬─────────────────────────────────────┐
│       Name        │             Description             │
├───────────────────┼─────────────────────────────────────┤
│ suggestionColumns │ Table header cells defining columns │
├───────────────────┼─────────────────────────────────────┤
│ suggestionRows    │ Table rows with cell children       │
└───────────────────┴─────────────────────────────────────┘

Events

┌──────────────────┬───────────────────────────────┐
│       Name       │          Description          │
├──────────────────┼───────────────────────────────┤
│ selection-change │ Fired when a row is selected  │
├──────────────────┼───────────────────────────────┤
│ change           │ Fired when a row is confirmed │
└──────────────────┴───────────────────────────────┘
Architecture

- Extends Input component and reuses its template infrastructure
- Leverages existing Table, TableRow, TableCell, and TableHeaderCell components for rendering
- Custom filtering is application-controlled

…onent (draft) poc

This POC uses ui5-table rendering instead of a native one JIRA: BGSOFUIRILA-4203 related to #13666

sap-ui5-webcomponents-release · 2026-06-11T08:17:50Z

🚀 Deployed on https://pr-13678--ui5-webcomponents-preview.netlify.app

major refactoring and improvements, added tests

minor fixes, value state functionality implementation

lint

remove redundant comments

add playground samples

add mdx file

fix table scrolling

fix showSuggestions property behavior

nikoletavnv · 2026-07-16T13:53:01Z

The input border disappears once the focus goes to table row but the mouse hovers the input field

nikoletavnv · 2026-07-16T13:59:55Z

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.
At the moment in this PR - only the selected value is announced without extra columns information

nikoletavnv · 2026-07-16T12:54:12Z

+						{processedRow.cells.map((cell, cellIndex) => (
+							<TableCell
+								key={`cell-${rowIndex}-${cellIndex}`}
+								dangerouslySetInnerHTML={{ __html: cell.highlightedMarkup }}


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.

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.

nikoletavnv · 2026-07-17T10:03:51Z

Highlighting of the input text is trimming spaces. The original text in the second column is "Widget Alpha" but when bolded it is "WidgetAlpha":

nikoletavnv · 2026-07-17T10:00:24Z

+				id="scrollSearch"
+				placeholder="Search with scroll..."
+				show-suggestions
+				overflow-mode="Scroll"


When overflow-mode="Scroll" on mobile devices there is horizontal scroll in the table which I don't think is by spec

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.

nikoletavnv · 2026-07-17T11:03:31Z

+	</div>
+
+	<!-- Example 6: Value States -->
+	<div class="section">


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

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.

ndeshev · 2026-07-21T10:47:06Z

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. At the moment in this PR - only the selected value is announced without extra columns information

Fixed.

fix value state links tab navigation

lint

nikoletavnv · 2026-07-21T12:44:35Z

There is a shadow in the input when the focus goes to a table row.

Also, hovering on the input now displays a border around the input but it is a wrong color - it should be blue

When table is rendered in the popover, the table header top border and last row bottom border are applied next to the popover border and the top and bottom popover border looks thicker

adjust old samples, add new ones, make overflowMode private property, fix the styling comments from the code review

…P/ui5-webcomponents into input-tabular-suggestions-alt

remove redundant tests

ndeshev · 2026-07-21T17:45:13Z

There is a shadow in the input when the focus goes to a table row.

Also, hovering on the input now displays a border around the input but it is a wrong color - it should be blue

When table is rendered in the popover, the table header top border and last row bottom border are applied next to the popover border and the top and bottom popover border looks thicker

Fixed

github-actions · 2026-07-23T13:06:11Z

👋 Heads-up: dev close is in effect

Thanks for the contribution! This repository is currently in dev close ahead of release 2.25 (scheduled 2026-07-29, UTC). See the release schedule for the full timeline.

This PR appears to introduce public-API changes (detected by diffing the Custom Elements Manifest against the latest published version on npm):

@ui5/webcomponents

➕ added interface: ITabularSuggestionRow
➕ added element: TabularInput
➕ added property: accessibleDescription
➕ added property: accessibleDescriptionRef
➕ added property: accessibleName
➕ added property: accessibleNameRef
➕ added property: disabled
➕ added property: filter
➕ added property: maxlength
➕ added property: name
➕ added property: noTypeahead
➕ added property: open
➕ added property: placeholder
➕ added property: readonly
➕ added property: required
➕ added property: showClearIcon
➕ added property: showSuggestions
➕ added property: type
➕ added property: value
➕ added property: valueState
➕ added event: change
➕ added event: close
➕ added event: input
➕ added event: open
➕ added event: select
➕ added event: selection-change
➕ added slot: default
➕ added slot: icon
➕ added slot: suggestionColumns
➕ added slot: suggestionRows
➕ added slot: valueStateMessage
➕ added CSS part: clear-icon
➕ added CSS part: input
➕ added CSS part: root
➕ added attribute: accessible-description
➕ added attribute: accessible-description-ref
➕ added attribute: accessible-name
➕ added attribute: accessible-name-ref
➕ added attribute: disabled
➕ added attribute: filter
➕ added attribute: maxlength
➕ added attribute: name
➕ added attribute: no-typeahead
➕ added attribute: open
➕ added attribute: placeholder
➕ added attribute: readonly
➕ added attribute: required
➕ added attribute: show-clear-icon
➕ added attribute: show-suggestions
➕ added attribute: type
➕ added attribute: value
➕ added attribute: value-state

Could you please hold off on merging into main until the release ships? Public-API changes are best landed in the next dev cycle so they don't slip into the release at the last minute. Once the release is out, this PR is good to go.

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.

💬 False positive? If you believe this PR doesn't actually change the public API (e.g. only internal refactoring, or an entry the detector mis-attributed), please reply on this thread — your feedback helps us improve the detection during this trial run.

Posted automatically by the Dev Close Notice workflow.

rename the component

fix cypress test file name

ndeshev added 2 commits June 10, 2026 08:46

feat(ui5-tabular-input): introduce new tabular suggestions input comp…

3fb84a1

…onent (draft) poc

feat(ui5-tabular-input): introduce new tabular suggestions input (wip)

ecf1443

This POC uses ui5-table rendering instead of a native one JIRA: BGSOFUIRILA-4203 related to #13666

ndeshev temporarily deployed to netlify-preview June 11, 2026 08:10 — with GitHub Actions Inactive

feat(ui5-tabular-input): introduce new tabular suggestions input (wip)

f416819

major refactoring and improvements, added tests

ndeshev temporarily deployed to netlify-preview July 8, 2026 14:12 — with GitHub Actions Inactive

feat(ui5-tabular-input): introduce new tabular suggestions input

a573e4d

minor fixes, value state functionality implementation

ndeshev temporarily deployed to netlify-preview July 10, 2026 14:22 — with GitHub Actions Inactive

feat(ui5-tabular-input): introduce new tabular suggestions input

c71d97f

lint

ndeshev temporarily deployed to netlify-preview July 13, 2026 07:19 — with GitHub Actions Inactive

ndeshev changed the title ~~feat(ui5-tabular-input): introduce new tabular suggestions input (wip)~~ feat(ui5-tabular-input): introduce new tabular suggestions input Jul 13, 2026

ndeshev marked this pull request as ready for review July 13, 2026 07:20

ndeshev added 2 commits July 13, 2026 10:22

Merge branch 'main' into input-tabular-suggestions-alt

74fe067

feat(ui5-tabular-input): introduce new tabular suggestions input

6015fa5

remove redundant comments

ndeshev temporarily deployed to netlify-preview July 13, 2026 10:06 — with GitHub Actions Inactive

ndeshev mentioned this pull request Jul 13, 2026

feat(ui5-tabular-input): introduce new tabular suggestions input (wip) #13666

Closed

feat(ui5-tabular-input): introduce new tabular suggestions input

e11f787

add playground samples

ndeshev temporarily deployed to netlify-preview July 14, 2026 05:37 — with GitHub Actions Inactive

feat(ui5-tabular-input): introduce new tabular suggestions input

c6942c2

add mdx file

ndeshev temporarily deployed to netlify-preview July 14, 2026 06:15 — with GitHub Actions Inactive

feat(ui5-tabular-input): introduce new tabular suggestions input

98f06c2

fix table scrolling

ndeshev temporarily deployed to netlify-preview July 14, 2026 11:56 — with GitHub Actions Inactive

feat(ui5-tabular-input): introduce new tabular suggestions input

0158912

fix showSuggestions property behavior

ndeshev temporarily deployed to netlify-preview July 15, 2026 12:42 — with GitHub Actions Inactive

nikoletavnv self-requested a review July 16, 2026 09:19

nikoletavnv requested changes Jul 16, 2026

View reviewed changes

nikoletavnv reviewed Jul 17, 2026

View reviewed changes

feat(ui5-tabular-input): introduce new tabular suggestions input

c2095db

fix value state links tab navigation

ndeshev temporarily deployed to netlify-preview July 21, 2026 11:08 — with GitHub Actions Inactive

feat(ui5-tabular-input): introduce new tabular suggestions input

a52ffd3

lint

ndeshev temporarily deployed to netlify-preview July 21, 2026 11:46 — with GitHub Actions Inactive

Merge branch 'main' into input-tabular-suggestions-alt

73b791d

ndeshev temporarily deployed to netlify-preview July 21, 2026 11:46 — with GitHub Actions Inactive

ndeshev added 2 commits July 21, 2026 17:35

feat(ui5-tabular-input): introduce new tabular suggestions input

c53d6a1

adjust old samples, add new ones, make overflowMode private property, fix the styling comments from the code review

Merge branch 'input-tabular-suggestions-alt' of https://github.com/SA…

ac2f25f

…P/ui5-webcomponents into input-tabular-suggestions-alt

ndeshev temporarily deployed to netlify-preview July 21, 2026 14:47 — with GitHub Actions Inactive

Merge branch 'main' into input-tabular-suggestions-alt

ed61cde

ndeshev temporarily deployed to netlify-preview July 21, 2026 14:47 — with GitHub Actions Inactive

feat(ui5-tabular-input): introduce new tabular suggestions input

6740c87

remove redundant tests

ndeshev temporarily deployed to netlify-preview July 21, 2026 15:03 — with GitHub Actions Inactive

nikoletavnv previously approved these changes Jul 23, 2026

View reviewed changes

ndeshev temporarily deployed to netlify-preview July 23, 2026 13:04 — with GitHub Actions Inactive

feat(ui5-input-table-suggest): introduce new tabular suggestions input

4f793f9

rename the component

ndeshev changed the title ~~feat(ui5-tabular-input): introduce new tabular suggestions input~~ feat(ui5-input-table-suggest): introduce new InputTableSuggest component Jul 23, 2026

ndeshev dismissed nikoletavnv’s stale review via 4f793f9 July 23, 2026 15:17

ndeshev force-pushed the input-tabular-suggestions-alt branch from 372efd9 to 4f793f9 Compare July 23, 2026 15:17

ndeshev temporarily deployed to netlify-preview July 23, 2026 15:17 — with GitHub Actions Inactive

ndeshev temporarily deployed to netlify-preview July 23, 2026 15:18 — with GitHub Actions Inactive

feat(ui5-input-table-suggest): introduce new InputTableSuggest component

f30f39e

fix cypress test file name

ndeshev force-pushed the input-tabular-suggestions-alt branch from 0859076 to f30f39e Compare July 23, 2026 15:26

ndeshev temporarily deployed to netlify-preview July 23, 2026 15:26 — with GitHub Actions Inactive

Merge branch 'main' into input-tabular-suggestions-alt

9e3b561

ndeshev temporarily deployed to netlify-preview July 23, 2026 15:28 — with GitHub Actions Inactive

Uh oh!

Conversation

ndeshev commented Jun 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Key Features

Usage

Uh oh!

sap-ui5-webcomponents-release Bot commented Jun 11, 2026

Uh oh!

nikoletavnv commented Jul 16, 2026

Uh oh!

nikoletavnv commented Jul 16, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nikoletavnv Jul 16, 2026

Choose a reason for hiding this comment

Uh oh!

ndeshev Jul 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nikoletavnv commented Jul 17, 2026

Uh oh!

Uh oh!

Uh oh!

nikoletavnv Jul 17, 2026

Choose a reason for hiding this comment

Uh oh!

ndeshev Jul 20, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

nikoletavnv Jul 17, 2026

Choose a reason for hiding this comment

Uh oh!

ndeshev Jul 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ndeshev commented Jul 21, 2026

Uh oh!

nikoletavnv commented Jul 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ndeshev commented Jul 21, 2026

Uh oh!

github-actions Bot commented Jul 23, 2026

👋 Heads-up: dev close is in effect

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ndeshev commented Jun 11, 2026 •

edited

Loading

ndeshev Jul 20, 2026 •

edited

Loading

ndeshev Jul 20, 2026 •

edited

Loading

nikoletavnv commented Jul 21, 2026 •

edited

Loading