-
Notifications
You must be signed in to change notification settings - Fork 265
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
ui5-input to show "quickcard" ui5-popover pointing to an item #1768
Comments
Add "suggestion-item-preview" event to notify when the user navigates to a suggestion item via the ARROW keys, before he/she performs final selection. Related to: #1768
Add "suggestion-item-preview" event to notify when the user navigates to a suggestion item via the ARROW keys, before he/she performs final selection. Related to: #1768
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
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
1. User mouse over/out on an item To handle user mouseover an mouseout, you have to listen for the mouseover and mouseout events as follows: suggestion.addEventListener("mouseover", function (event) {
const targetRef = event.detail.targetRef; // the item rendered in the popover - ui5-li
const item = event.target or event.detail.item // the logical item - ui5-suggestion-item
}); And, to open a popover, pointing to particular suggestion you can use the code below. Pay attention to the event details. suggestion.addEventListener("mouseover", function (event) {
const targetRef = event.detail.targetRef;
quickViewCard.openBy(targetRef, true);
}); |
2. User selects an item with keyboard (but not select yet) To handle user navigation through the items you should listen for the suggestion-item-preview event as follows: <ui5-input id="inputPreview" show-suggestions>
<ui5-suggestion-item text="Cozy"></ui5-suggestion-item>
<ui5-suggestion-item text="Compact"></ui5-suggestion-item>
</ui5-input> inputPreview.addEventListener("suggestion-item-preview", function (event) {
const item = event.detail.targetRef;
quickViewCard.close(false, true, true); // close if already opened by another suggestion
quickViewCard.openBy(item, true); // open with the current one
}); |
3. User presses a key such as Ctrl + Shift + 1 To react on keyboard combinations like Ctrl + Shift + 1 you can listen for the keyup event and check the event.key: inputPreview.addEventListener("keyup", function (event) {
const combination = event.key === "1" && event.shiftKey && event.ctrlKey;
}); And, there is |
Hello @codefactor as we discussed I left few comments above, explaining what we did to address the requests in the current issue. And here is the link to the test page: |
The change is related to the Quick View topic and affects the Input, InputSuggestions and Popover, and enables the following behaviour: (1) open an additional Popover from a suggestion on mouseover and suggestion-item-preview events, (2) to move the focus in that Popover, (3) to keep it open without a visible opener, and (4) the ability to get back via ESC. Add parameter to the openBy method to prevent the popover from closing when its opener is not visible anymore and use the old placement when the opener is gone (by default the popover would go to the top-left most corner). Add public method Popup.prototype.applyFocus (the logic has been extracted from applyInitialFocus) that focuses the first focusable element inside the Popup Change the focus retaining logic in Input/InputSuggestions as follows: returns the focus to the input field only when a suggestion is selected by the user, in other cases - does not, because otherwise focusing another popover would not be possible as the Input keeps getting focus again and again. Previously it was not possible to use the "close" params with the ResponsivePopover, now it forwards them to the Popover. Create a test page to show the entire flow Related to: #1768
The change is related to the Quick View topic and affects the Input, InputSuggestions and Popover, and enables the following behaviour: (1) open an additional Popover from a suggestion on mouseover and suggestion-item-preview events, (2) to move the focus in that Popover, (3) to keep it open without a visible opener, and (4) the ability to get back via ESC. Add parameter to the openBy method to prevent the popover from closing when its opener is not visible anymore and use the old placement when the opener is gone (by default the popover would go to the top-left most corner). Add public method Popup.prototype.applyFocus (the logic has been extracted from applyInitialFocus) that focuses the first focusable element inside the Popup Change the focus retaining logic in Input/InputSuggestions as follows: returns the focus to the input field only when a suggestion is selected by the user, in other cases - does not, because otherwise focusing another popover would not be possible as the Input keeps getting focus again and again. Previously it was not possible to use the "close" params with the ResponsivePopover, now it forwards them to the Popover. Create a test page to show the entire flow Related to: #1768
One more change to address the missing parts in the issue: #1911 test page: |
Can you please help me with some issues I'm having on my The 2 issues I'm having are as follows:
git clone https://github.wdf.sap.corp/xweb/common-webcomponents.git
cd common-webcomponents
git checkout feature/wcQuickcard
npm install
npm start Open: Then search for "ca" in the header --- you can try the following things to notice some issues:
You can see in the
In short, the is passing the |
We prepared a change that makes the Quick View story working at least with the suggestion-item-preview event (still did not find why the mouseover is not fired) #1937 Once opened, both Suggestions Popover and QuickCardView will close if:
Once opened, the QuickCardView remains open and Suggestions Popover closes if:
To open the QuickViewCard (note the the prevent-focus-restore attribute): <ui5-popover prevent-focus-restore>
async _openQuickcardBy(person, targetRef /*, a11yAnnounce*/) {
...
this._getElement("qc").openBy(targetRef, true /* preventInitialFocus */);
} To move the focus from the suggestions to the quickViewCard: <ui5-input @keyup={{_searchKeyup}}>
// Listen to the "keyup" event and if it the special combination is pressed
// focus the quickViewCard (perhaps a check if such is open should be added)
_searchKeyup(evt) {
const combination = evt.key === "1" && evt.ctrlKey && evt.shiftKey;
if (combination) {
this._focusQuickcard();
}
}
_focusQuickcard() {
this._getElement("qc").applyFocus();
} To get back from the quickViewCard to the SearchField on ESC pressed: <ui5-popover prevent-focus-restore @before-close={{_onQuickCardClose}}>
// Listen when the quickViewCard closes and if it closes because of ESC,
// bring the focus to the Search Field
_onQuickCardClose (evt) {
if (evt.detail.escPressed) {
this._focusSearchField();
}
}
_focusSearchField() {
this._getElement("search").focus();
} |
Hello Scott, your mouseover handler was not called, because it was not bound to the correct context. You have "each" statement in "each" statement in the Template, whereas the "_suggestionPreview" is available at the root context. <ui5-suggestion-item @mouseover="{{../../context._suggestionPreview}}">
{{this.label}}
</ui5-suggestion-item> When you make it work you will see that the "item.getAttribute" in the handler fails, because the "mouseover" event does not provide the "item" detail param (as suggestionitemPreview), we will make it available so your code can handle both the and mouseover events the same way. const { targetRef, item } = evt.detail;
const path = item.getAttribute("data-path"); |
Here is the interaction after we merge the change mentioned |
Another PR to address the "QuickCardView" topic. The change keeps the Popover open, without an opener, if the focus is inside that popover. add prevent-focus-restore protected property in addition to the preventFocusRestore param of Popup.prototype.close method, because the quickCardView might close due to user interaction - click, TAB, ESC. remove the recently added _closeWithOpener param, as now the popover without an opener would remain open if the focus is inside it and will be closed otherwise. QuickCardView Interaction (test it on http://localhost:8080/test-resources/pages/Input_quickview.html) Once opened, both Suggestions Popover and QuickCardView will close if: neither the SearchField nor the QuickCardView has the focus, because the user clicks somewhere outside or the user uses the TAB | SHIFT + TAB and the focus is somewhere else Once opened, the QuickCardView remains open and Suggestions Popover closes if: the focus moves to the QuickCardView, because the Popover.prototype.applyFocus method is called, the user clicks inside the QuickCardView or the user uses the TAB | SHIFT + TAB key and the focus is goes inside the QuickCardView Closes: #1768
Is your feature request related to a problem? Please describe.
The requirement is that when the user does a search on the ui5-shellbar, and then he does either of the following:
He is then indicating that he wants more information on this search result item - and we should show a
<ui5-popover>
that points to the search result item with more information. If he subsequently types the special keystrokeCtrl + Shift + 1
this will focus onto the Quick Card and allow him to navigate through the quick card (meanwhile the input loses focus, and the search results will disappear). Pressing Escape key will then close the Quick Card and focus back onto the Search Input -- it is questionable if at this point the user must retype his search or not, but in an ideal world it would open back to the previous search state as before he typedCtrl + Shift + 1
However, there are several issues with our attempt to solve this with out of the box web components:
<ui5-li>
tags that are part of the<ui5-input>
, such asonmouseover
for example, do not make it into the static area clone of the<ui5-li>
and so we do not get any mouse event callbacks using this approachDescribe the solution you'd like
Can we get events for things like:
Ctrl + Shift + 1
Describe alternatives you've considered
None yet
Additional context
The above shows the legacy quickcard, likely the new one will look a little different. The quick card is only aligned with the search item, the new one will be a popover with a pointer.
The text was updated successfully, but these errors were encountered: