Removing a chip in a multi-Select, inside a Popover component, also closes the Popover

[vjwilson]

Describe the issue. What is the expected and unexpected behavior?
When I have a Select component using multiple and typeahead options, inside a Popover component (which holds a small contextual form), and I delete an already selected Chip, then the Popover also closes.

Please provide the steps to reproduce. Feel free to link CodeSandbox or another tool.
Codesandbox:
https://codesandbox.io/s/great-nightingale-dk1ro?file=/index.js

1. Click button in upper-right to open Popover with Form
2. Open select and add some items
3. Click the X in a chip of an already-added item to delete it.
4. Most of the time, this will close the whole popover. (I saw it NOT close it once in the Sandbox.)

Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around?
Not sure. It may be that the way Popover "click outside" behavior works means that this is not supported currently, but it's not obvious.

What is your product and what release version are you targeting?
Advanced Cluster Security. Not a blocker, but hope to get in next release, which cuts in 2 weeks.

[kmcfaul]

If you add event.stopPropagation() to the onSelect function (or setSelectOpen, though this function doesn't currently pass back event so there will be an eslint console warning) this issue should be resolved.

What is happening is that inner Select is executing its event handling before bubbling up to Popover - so when you delete a chip, Select updates and removes the chip before Popover's click handler can execute, so it reads as a null/outside event and closes. Adding a timeout can illustrate this, and may also fix the issue with a long enough wait time, because it delays the deletion long enough for Popover to check the event came from within its body.

@nicolethoen Should we update Select's onToggle to pass the event back maybe? Otherwise I don't think Popover needs an update

[nicolethoen]

You're certainly welcome to open an issue - or even just rename this issue to possibly incorporate less propagation into the component. I think you are the one who can judge if it's expected or logical for our components to handle it themselves having already dealt with it here.

[kmcfaul]

We generally haven't included built in stopping event propagation as most handlers are handed directly to the user. I think I will open a secondary chore issue to pass the event back through onToggle though.

[kmcfaul]

@vjwilson Closing. The solution is to add event.stopPropagation() to either Select update handler. The issue is caused because Select deletes its chip before Popover checks the click event (and so it reads as a null event target and behaves as an outside click).

Opened #6835 to add event to Select's onToggle, resolving a lint issue when event is used.