SAPUI5: Hover issue, Popover opens and closes abruptly.

[former_member399929]

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

[former_member253655]

Most probably you need to set timeout before opening the popover. Something similar to https://embed.plnkr.co/jAFIHK/