Question

我的响应式弹出窗口面临着一个奇怪的问题。当我从ComboxBox中选择一个项目时，它会自动关闭。

我不想要其他UI被阻止的模态。单击任意位置应关闭弹出窗口。我无法找到问题的根本原因。

以下是编码细节：

实例化Popover：

                openFilter : function( oEvent ){
                    if (!this.actionPopUpFragment) {
                        this.getView().addDependent(this.actionPopUpFragment, this);
                        //this._oPopover.bindElement("/ProductCollection/0");

                    }
                    var oButton = oEvent.getSource();
                    // jQuery.sap.delayedCall(0, this, function () {
                        this.actionPopUpFragment.openBy(oButton);
                        if (this.actionPopUpFragment._oControl && this.actionPopUpFragment._oControl.oPopup) {
                            // this.actionPopUpFragment._oControl.oPopup.setAutoClose(false);
                        }
                    // });
            },

Fragment.xml：

<core:FragmentDefinition
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:core="sap.ui.core">
<ResponsivePopover
    class=" formPopup"
    placement="Bottom"
    contentWidth='30rem'
    showCloseButton='true'
    contentHeight='27rem'
    showHeader='false'
    afterOpen='onAfterOpen'>
    <content>
        <mvc:XMLView class="formBox" viewName="sap.hana.cst.common.graph/ui/form"/> 

    </content>
</ResponsivePopover>

查看嵌入的内部片段：

<mvc:View height="100%" controllerName="sap.hana.cst.common.graph.controller.Form" 
xmlns:mvc="sap.ui.core.mvc" 
xmlns="sap.m" 
xmlns:table="sap.ui.table" 
xmlns:core="sap.ui.core" 
xmlns:form="sap.ui.layout.form" 
xmlns:html="http://www.w3.org/1999/xhtml"                      
xmlns:control = "sap.hana.cst.common.graph.control">
<Page showHeader='true' class='pageClass'>
    <ComboBox class='OperatorClass' selectedKey="{operator}" items="{
                    path: 'optionsModel>/operators',
                    sorter: { path: 'operatorModel>text' }
                  }">
        <core:Item key="{optionsModel>key}" text="{optionsModel>text}" />

    </ComboBox>
</Page>

测试数据：

var aOperators = [
            {
                    key:"EqualsTo",
                    text:"="
            },
            {
                    key:"NotEqualsTo",
                    text:"!="
            },
            {
                    key:"GreaterThan",
                    text:">"
            },
            {
                    key:"LessThan",
                    text:"<"
            },
            {
                    key:"GreaterThanOrEqualsTo",
                    text:">="
            },
            {
                    key:"LessThanOrEqualsTo",
                    text:"<="
            }
        ];


        var oOptionsModel = new sap.ui.model.json.JSONModel({operators: aOperators});
        this.getView().setModel(oOptionsModel, "optionsModel");

错误GIF： for each

Answer 1

这可以帮助您解决问题

$('#popoverId').popover({
    html: true,
    title: 'Popover Title<a class="close" href="#");">&times;</a>',
    content: $('#popoverContent').html(),
});

$('#popoverId').click(function (e) {
    e.stopPropagation();
});

$(document).click(function (e) {
    if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) {
        $('#popoverId').popover('hide');
    }

Answer 2

我找到了一个优雅的解决方案。 PopOver的源代码给出了指出问题的宝贵提示。

PopOver.js -> onFocusEvent()
// focus/blur for handling autoclose is disabled for desktop browsers which are not in the touch simulation mode
// create timeout for closing the popup if there is no focus immediately returning to the popup

意味着，您需要在用户交互或立即加载数据后重新调整PopOver的焦点。 PopOver的自动关闭功能正在使用计时器。在我的情况下，我的后端通话延迟了几秒钟。.由于我将PopOver重新定位为之前，我进行了后端通话，所以一切正常。

我认为您的示例中存在相同的问题。也许您将后端数据加载到组合中。只需在后端调用之前添加this.byId("myPopOver").focus()，组合就不会自动关闭。

Popover关闭选择ComboBox

2 个答案: