on 03-15-2017 12:54 PM
Hi,
I'm currently working on a list that items
shows a preview of their content by hovering above them.
Issue:
It worked fine until i had to move it into a fragment (dialog).
There the preview popped up when i hovered above the item and then it closed abruptly. Sometimes it pops up again and closes it self a few times. After it didn't pop up again an error occurs in the console:
"Uncaught TypeError: Cannot read property 'getAttribute' of null
at ns.ProtectableElementDetector.Test (main.js:1847)
at StartProtect (main.js:2173)
at ProcessFocus (main.js:2256)
at main.js:2231"
Code:
extended ListItem:
jQuery.sap.declare("my.app.extendedListItem");
var extendedListItem = sap.ui.core.ListItem.extend("my.app.extendedListItem", {
metadata: {
events: {
"hover": {},
"out": {}
}},
onmouseover: function (evt){
this.fireHover();
},
onmouseout: function (evt){
this.fireOut();
}
});
dialog.fragment.xml:
<core:FragmentDefinition
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:form="sap.ui.layout.form"
xmlns:l="sap.ui.layout"
xmlns:test="my.app">
<Dialog contentWidth="100%" contentHeight="100%" draggable="true" horizontalScrolling="false"
title="Add dialog">
<content>
<ComboBox id="boxTypeQuest" selectedItemId="item1" selectionChange="updateQuestionAnsw">
<items>
<test:extendedListItem text="Computer" key="1" id="__Qitem0" hover="testEvtHov" out="testEvtOut"/>
<test:extendedListItem text="Mouse" key="2" id="__Qitem1" hover="testEvtHov2" out="testEvtOut2"/>
</items>
</ComboBox>
</content>
</Dialog>
</core:FragmentDefinition>
quickView1.fragment.xml
<core:FragmentDefinition
xmlns="sap.m"
xmlns:core="sap.ui.core">
<Popover
showHeader="false"
class="sapUiContentPadding"
placement="PreferredRightOrFlip">
<customHeader></customHeader>
<content>
<Image src="http://www.stromvergleich.org/wp-content/uploads/2011/10/computer.jpg" width="150px"/>
</content>
</Popover>
</core:FragmentDefinition>
controller:
testEvtHov: function (evt)
{
var oButton = evt.getSource();
if (!this._oQuickView)
{
this._oQuickView = sap.ui.xmlfragment("my.app.view.fragments.quickView1", this);
// this.getView().addDependent(this._oQuickView);
}
if (this._oQuickView)
{
jQuery.sap.delayedCall(0, this, function ()
{
this._oQuickView.openBy(oButton);
});
}
},
testEvtOut: function ()
{
if (this._oQuickView)
{
this._oQuickView.close();
}
},
Note:
i figured out that Event-"Out" is triggered right after Event-"Hover" without moving the courser out of the item.
Furthermore if i set a breakpoint at function "testEvtHov" at any position, everything works fine.
I'm using Chrome version 56.0.2924.87.
Do you have any idea, how this happens and how to fix this?
If i missed any important information i will add them.
thanks a lot,
Jan
Most probably you need to set timeout before opening the popover. Something similar to https://embed.plnkr.co/jAFIHK/
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
81 | |
9 | |
9 | |
7 | |
7 | |
7 | |
6 | |
5 | |
5 | |
5 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.