Igniteui-angular: Bug - IgxOverlay on closeOnOutsideClick:true requires an extra click to re-open overlayed component

[corganfuzz]

Description

IgxOverlay on closeOnOutsideClick:true requires an extra click to re-open overlayed component

• igniteui-angular version: 7.1.2
• browser: Chrome

Steps to reproduce

1. Go to stakckz
2. Look for toggleOverlay() function and change line(32) closeOnOutsideClick: true
3. Click the toggle card button
4. Now Click outside of the button
5. The only way to get the overlay component back is to double click it, and sometimes it doesnt even work so it will not open

Result

Overlayed component requires an additional click to open and sometimes it wont even open at all.

console errors:

igxOverlay.hide was called with wrong id: 0
igxOverlay.hide was called with wrong id: 1
igxOverlay.hide was called with wrong id: 4
igxOverlay.hide was called with wrong id: 5

Expected result

if I click the toggle button , then I click outside , then I should be able to click once to re-open it. Not twice. Otherwise, it looks like the button is broken or doesnt work

[ViktorSlavov]

@corganfuzz The issue is in the sample - it aims to illustrate how to dynamically create an instance of a component in the overlay and using closeOnOutsideClick: true is not really ideal here:
The custom card component is dynamically created, so we can't really get a reference to its state (visible or hidden). That's why the flag property (_cardHidden) is toggled on button click.
In the case you specified:

• The button is clicked, _cardHidden === false;
• The button is NOT clicked, overlay is hidden, still _cardHidden === false;
• The button is clicked, but _cardHidden === false, so the component tries to hide a non existing overlay.

A way to achieve the desired functionality is by subscribing on the onClosed event of the overlay and checking if the card overlay is being closed (since there might be more than 1 overlay on a page). I've adjusted the example, please have a look and let me know if this makes sense.

[corganfuzz]

This works. one question though. As far as I know it is easier to implement IgxToggle instead of IgxOverlay service in addition to an entry component using @inject. so I guess my question is what is the difference beetween IgxToggle and IgxOverlay service , to me they achieve the same (at least in this case) but I could be wrong. In fact IgxToggle seems faster.

[kdinev]

@corganfuzz The igxToggle is a component that uses the igxOverlay service. The overlay itself abstracts positioning, scrolling, stacking, etc. The igxToggle is a base component for all toggle-able components, like dialog, drop down, combo, select (coming up in the next release) and autocomplete (also coming up in next release).

For more details on the differences here's the IgxOverlay spec, and the IgxToggle spec.

[corganfuzz]

@kdinev @ViktorSlavov Thanks. please close this issue.