[combobox]: because combobox selected-icon logic uses in-memory comparison selectedItems are missing the checkbox

[scottdickerson]

• carbon-components
• carbon-components-react

Detailed description

I'd like to pass in the selectedItem as external State to the ComboBox,

const items = [{id: 1, 'text'1]];
const [selectedItem, setSelectedItem] = useState(items[0]);

<ComboBox
   onChange={changedItem=>  setSelectedItem(changedItem)}
   items={items}
   selectedItem={selectedItem}
  ...

however, the setSelectedItem returns a new object in memory as the selectedItem I guess, because it no longer matches the in-memory version from items
Because the combobox uses an in-memory object comparison to determine whether the current item in the list should show the checkbox or not, this fails to match and the checkbox fails to show, so you end up with this type of situation

It should use the same type of logic as the logic to determine isHighlighted:
isHighlighted: highlightedIndex === index || selectedItem && selectedItem.id === item.id || false,

This code works around the issue

setSelectedItem(localStateItems.find(item => isEqual(item, changedItem))); 

[dakahn]

Interesting bug 👍 Thanks for reporting. Added to the backlog

[emyarod]

if I'm not mistaken selectedItem does not get updated with the prop. would setting initialSelectedItem work in your use case?

const items = [ {id: 1, text: 1 }];
const [selectedItem, setSelectedItem] = useState(items[0]);

<ComboBox
   onChange={changedItem=>  setSelectedItem(changedItem)}
   items={items}
   initialSelectedItem={selectedItem}
  ...

[scottdickerson]

InitialSelectedItem does work but only if I use the exact in memory value that I pass in the items array. It would be good to call the compare items callback where I can tell that a initial selected item is equal to an item in the combo box when determining whether a particular item is selected or not On Jun 2, 2021, at 9:33 AM, emyarod ***@***.***> wrote:  if I'm not mistaken selectedItem comes from Downshift and does not get updated with the prop. would setting initialSelectedItem work in your use case instead? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#7055 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ABS2WWQJDENMPFSOZLB6G5LTQZFK5ANCNFSM4SSKLGOA>.

[emyarod]

so if I understand correctly a combination of using initialSelectedItem at the app level and adding the selectedItem id check in the component itself should fit your use case, is that right?

would you be able to create a reduced test case in Code Sandbox for easier testing and debugging given that using initialSelectedItem alone seems to work for the code block posted in the original issue body?

[scottdickerson]

That’s right if you checked on ID it would work. However I know you’re trying to be agnostic on the item format. As long as you use the compareItems callback to do the selected item comparison it should work for us. On Jun 3, 2021, at 11:56 AM, emyarod ***@***.***> wrote:  so if I understand correctly a combination of using initialSelectedItem at the app level and adding the selectedItem id check in the component itself should fit your use case, is that right? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#7055 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ABS2WWVAUP3KLN742BVHJLTTQ6643ANCNFSM4SSKLGOA>.

[emyarod]

I can add an id check and expose a compareItems callback, but I just want to make sure I'm correctly testing for your use case since I think those changes may be unrelated to the original issue, given your original code snippet (the onChange handler doesn't seem to follow the expected function signature). would you be able to create a reduced test case in Code Sandbox for easier testing and debugging?

const [selectedItem, setSelectedItem] = useState(items[0]);
return (
  <ComboBox
    {...comboBoxProps}
    items={items}
    onChange={({ selectedItem: changedItem }) => setSelectedItem(changedItem)}
    selectedItem={selectedItem}
  />
);

[joshblack]

Going to close this out due to inactivity, feel free to comment and I can re-open!