Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Input SuggestionItem: showSuggestions throws errors (nextjs 14) #5662

Open
1 task done
thisispaula opened this issue Apr 3, 2024 · 0 comments
Open
1 task done

Input SuggestionItem: showSuggestions throws errors (nextjs 14) #5662

thisispaula opened this issue Apr 3, 2024 · 0 comments
Assignees
Labels
bug Something isn't working

Comments

@thisispaula
Copy link

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 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

  • I’m not disclosing any internal or sensitive information.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
Status: 🆕 New
Development

No branches or pull requests

2 participants