Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

close autocomplete when click outside of iframe #1651

Closed
wants to merge 2 commits into from
Closed

close autocomplete when click outside of iframe #1651

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
66e6272
close autocomplete when click outside of iframe
Jan 13, 2022
da5f2a7
check for parent
Jan 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions src/ui/components/search/autocompletecomponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,6 +245,11 @@ export default class AutoCompleteComponent extends Component {
}
this.close();
});
if (document !== window.parent.document) {
window.parent.document.addEventListener('click', () => {
Copy link
Member

@cea2aj cea2aj Jan 13, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

this.close();
});
}

// When a user focuses the input, we should populate the autocomplete based
// on the current value
Expand Down