[InputSuggestion]: Error when navigating to SuggestionItem

[ductaily]

Bug Description

The Input component is used with InputSuggestions enabled.
The Input component is passed as the searchField to the ShellBar component.

When typing, suggestions are shown. However, as soon as a SuggestionItem is selected by clicking on an item or key press down, an unhandled runtime error is thrown (see attached log images below).

Affected Component

Input/InputSuggestions

Expected Behaviour

Navigating to a SuggestionItem via click or keypress should be possible without error.

• Navigating to a SuggestionItem should highlight the selected item
• Clicking the SuggestionItem should select the item or execute the implemented event

Isolated Example

https://github.com/ductaily/suggestion-error/tree/main

Steps to Reproduce

We are using

• next: 14.0.3
• @ui5/webcomponents-react: 1.23.3
• next.js pages router
• target of our deployment is gh-pages

Log Output, Stack Trace or Screenshots

Priority

Medium

UI5 Web Components Version

1.20.1

Browser

Chrome

Operating System

MacOS 14.2.1

Additional Context

No response

Organization

No response

Declaration

• I’m not disclosing any internal or sensitive information.

[niyap]

Hello @ductaily,

Could you please provide an isolated example in codesandbox ?

Thank you in advance!

Kind Regards,
Niya

[pavelkornev]

@niyap Tai has already provided an isolated project for this - https://github.com/ductaily/suggestion-error — have you had a look at this? Why is it not sufficient?

[niyap]

Hello Colleagues,

I was not able to reproduce the issue outside your isolated project.
Please check the CodeSandbox: https://codesandbox.io/s/ui5-webcomponents-forked-wjsh4j?file=/index.html and extend it with the reproducible issue if possible.
In that way, it will be easier to analyse the issue.

Thank you in advance!

Kind Regards,
Niya

[pavelkornev]

@niyap

Why are we asked to create an isolated example here if we report the issue in the certain context?

In this case, it's a concrete component which doesn't work properly in the context of Next.js (one of the most popular frameworks to assembly frontend apps).

What's the point of Web Components which only work in the clean browser and do not integrate properly with other frameworks? Isn't it the idea behind WC why they were originally created?

We have created very minimalistic example with Next.js. Please check it.

[nnaydenow]

Hi @pavelkornev, @ductaily,

I'm not very familiar with NextJs but seems there is a problem with how it process web components at all and I can confirm that the issue is reproducible in the minimalistic example that you've provided.

I read about some configurations and some known limitations stated in ui5-webcomponents-react documentation so could you please check the documentation of ui5-webcomponents-react (https://sap.github.io/ui5-webcomponents-react/) and check if everything is setup as it's described (https://sap.github.io/ui5-webcomponents-react/?path=/docs/knowledge-base-server-side-rendering--docs)?

I've created new application using their starting templates (https://github.com/SAP/ui5-webcomponents-react/tree/main/examples/nextjs-app) and issue seems to not be reproducible. (The template creates application with the latest versions of both projects but you can downgrade just to confirm).

[pskelin]

We have investigated the issue and the problem is in the order of the imports. For the InputSuggestion feature to work, it needs to be imported before the Input component. Due to the way next.js is creating chunks, it comes after the Input.

I suppose you added the dynamic(... ssr: false) exactly because the InputSuggestion breaks with SSR, but this puts it in a second chunk and it always gets executed after the Input, no matter how you order the imports in the app.

With the proposed fix above, you will be able to import all components and features in a node environment, so you have to remove the ssr: false dynamic import. I have tested this with local changes in node_modules and it works.

[pavelkornev]

@pskelin

I suppose you added the dynamic(... ssr: false) exactly because the InputSuggestion breaks with SSR

Your assumption is right.

Thanks for the investigation and the proposed solution. When do you plan to release it?

[ilhan007]

Hi @pavelkornev

The next 1.22.0 stable release is coming soon (5th-9th Feb)

Every week, on Thursday, we publish Release Candidate (1.22.0-rc.1/2/3). So, next Thursday 1 Feb, 1.22.0-rc.3 is coming out.