Lit-html select component event handlers

Question

I am using a library called lit to create custom web components and i have tried using the @change and @select event handlers to display another component with no luck. I also can't seem to find the info on the docs.

My code looks like this :

return html`
    <div>
        
        <bx-select helper-text="Optional helper text" @change=${this._updateValue} label-text="Select" placeholder="HIV Test 1 Results:">
          ${this.answers?.map(
            (item: any) => html`<bx-select-item 
              label-text=${item.label}
              value=${item.concept}
              .selected=${this.initialTestVal == item.concept}
            >
              ${item.label}
            </bx-select-item>`)} 
        </bx-select> 

        <bx-select helper-text="Optional helper text" label-text="Select" placeholder="HIV Test 2 Results:">
          ${this.answers?.map(
            (item: any) => html`<bx-select-item @change=${this._updateValue}
              label-text=${item.label}
              value=${item.concept}
              .selected=${this.confirmedTestVal == item.concept}
            >
              ${item.label}
            </bx-select-item>`)}  
        </bx-select>

        <bx-select helper-text="Optional helper text" label-text="Select" placeholder="HIV Test 3 Results:">
          ${this.answers?.map(
            (item: any) => html`<bx-select-item
              label-text=${item.label}
              value=${item.concept}
              .selected=${this.finalTestVal == item.concept}
            >
              ${item.label}
            </bx-select-item>`
          )}  
        </bx-select>
        
    </div>`;

Any help/ advise on this will be appreciated.

score 1 · Accepted Answer · answered Jul 07 '22 at 17:33

Based on the name <bx-select> I'll assume you're using Carbon web components.

Unfortunately it doesn't look like it's listed in the doc but the event name that's fired when you select appears to be bx-select-selected so you'd want to add an event listener with @bx-select-selected.

This can be seen here https://web-components.carbondesignsystem.com/?path=/story/components-select--default when you select an option and see the "Actions" tab below.

You can also see the component's source code to see where the event is dispatched here https://github.com/carbon-design-system/carbon-web-components/blob/c318f69d726a72f006befc7aa46b76b33695d07f/src/components/select/select.ts#L62 and the name is defined here https://github.com/carbon-design-system/carbon-web-components/blob/c318f69d726a72f006befc7aa46b76b33695d07f/src/components/select/select.ts#L387.

Lit-html select component event handlers

1 Answers1