MultiComboBox: wrong typescript definitions

[pmarkiewicz]

Describe the bug

I have simple component with MultiComboBox, when I try to get selected data in onSelectionChange handler I got error: Property 'selectedValues' does not exist on type 'MultiComboBoxDomRef'.

Unfortunatelly documention is pretty poor so I'm not sure if my solution is correct.

const handleChange = (event: Ui5CustomEvent<MultiComboBoxDomRef, MultiComboBoxSelectionChangeEventDetail>): void => { if (!event || !event.target) { return; } const target = event.target; const selected = target.selectedValues; // Property 'selectedValues' does not exist on type 'MultiComboBoxDomRef'. const selectedValues = selected.map(item => item.text);

console.log("selectedValues", selectedValues);

}

Isolated Example

No response

Reproduction steps

1. 2. 3. ...

Expected Behaviour

corretly typed target so application can be build

Screenshots or Videos

No response

UI5 Web Components for React Version

"@ui5/webcomponents": "1.24.5",

UI5 Web Components Version

"@ui5/webcomponents-react-base": "1.29.1",

Browser

Chrome

Operating System

macos

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

• [X] I’m not disclosing any internal or sensitive information.

[Lukas742]

Hi @pmarkiewicz

Only public methods and properties of a ui5 web component are exposed in our type definitions.

Since selectedValues is not a public property of the MultiComboBox, it's not present in the respective interface. If you want to get the respective items when selecting, you can use the items property in the event details object. This is also reflected in the onSelectionChange type itself.

https://stackblitz.com/edit/ui5wcr-v1-8vimbc?file=src%2FApp.tsx

Since the type definitions are correct, I’m closing this issue.

[pmarkiewicz]

this is how I started, but I don't see any official way to read text value and _state looks like private property

regards

On Mon, Oct 21, 2024 at 3:46 PM Lukas Harbarth @.***> wrote:

Hi @pmarkiewicz https://github.com/pmarkiewicz

Only public methods and properties of a ui5 web component are exposed in our type definitions.

Since selectedValues is not a public property of the MultiComboBox, it's not present in the respective interface. If you want to get the respective items when selecting, you can use the items property in the event details object. This is also reflected in the onSelectionChange type itself.

https://stackblitz.com/edit/ui5wcr-v1-8vimbc?file=src%2FApp.tsx

Since the type definitions are correct, I’m closing this issue.

— Reply to this email directly, view it on GitHub https://github.com/SAP/ui5-webcomponents-react/issues/6536#issuecomment-2426732933, or unsubscribe https://github.com/notifications/unsubscribe-auth/AADV6IYZQDS6XGKNONCT6YDZ4UASFAVCNFSM6AAAAABQJ6OGTGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMRWG4ZTEOJTGM . You are receiving this because you were mentioned.Message ID: @.***>

[Lukas742]

event.detail.items contains all selected MultiComboBoxItems DOM references where you can get, i.a., the text value.

https://stackblitz.com/edit/ui5wcr-v1-5gm25o?file=src%2FApp.tsx

[pskelin]

@pmarkiewicz the solution from Lukas is the correct one, but it is indeed difficult to find out that you need this type for your event handler:

const handleSelectionChange: MultiComboBoxPropTypes['onSelectionChange']

What I found much easier, is that TypeScript will infer all of the types correctly and you don't need any imports or type annotations, if you put your handler inline

<MultiComboBox
  onSelectionChange={(e) => {
    const selectedItemTexts = e.detail.items
      .filter((item) => item.selected)
      .map((item) => item.text);
    console.log(selectedItemTexts);
  }}
>
  <MultiComboBoxItem text="Item 1" />
  <MultiComboBoxItem text="Item 2" />
  <MultiComboBoxItem text="Item 3" />
  <MultiComboBoxItem text="Item 4" />
  <MultiComboBoxItem text="Item 5" />
</MultiComboBox>

Here is the full example: https://stackblitz.com/edit/ui5wcr-v1-zsac73?file=src%2FApp.tsx Everything works as expected, you get code completion and can see the types on mouse hover without doing anything else.