SAPUI5 doesn’t handle onclick event in disabled HTML element Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of SAPUI5 doesn’t handle onclick event in disabled HTML element without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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?

Answer

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

We are here to answer your question about SAPUI5 doesn’t handle onclick event in disabled HTML element - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji