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.

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

feat(ui5-suggestion-item): enable mouseover|out events #1784

Merged
merged 4 commits into from
Jun 15, 2020

Conversation

ilhan007
Copy link
Member

@ilhan007 ilhan007 commented Jun 12, 2020

The user can now bind for mouseover and mouseout events on the ui5-suggestion-item elements and perform some other action. For example: opening another popover, pointing to particular suggestion, when hovered.

FIXES: #1768

<ui5-input id="inputPreview" show-suggestions>
	<ui5-suggestion-item class="suggestionItem" text="Cozy"></ui5-suggestion-item>
	<ui5-suggestion-item class="suggestionItem" text="Compact"></ui5-suggestion-item>
         ...
</ui5-input>
[].slice.call(document.querySelectorAll(".suggestionItem")).forEach(function(el) {
		suggestion.addEventListener("mouseover", function (event) {
			const targetRef = event.detail.targetRef;
			popover.openBy(targetRef, true /* prevent initial focus */); // open popover
		});
			
		suggestion.addEventListener("mouseout", function (event) {
			popover.close(false, true, true); // close popover
		});
});

@ilhan007 ilhan007 merged commit 4359b9a into master Jun 15, 2020
@ilhan007 ilhan007 deleted the feat-input-suggestion branch June 15, 2020 07:03
ilhan007 added a commit that referenced this pull request Jun 15, 2020
The user can now bind for mouseover and mouseout events on the ui5-suggestion-item elements and perform some other action. For example: opening another popover, pointing to particular suggestion, when hovered.

FIXES: #1768
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

ui5-input to show "quickcard" ui5-popover pointing to an item
2 participants