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

Custom components with list props do not update immediately in qwik #3735

Open
kasavetova opened this issue Nov 15, 2024 · 0 comments
Open

Comments

@kasavetova
Copy link

kasavetova commented Nov 15, 2024

Describe the bug
Custom components with fields of type list do not always re-render when props change.

To Reproduce
Steps to reproduce the behavior:

  1. Create custom component with list type
  2. Render list
  3. Change props (title in this example)

Expected behavior
Expect both renders of the list to update as the props change.

Screenshots
Screenshot 2024-11-15 at 14 00 40

Additional context
It seems that adding optional chaining when using the list props for some reason works, even though the props are initialised with a default value so technically the contents of the field list shouldn't ever be undefined. Or alternatively I would expect to see an error when accessing the title or items props. I have observed this only for list type fields.

// component config
export const CUSTOM_COMPONENTS: RegisteredComponent[] = [
  {
    component: CustomList,
    name: "CustomList",
    inputs: [
      {
        name: 'items',
        type: 'list',
        defaultValue: [
          {
            title: 'Item one',
          },
        ],
        subFields: [
          {
            name: 'title',
            type: 'string',
            defaultValue: 'Item title',
            required: true,
          },
        ],
        required: true,
      },
    ],
  },
];

// CustomList component
export default component$((props) => {
  return (
    <div class={styles.list}>
      <p>This works</p>
      {props.items.map((item, key) => (
        <li key={key}>{item?.title}</li>
      ))} <br />

      <p>This doesn't work</p>
      {props.items.map((item, key) => (
        <li key={key}>{item.title}</li>
      ))}
    </div>
  );
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant