Difficulty clearing selection from adjacent component

[skycafemix]

I use lookup with a separate Add button and a datatable. After adding the selection to the datatable, I need to clear the lookup item as if the user clicked the X button. Had trouble finding it with querySelector and a data-id attribute. My solution was to expose the "Remove selected option" close button by adding an @api decorator to handleClearSelection().

It can be used like this, so that the Add button clears the selection:

in html:
<c-lookup class="presentersLookupTag" ... />

in js:
presentersLookupTag = '.presentersLookupTag';
addPresenterClick() { // Add button was clicked
  // do add processing

  // finished adding presenter, so clear the selection
  const lookuplwc = this.template.querySelector(this.presentersLookupTag);
  lookuplwc.handleClearSelection();
}

[pozil]

HI @skycafemix, thanks for reaching out with your use case.

Assuming that you're using a lookup with the following markup:

<c-lookup selection={initialSelection} ...></c-lookup>

All you have to do to clear the selection is to add a function like this in the parent component and call it:

clearSelection() {
  this.initialSelection = [];
}

This pattern is part of the sample app that's shipped in this repository.

You do not not need to access handleClearSelection() from the lookup.

[skycafemix]

Oh, okay! I'll give it a shot. Thank you for checking.

[skycafemix]

Hey @pozil, thanks it worked like a charm. Silly I spent so much time trying to track it through the dom. Will close this.