Search code examples
sapui5

How to register contextmenu event if cell of sap.ui.table is of type input


I try to get an context menu on a table cell which is of type input. The right mouse click only works in the part outside of the input field.

Is there a way to propergate the event from the input field to the cell below? Also there does not seem to be an click event on an input field.

My tries can be seen in the plnkr

https://plnkr.co/edit/BMozXm7uRPNlgzUf

codewise:

                        <t:Table rows="{/}" visibleRowCount="100"
                        minAutoRowCount="10" visibleRowCountMode="Auto" id="table0"
                        filter="onTableFilter" class="sapUiNoMargin sapUiNoContentPadding"
                        beforeOpenContextMenu="onContextMenu">
                        <t:columns>
                            <t:Column width="4em" filterProperty="CompCode" 
                                sortProperty="CompCode" resizable="true" autoResizable="true"
                                class="sapUiLargeNegativeMarginBeginEnd"
                                click="oninputclick"
                                press="oninputclick">
                                <Label text="Comp Code" wrapping="true" class="test_maybe_he"/>
                                <t:template>
                                    <Input value="{CompCode}" class="test_maybe_he" click="oninputclick"
                                press="oninputclick"/>
                                </t:template>
                            </t:Column>

I have the beforeOpenContextMenu="onContextMenu" in the table tag. And click="oninputclick" press="oninputclick" in the input tag.

right click is only registerd outside of the input field. (In the sapui5 samples with an Text tag it seems to work.)


Solution

  • I suggest a custom control which inherits from sap.m.Input.

    This control should have a new event (e.g. rightPress) and this event should be fired when the native browser event onContextMenu is triggered. Also the native context menu should not be shown.

    sap.ui.define([
        "sap/m/Input"
    ], function (Input) {
        "use strict";
    
        return Input.extend("gsan.ruleedit.control.MyInput", {
            metadata: {
                events: {
                    rightPress: {}
                }
            },
    
            renderer: {},
    
            oncontextmenu: function(oEvent) {
                this.fireRightPress();
                oEvent.preventDefault();
            }
        });
    });
    

    You can then use your custom control like any other

    <mvc:View xmlns:my="gsan.ruleedit.control"
        ... />
    
        <my:MyInput value="{CompCode}" rightPress="onContextMenu" />
    

    Working sample: https://plnkr.co/edit/XAfC7SGpdf3RxiDF