close autocomplete when click outside of iframe #1651
Conversation
|
It looks like unit tests are failing |
| @@ -245,6 +245,11 @@ export default class AutoCompleteComponent extends Component { | |||
| } | |||
| this.close(); | |||
| }); | |||
| if (document !== window.parent.document) { | |||
| window.parent.document.addEventListener('click', () => { | |||
There was a problem hiding this comment.
I don't think this will work if the parent site is on a different origin than the iframe. The javascript API for accessing window.parent is restricted for cross origin scripting. If you look at the same-origin policy here, it lists window.parent as read only. You can try testing this by serving the iframe test page on a different port than test-site itself
There was a problem hiding this comment.
it seems to work ok when I serve the iframe.js script from a different port, and use it in test-site iframe_page? I will take another look into cross origin restriction.
There was a problem hiding this comment.
In the past I would generally test cross origin issues by hosting a site on SGS and pointing a local iframe_test page to the hosted iframe script. If you try modifying window.parent, will that break? If it doesn't break then maybe it's not considering it as cross origin and we'll have to test on SGS
There was a problem hiding this comment.
It may be that read-only is not as restrictive as we think. Perhaps we can't assign to properties of window.parent but maybe we can still invoke methods on the parent? So definitely worth verifying as Connor outlined.
If we cannot invoke addEventListener on the parent here, I'm struggling to think of how we'd accomplish this item. If the parent were to add some code we could, but if the iFrame can't reliably access the parent, we can't tell when a click event happens on the parent.
There was a problem hiding this comment.
connor is right, seems like there's cross origin issue with this approach when I tested with SGS site. I put up a pr with a different solution in theme that would have cross origin issue: yext/answers-hitchhiker-theme#1034.
add an additional click event listener for parent window to close autocomplete when click outside of iframe page
J=SLAP-1182
TEST=manual
use local SDK with theme test-site. In iframe_test page and normal pages, see autocomplete closes as expected when click outside of the autocomplete container, inside and outside of iframe.