ComboBox item with onClick support

[pop1989bb]

Hi guys,

I think it would be a good idea to provide a onClick/onSelect support per ComboBoxItem.
I often want to add some functionality which depends on the selected combobox item. Do you think it would be possible to add this in a future version?

Kind regards

[Lukas742]

Hi @pop1989bb

could you please elaborate on why the current implementation using the selection-change event is not sufficient? There you receive each selected item inside the detail object. If you need to get more info than for example the text, you could use data- attributes, similar to what is explained here: https://sap.github.io/ui5-webcomponents-react/v1/?path=/docs/knowledge-base-ids-via-dataset--docs

I've also prepared an example that is showing the behavior in action: https://stackblitz.com/edit/combobox-selection?file=src%2FApp.tsx

function App() {
  const [selectedItem, setSelectedItem] = useState({ text: '', key: '' });
  return (
    <>
      <ComboBox
        onSelectionChange={(e) => {
          const { item } = e.detail;
          console.log(item);
          setSelectedItem({
            text: item.text,
            key: item.dataset.someMoreInfo!,
          });
        }}
      >
        <ComboBoxItem text="ComboBox Entry 1" data-some-more-info="key1" />
        <ComboBoxItem text="ComboBox Entry 2" data-some-more-info="key2" />
        <ComboBoxItem text="ComboBox Entry 3" data-some-more-info="key3" />
        <ComboBoxItem text="ComboBox Entry 4" data-some-more-info="key4" />
        <ComboBoxItem text="ComboBox Entry 5" data-some-more-info="key5" />
      </ComboBox>
      <br />
      {JSON.stringify(selectedItem, null, ' ')}
    </>
  );
}

[pop1989bb]

Hi @Lukas742 ,
let's have an array consisting of complex objects.

My example

interface ComplexInterface {
caption: string;
index: number,
data: SomeObject.
//...
}

const arr: ComplexInterface[]=[
a, b, c
];
//all elements of the array implement the interface ComplexInterface.
 return <ComboBox title="my combobox">
   {arr.map(el => <ComboBoxItem 
                    key={el.index} 
                    text={el.caption}
                   //This way I easily could bind objects to ComboBoxItems without doing any filter task.
                    onClick={()=>console.log(el)}/>)}
</ComboBox>

I understand your example and I indeed solved my task this way. But I still think that the proposal is a good way to work.
Thank you for the work btw!

[Lukas742]

Sorry for the late reply @pop1989bb

I can see that this would simplify working with complex structures in React, but since this feature would need to be integrated in the web component itself, I'm forwarding this Idea to the ui5-webcomponents repo.

[pop1989bb]

@Lukas742
Don't worry. That's no problem. It would be nice to see this in a future version!

[nnaydenow]

Hi @pop1989bb,

There are plans to switch combo box items to real elements (elements that have their own shadow root) and by that you will be able to bind directly to the real click event but unfortunately I can't give you exact timeliness for that.