Problem with Select plasmic component

Issues
1

What are you trying to do?
I have a component that is called SelectCountry for website country selection, this has a Select component from the basic plasmic components inside.
The SelectCountry is present both in the header and on the footer of the website.
This worked before but broke with something, the one on the header works just fine, the one on the footer does not.

What are the reproduction steps?
This is replicable creating a fresh nextjs plasmic project starting from the project below

Relevant links:

2

Hi @gablab

Could you please share more about what exactly is not working?

Addtionally, could you confirm if the reproduction steps provided below are correct:

  1. Copy the project or use the provided project
  2. Create a new plasmic project with Nextjs codegen
  3. Verify the select component in Footer
3

Hello @muhammad_asim, thanks for the reply. The select in the footer does not open on my end.

Steps to reproduce:

  1. yarn create plasmic-app with options: javascript, nextjs, codegen
  2. link the project link above
  3. cd my-app && yarn dev
  4. Check the select country in footer
4

Thanks for providing the steps. I’m able to reproduce that. It seems like the select dropdown is not showing up because it doesn’t have enough space below it. Ideally, it should show the popup above the Select trigger when there is not enough space below it.

We will investigate further and fix it accordingly.

1 Like
5

Hello, is there any update on this topic?

Thanks in advance

6

Hi @gablab

Because the Plume components are deprecated, we recommend, switching to the newer, Customizable Select component instead. That should resolve the issue.

image
image674Ă—1196 42.5 KB

Thanks

1 Like
7

Thanks @muhammad_asim, this works but I’m getting another error.
Works fine when creating a new project from the above plasmic id, but not when replacing the component in the existing project. The wrapper component itself is not providing any prop to the select component as on the fresh one but I’m getting the following error.

image
image2000Ă—1304 198 KB

8

@gablab Thanks for reporting this issue. We are investigating it

9

Hello, just an update. Today when I try to create a new component using the Select as a base on the same project it fails to create the component. Idk if the error in console is related

4506.c3a201e1.js:465 Error evaluating custom code `(
      $props.showDescription
    )`: ReferenceError: $props is not defined
    at Object.get (index.1e5028e9.js:2:4979939)
    at Object.eval (eval at <anonymous> (index.1e5028e9.js:2:4979433), <anonymous>:5:11)

Thanks
Gabriele

10

Hi @gablab

Could you please share the steps to reproduce this issue? I followed the following steps which are working fine

  1. Right click on the existing customizable Select component.
  2. Click on “Create component”, named it as SelectWrapper
  3. SelectWrapper is a new component having customizable Select as a root component.

Do you mean, it’s working fine in Studio but causing issue in the Codegen?

11

Hello @muhammad_asim,

the issue was on me, I was renaming the first attempt and when I was creating a new one it was bringing me to the old one (select wrapper component)

I was able to migrate two of our selects to the new components, seems the “Replace all instances” function won’t work as slot contents and variants are different

Seems to work fine on the final build but I’m getting an error during development, I managed to trace this error and it disappears when I remove a useContext call to a StoreCheckoutContext, I’ve tried replacing the StoreCheckoutProvider contents with a null value but still happens, seems unrelated to me.

image
image2008Ă—1278 197 KB

Thanks for the help! :slight_smile:

1 Like