Input SuggestionItem: showSuggestions throws errors (nextjs 14)

[thisispaula]

Describe the bug

Originally I wanted to use the suggestions feature on the MultiInput but unfortunately I wasn't able to get it to work. So I've tried to implement the sample with suggestions as provided in the documentation of the Input. As soon as I enable showSuggestions my code is throwing the below listed errors, although I'm importing the listed module of the documentation:

https://sap.github.io/ui5-webcomponents-react/iframe.html?viewMode=docs&id=inputs-input--docs#input-with-customizable-suggestionitem

I'm using nextjs 14.0.4 in my project.

I've also tried to test the code-sample for Input with suggestions on the provided examples/nextjs-pages most outer page.tsx, there it fails with the same errors as listed below.

import "@ui5/webcomponents/dist/features/InputSuggestions.js";

import { Input, SuggestionGroupItem, SuggestionItem } from '@ui5/webcomponents-react';

export default async function Home() {
 
  return (
    <>
      <Input
              placeholder="type anything to show suggestions"
              showSuggestions
              style={{
                width: "400px",
              }}
              type="Text"
              valueState="None"
            >
              <SuggestionGroupItem text="A Group" />
              <SuggestionItem
                additionalText="USA"
                description="My Description"
                icon="globe"
                text="United States"
              />
              <SuggestionItem icon="globe" iconEnd text="Bulgaria" />
              <SuggestionGroupItem text="Another Group Items" />
              <SuggestionItem icon="globe" text="Argentina" />
              <SuggestionItem icon="globe" text="Germany" />
              <SuggestionItem icon="globe" text="Iceland" />
              <SuggestionItem icon="globe" text="Moldova" />
            </Input>
    </>
  );
}

Isolated Example

No response

Reproduction steps

1. Implement <Input> with Suggestion Items and showSuggestions enabled
2. Import InputSuggestions.js
3. Run the development server / hit refresh in the browser

Errors in VS Code Terminal:

 ⨯ node_modules\@ui5\webcomponents-base\dist\CustomElementsRegistry.js (66:51) @ description
 ⨯ uncaughtException: TypeError: Cannot read properties of undefined (reading 'description')
    at eval (webpack-internal:///(rsc)/./node_modules/@ui5/webcomponents-base/dist/CustomElementsRegistry.js:76:52)
    at Array.forEach (<anonymous>)
    at displayFailedRegistrations (webpack-internal:///(rsc)/./node_modules/@ui5/webcomponents-base/dist/CustomElementsRegistry.js:56:7)
    at Timeout.eval [as _onTimeout] (webpack-internal:///(rsc)/./node_modules/@ui5/webcomponents-base/dist/CustomElementsRegistry.js:40:13)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7)
null

Error in Browser Console:

Input.js:633 Uncaught (in promise) Error: You have to import "@ui5/webcomponents/dist/features/InputSuggestions.js" module to use ui5-input suggestions
    at HTMLElement.enableSuggestions (Input.js:633:19)
    at HTMLElement.onBeforeRendering (Input.js:178:18)
    at HTMLElement._render (UI5Element.js:560:14)
    at renderImmediately (Render.js:45:18)
    at HTMLElement.connectedCallback (UI5Element.js:139:70)

Expected Behaviour

No response

Screenshots or Videos

No response

UI5 Web Components for React Version

1.26.1

UI5 Web Components Version

1.23.1

Browser

Chrome, Edge

Operating System

Windows 11

Additional Context

I've tried it before with the webcomponents version 1.21.2 and the webcomponents-react version 1.24.0 there I was getting the error listed below in the console of my browser on hitting refresh or when building the project as soon as I was importing this: @ui5/webcomponents/dist/features/InputSuggestions.js

Error: ReferenceError: HTMLElement is not defined. 

Relevant log output

No response

Organization

No response

Declaration

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