Cannot add a Combobox to Popover

Flow
1

Hi,
i’m new to vaadin and struggling with following issue.

I have a class ‘CustomPopover extends Popover’
the popover auto-opens on click.

i want to add a simple Combobox but i get lot’s of client errors that the combobox is undefined.

the popover component is a lazy loading component but the combobox needs the element inside the dom due to the js connector.

listen to the isOpened event do not work - because the popover’s content not yet rendered. also the attatch event (on combobox) won’t work.

so what is the correct way to add a combobox to a popup? ist it possible?

Thx for your help (hopefully :) )

PS: the strange thing is - local on my machine inside intellij i do not have problems just when i build the app in production mode the error pops out.

2

Add @Uses(Combobox.class) to a view/route that is using your popup as a simple workaround

3

Thank you for your answer but i’m facing the same issues.

i’ve tried to add the @Uses(ComboBox.class) annotation to my MainLayout which extends AppLayout, to my Router, to the Popover’s target component, to the view inside the popover i also tried to set vaadin.devmode.optimizeBundle = true. i also tried to add a hidden combobox to maybe load the javascript connector earlier but that didn’t work either.

the combobox just get rendered in devmode, in production mode i get these client errors:

Cannot read properties of undefined (reading ‘updateSize’)
at Object.eval (eval at jE (FlowClient-DyMGXbet.js:3:45106), :3:22)

Cannot read properties of undefined (reading ‘set’)
at Object.eval (eval at jE (FlowClient-DyMGXbet.js:3:45106), :3:22)

Cannot read properties of undefined (reading ‘confirm’)
at Object.eval (eval at jE (FlowClient-DyMGXbet.js:3:45106), :3:22

and

Cannot read properties of undefined (reading ‘initLazy’)
at HTMLElement.eval (eval at jE (FlowClient-DyMGXbet.js:3:45106), :3:65)
at Object.eval (eval at jE (FlowClient-DyMGXbet.js:3:45106), :3:82)

do you have any other ideas? :confused:

4

This stacktrace looks like some other issue… I would suggest to report it on GitHub in the flow-components repository

5

Thank you for your time, i opened a ticket on github: Cannot add a Combobox to Popover · Issue #7740 · vaadin/flow-components

6

That example looks really weird tbh… no idea why you are overwriting getElement… or using a Component as base for your class…

If a Combobox within a normal Popover works (using a normal start.vaadin.com project)… then this interesting choice of Design might be the culprit

1 Like
7

ha i#m a beginner and i do not know why i did this i saw it in a sample code for mvp pattern. using a normal verticallayout as base works fine - jipie :)
should i close the github issue or is there something that should be fixed anyway?

because im interested in, can you explain me why this is an issue?

8

Let it open, the team can handle it :)

The production mode tries to build an optimized executable which only includes JavaScript that is really needed by the application… for this it traverses the bytecode to check for all vaadin related classes which have JavaScript to include them in the production bundle. In your example, it probably failed because it did not check the overwritten getElement

1 Like