Blueprint: MultiSelect tagInputProps onRemove called when item added

[lintardec]

Environment

"@blueprintjs/select": "^2.0.1",
"@blueprintjs/core": "^2.3.1",

Chrome Version 67.0.3396.79 (Official Build) (64-bit)

Steps to reproduce

Create a new MultiSelect element (based on the example)

const RegionMultiSelect = MultiSelect.ofType<GridRegion>()
const MyMultiSelect = (props: MultiRegionSelectProps) => {

  const select = (region: GridRegion) => {
    if (isSelected(region)) {
      props.removeCriteria(props.name, region.code)
    } else {
      props.updateCriteria(props.name, region.code)
    }
  }
  const tagRemove = (_tag: string, index: number) => {
    props.removeCriteria(props.name, _tag)
  }

  const filterGridRegion: ItemPredicate<GridRegion> = (query, region) =>
    region.code.indexOf(query.toUpperCase()) >= 0

  const renderItem: ItemRenderer<GridRegion> = (region,  { handleClick, modifiers }) => (
    <MenuItem
      icon={isSelected(region) ? 'tick' : 'blank'}
      key={region.code}
      text={region.code}
      label={region.name}
      onClick={handleClick}
      shouldDismissPopover={true}
    />
  )
  const renderTag = (region: GridRegion) => region.code
  const isSelected = (region: GridRegion) => props.value && props.value.indexOf(region.code) > -1

  return (
    <RegionMultiSelect
      items={props.gridRegions}
      itemRenderer={renderItem}
      itemPredicate={filterGridRegion}
      noResults={<MenuItem disabled={true} text='No matching code' />}
      onItemSelect={select}
      tagRenderer={renderTag}
      popoverProps={{minimal: true, usePortal: false}}
      tagInputProps={{ tagProps: {intent: Intent.PRIMARY, interactive: true}, onRemove: tagRemove }}
      selectedItems={props.gridRegions.filter(isSelected)}
    />
  )
}

Actual behavior

display works fine, but when selecting an element the onRemove function gets called after the onItemSelect function has added the element so de-selecting it again

Changing my tagRemove function to just log, shows that it is called every time I add an element, passing through the values of the first tag.

Changing the popoverProps to have usePortal: true stops this from happening, but now clicking on the remove icon causes my tagRemove function to be called twice, once for the one that was clicked and once for the first element in the list

Expected behavior

Expected the onRemove function to only be called when the remove check box is clicked

Possible solution

Neither of these bugs occur in IE version 11.0.9600.19002

[giladgray]

🤔 interesting issue! will require some investigation.

[giladgray]

@lintardec i am sorry but i cannot reproduce this on the v2 or v3 docs sites. the MultiSelectExample uses onRemove and in my explorations it is only ever called when expected.

i would suggest trying out the 3.0.0 beta to see if the bug persists on your end: @blueprintjs/core@next, @blueprintjs/select@next

[lintardec]

Unfortunately when I try using the latest version of blueprint I am just getting install errors.

Getting a 404 error when looking for @blueprintjs/icons@^3.0.0-beta.0

This is most likely an issue with our corporate firewall

I have tried debugging it further, looking at the stacktrace:

MultiRegionSelect._this.tagRemove (MultiRegionSelect.tsx:28)
safeInvoke (utils.js:31)
./node_modules/@blueprintjs/core/lib/esm/components/tag-input/tagInput.js.TagInput.removeIndexFromValues (tagInput.js:189)
TagInput._this.handleRemoveTag (tagInput.js:111)
safeInvoke (utils.js:31)
Tag._this.onRemoveClick (tag.js:16)
callCallback (react-dom.development.js:100)
invokeGuardedCallbackDev (react-dom.development.js:138)
invokeGuardedCallback (react-dom.development.js:187)
invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:201)
executeDispatch (react-dom.development.js:461)
executeDispatchesInOrder (react-dom.development.js:480)
executeDispatchesAndRelease (react-dom.development.js:581)
executeDispatchesAndReleaseTopLevel (react-dom.development.js:592)
forEachAccumulated (react-dom.development.js:562)
runEventsInBatch (react-dom.development.js:723)
runExtractedEventsInBatch (react-dom.development.js:732)
handleTopLevel (react-dom.development.js:4476)
batchedUpdates$1 (react-dom.development.js:16659)
batchedUpdates (react-dom.development.js:2131)
dispatchEvent (react-dom.development.js:4555)
interactiveUpdates$1 (react-dom.development.js:16714)
interactiveUpdates (react-dom.development.js:2150)
dispatchInteractiveEvent (react-dom.development.js:4532)

As the multiple calls being made when running as a portal have identical stacktraces this does not help identify where the issue is coming from.

I thought that it could be due to using different react-dom versions as the call is coming from there. I was using 16.3 so tried upgrading to 16.4 but no luck, also tried going back to the version blueprint specifies, 16.2 but I'm still seeing the same issue.

When the remove function just logs, it shows that everytime an element is added, the zero element gets the remove function fired.

Have had to add a workaround for the issue making use of the fact that it always removes element zero (ie I add a zero element to the selected items every time).

Not sure how else to debug the issue. Any ideas where to look?

[giladgray]

@lintardec the best place to look is the source code itself. would appreciate any more insight you can offer, but i will look into this after finishing 3.0.0

[emlynmac]

I just ran into this double-remove issue. I'm using
"@blueprintjs/core": "^3.9.0"
"@blueprintjs/select": "^3.3.0"

and consistently get onRemove called twice when removing a tag from a multiselect.
Setting usePortal to false causes the onRemove call to get called just after addition of the tag.

I'm using Chrome, version 70.0.3538.110 (Official Build) (64-bit).

[emlynmac]

...and this was the solution for me: https://github.com/palantir/blueprint/issues/3058#issuecomment-432275232