Disabled input still focusable in Firefox

Question

Minimal example

let input = document.createElement("input");
input.id = "input";   
input.type = "number";
input.className = "number-input";
input.disabled = true;     
document.body.appendChild(input);

.number-input:focus {
  background: yellow;
}
.number-input {             
  -moz-appearance: textfield;     
} 

<button onClick="document.getElementById('input').disabled = false">
Enable
</button>

<button onClick="document.getElementById('input').disabled = true">
Disable
</button>

The created input is semi-disabled on start, i. e. you can click on it and it turns yellow (gets focus), but you can't write a number into it. However after clicking Enable followed by Disable button, it is as disabled as expected. It seems to be a bug that involves the input.type = "number" and the browser specific -moz-appearance: textfield, that I use to hide the up and down buttons.

Any ideas how to really disable the input field, when the page is loaded?

Answer 1

Adding input[disabled] {pointer-events:none} to the CSS seems to fix this. Not sure why Firefox still allows initial focus like that.

However, this CSS fix will only work in browsers that support pointer-events property. There is poor IE support (only 11). There's also a user-select property that may work (haven't tested it) but that still allows the input's data to be submitted in a form, and again may be restricted based on browser support.

A third (likely non-recommended) option would be to (when disabled) have an element in-front of the input to catch the clicks, but that's a pretty messy way to solve it.

Another possibility: when disabling, you could have your JS also apply different property/value for .number-input:focus

let input = document.createElement("input");
input.id = "input";   
input.type = "number";
input.className = "number-input";
document.body.appendChild(input);
input.disabled = true;

.number-input:focus {
  background: yellow;
}
.number-input {             
  -moz-appearance: textfield;     
} 

input[disabled] {pointer-events:none}

<button onClick="document.getElementById('input').disabled = false">
Enable
</button>

<button onClick="document.getElementById('input').disabled = true">
Disable
</button>

Answer 2

In Firefox it helps me to set disabled as input.disabled. Don't ask me why :-)

let input = document.createElement("input");
input.id = "input";   
input.type = "number";
input.className = "number-input";
input.disabled; // here instead of input.disabled = true     
document.body.appendChild(input);

.number-input:focus {
  background: yellow;
}
.number-input {             
  -moz-appearance: textfield;     
} 

<button onClick="document.getElementById('input').disabled = false">
Enable
</button>

<button onClick="document.getElementById('input').disabled = true">
Disable
</button>