0

I'm implementing a checkbox component using vaadin and lit. I've implemented it according to the vaadin documentation, but I don't see the grouped checkboxes.

When debugging in the console, "render ()" is called first, followed by "firstUpdated ()". So I know that the property values will be an empty array.

However, I don't understand why this happens even though I implement it like the sample. How can I implement it correctly?

vaadin document

This is custom element.

import { customElement, state } from 'lit/decorators.js';
import { html, LitElement } from 'lit';
import '@vaadin/vaadin-ordered-layout/vaadin-vertical-layout';
import '@vaadin/vaadin-checkbox/vaadin-checkbox-group'
import '@vaadin/vaadin-checkbox/vaadin-checkbox'
import { CheckboxElement } from '@vaadin/vaadin-checkbox';
import { Person } from '../../util/person';
import { getPeople } from '../../util/personUtil';


@customElement('checkbox-indeterminate')
export class CheckboxIndeterminate extends LitElement {
  @state()
  private items: Person[] = [];

  @state()
  private selectedIds: string[] = [];

  async firstUpdated() {
    this.items = await getPeople();
    this.selectedIds = [String(this.items[0].id), String(this.items[2].id)];
    console.log(`firstUpdated: ${JSON.stringify(this.items)}`);
    console.log(`firstUpdated: ${JSON.stringify(this.selectedIds)}`);
  }

  render() {
    console.log(`render: ${JSON.stringify(this.items)}`);
    console.log(`render: ${JSON.stringify(this.selectedIds)}`);
    return html`
      <vaadin-vertical-layout theme="spacing">
        <vaadin-checkbox
          .checked="${this.selectedIds.length === this.items.length}"
          .indeterminate="${this.selectedIds.length > 0 && this.selectedIds.length < this.items.length}"
          @change="${(e: Event) =>
            (this.selectedIds = (e.target as CheckboxElement).checked
              ? this.items.map((person) => String(person.id))
              : [])}"
        >
          Notify users
        </vaadin-checkbox>

        <vaadin-checkbox-group
          label="Users to notify"
          theme="vertical"
          .value="${this.selectedIds}"
          @value-changed="${(e: CustomEvent) => (this.selectedIds = e.detail.value)}"
        >
          ${this.items.map((person) => {
            return html`
              <vaadin-checkbox .value="${String(person.id)}">
                ${person.firstName} ${person.lastName}
              </vaadin-checkbox>
            `;
          })}
        </vaadin-checkbox-group>
      </vaadin-vertical-layout>
    `;
  }
}


declare global {
  interface HTMLElementTagNameMap {
    'checkbox-indeterminate': CheckboxIndeterminate;
  }
}

This is getPeople() method.

import { Person } from './person';

export async function getPeople(): Promise<Person[]> {
  return [
    new Person(1, "Aria", "Bailey"),
    new Person(2, "Aaliyah", "Butler"),
    new Person(3, "Eleanor", "Price")
  ]
}

This is Person class.

export class Person {
  id: number;
  firstName: string;
  lastName: string;

  constructor(id: number, firstName: string, lastName: string) {
    this.id = id;
    this.firstName = firstName;
    this.lastName = lastName;
  }
}
6
  • What does getPeople() return? In the example in the documentation, it returns an object with a people property that is destructed (const { people } = ...) and then assigned to the items property (this.items = people). This step is missing for your example, but it's not clear whether that's an actual omission or intended because your getPeople() returns something different. Jul 29, 2021 at 7:41
  • In the example in the documentation, export async function getPeople(): Promise<PeopleResult> returns an object called PeopleResult with an array of Person and a number of hierarchyLevelSize. The checkbox-indeterminate sample didn't need the hierarchyLevelSize, so the getPeople() I made returns an array of Person. This method is export async function getPeople(): Promise<Person[]>. The getProple() I made just returns an array of 3 Persons.
    – dede
    Jul 30, 2021 at 0:22
  • Have you checked the firstUpdated log messages to verity that getPeople() actually returns a Promise with an array of three person objects? I tried running your code example, but with my own simple implementation of getPeople() since you didn't share yours, and it seems to work exactly as expected for me. If I change it so that the array is empty, then there will be an error in the browser console and the checkbox group will not be shown as you described. Jul 30, 2021 at 6:49
  • Thank you for trying it. I'm sorry for the lack of explanation. I have included my getPeople() method in the question. In the console log, the render() method is called first, and the items are empty. After that, the firstUpdated() method is called, and items has three values in it. However, the list is not output on the screen.
    – dede
    Jul 30, 2021 at 7:07
  • I'm sorry. I found the cause. I had made a mistake in tsconfig.json. I had specified ESNext for target, so it was not outputting to the screen. Thank you very much for trying.
    – dede
    Jul 30, 2021 at 7:11

1 Answer 1

1

I'm sorry. I found the cause. I had made a mistake in tsconfig.json. I had specified ESNext for target, so it was not outputting to the screen.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.