Key Property in ComboBoxItem, MultiComboBoxItem and Option #493

Activity

1. MarcusNotheis commented on May 8, 2020

   

   MarcusNotheis

   on May 8, 2020

   Member

   More actions

   Hi @mathlizee
   thanks for that detailed description!
   The thing is the key prop is a reserved property in React which is used for optimising updates the virtual DOM when JSX elements are created from an Array.map method like in your example. React even takes that prop out of the other props so it will never reach the component.

   But you can use the HTML5 data- api to achieve the desired behaviour for e.g. the Select:

   export default function App() {
     const _onValueChange = oEvent => {
       // Would be either ID0, ID1, ID3 or ID4
       console.log(oEvent.detail.selectedOption.dataset.key);
     };
   
     return (
       <div>
         <Select id="select" onChange={_onValueChange}>
           {users.map(user => {
             return <Option
               key={user.user_id}  // still required for react to optimize
               data-key={user.user_id} // this is your real key
             />
             {
               user.user_name
             }
           </Option>
           })}
         </Select>
       </div>
     );
   }

   I think we need to add this to our documentation as well.
   But for the ComboBox and MultiComboBox things are getting a bit more complex as there is no information about the selected items in the onChange event - I think this should be added by the UI5 Web Components - @MapTo0 what are your thoughts on that?

   Best regards,
   Marcus
2. MarcusNotheis

   added

   documentation

   ui5-webcomponents

   on May 8, 2020
3. MarcusNotheis commented on May 19, 2020

   

   MarcusNotheis

   on May 19, 2020

   Last edited by MarcusNotheis

   Member

   More actions

   Hi @mathlizee,
   I've looked at that issue again and using the data- api is also working fine for the MultiComboBox if you are using the onSelectionChange event.
   Example:

   export default function App() {
     const _onValueChange = oEvent => {
       // Would be either ID0, ID1, ID3 or ID4
       console.log(oEvent.detail.items.map(item => item.dataset.key));
     };
   
     return (
       <div>
         <MultiComboBox id="comboBox" onSelectionChange={_onValueChange}>
           {users.map(user => {
             return (
               <MultiComboBoxItem
                 key={user.user_id}
                 text={user.user_name}
                 data-key={user.user_id}
               />
             );
           })}
         </MultiComboBox>
       </div>
     );
   }

   Unfortunately there is so such API for the ComboBox itself, so I raised another issue at the UI5 Web Components repository: UI5/webcomponents#1651
4. MarcusNotheis commented on Jul 16, 2020

   

   MarcusNotheis

   on Jul 16, 2020

   Member

   More actions

   Closing this issue as there is nothing more to do here in the React wrapper in my opinion.
   Please feel free to reopen the issue in case there is still more work to do on our side.

   Best regards,
   Marcus
5. MarcusNotheis

   closed this as completedon Jul 16, 2020