SAPUI5 doesn't handle onclick event in disabled HTML element

Question

I'm developing a SAPUI5 application. And in the page, the user has to select an item from select_A before he/she selects from select_B. Until he/she selects from select_A, the select_B box is disabled.

What I would like to have is: even when the select_B box is disabled, and the user tries to click it before selecting from select_A, the select_A box should become red.

I tried using onclick event, but, when the box is disabled, it doesn't do anything.

Only as a test, I made this:

oSelectTamanho = new sap.m.Select();
oSelectTamanho.onclick = function() {
  console.log("click");
}

As I mentioned, it only outputs the "click" when the box is enabled, and I would need this when the box is disabled.

Do you have any idea how can I achieve this?

Please consider accepting https://stackoverflow.com/a/66222770/5846045 instead. The current accepted answer encourages working with rendered HTMLElement directly which should be avoided in UI5. — Boghyon Hoffmann, Feb 16 '21 at 10:39

score 0 · Answer 1 · answered Feb 16 '21 at 10:36

Here is a working example using a single SAPUI5 framework API (oElement.addEventDelegate): https://jsbin.com/zuramop/edit?js,output.

myDisabledControl.addEventDelegate({
  onclick:/*or ontap: */() => alert("Select that other item first!"),
});
^{(See the API reference of sap/ui/events/ControlEvents.events for other available events.)}

Please do not manipulate the HTML element of UI5 controls directly!

Xotic750 · Accepted Answer · 2014-07-18T11:47:28.073

As you see, disabled elements do not produce events. Using an overlay element is one possible solution. Example using an overlay div.

CSS

#wrapper {
    display:inline-block;
    position:relative;
}
#overlay {
    display:none;
    width:100%;
    height:100%;
    position:absolute;
    top:0
    left:0;
    bottom:0;
    right:0;
}
#cars:disabled + #overlay {
    display:block;
}

HTML

<button id="button">Enable</button>
<div id="wrapper">
    <select id="cars" disabled>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </select>
    <div id="overlay"></div>
</div>

Javascript

var button = document.getElementById('button'),
    cars = document.getElementById('cars'),
    overlay = document.getElementById('overlay');

button.addEventListener('click', function () {
    cars.disabled = !cars.disabled;
    if (cars.disabled) {
        button.textContent = 'Enable';
    } else {
        button.textContent = 'Disable';
    }
}, true);

cars.addEventListener('change', function (evt) {
    console.log(evt.target.value);
}, true);

overlay.addEventListener('click', function () {
    alert('Disabled');
}, true);

On jsFiddle

SAPUI5 doesn't handle onclick event in disabled HTML element

2 Answers2

Linked