0

I have a lightning:inputField within a lightning:recordEditForm. How can I disable the increment and decrement buttons for ALL fields that render a number? I tried setting the class conditionally to slds-input and slds-input_bare but no luck. Also note that I have other lightning:inputFields on the page that render a date, picklist, lookups etc which must work as is.

enter image description here

3
  • 1
    Looks like it can be done through CSS Can I hide the HTML5 number input’s spin box? so you have lots of choices over which input elements you apply this to via CSS selectors.
    – Keith C
    May 15, 2018 at 19:57
  • 1
    I agree with Keith. It's nothing to do with lightning component. It is HTML 5 behavior and can be tweaked using css.
    – Himanshu
    May 15, 2018 at 20:00
  • Thanks. I was able to hide the increment/decrement spin box, BUT the number still increments and decrements when I scroll within the textbox with my mouse's scroll wheel. Is there a way to completely disable this functionality as opposed to just hiding it via CSS? May 16, 2018 at 17:39

3 Answers 3

2

Got this to work in entirety. There are two steps involved:

Step 1: Hide the functionality. Credits to Keith and Himanshu for steering me in the right direction.

To hide the spin box from the UI, put this in STYLE section of your component:

.THIS input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

.THIS input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

Step 2: Disable the functionality. The above just hides the spin box, but the actual functionality still works (i.e. the number changes) when user scrolls using mouse wheel within the textbox or press up/down arrow keys. To remedy that, put this in RENDERER section of your component (or perhaps in the init handler instead?):

afterRender: function (component, event, helper) {
    this.superAfterRender();

    //disable up, down, right, left arrow keys
    window.addEventListener("keydown", function(e) {
        if([37, 38, 39, 40].indexOf(e.keyCode) > -1) {
            e.preventDefault();
        }
    }, false);

    //disable mousewheel
    window.addEventListener("mousewheel", function(e) {
        e.preventDefault();
    }, false);

    window.addEventListener("DOMMouseScroll", function(e) {
        e.preventDefault();
    }, false);

},
0

Worked for me with a small change. You can disable using css.

.THIS input::-webkit-outer-spin-button {
    display:none;
}

.THIS input::-webkit-inner-spin-button {
    display:none;
}
0

You can disable the increment buttons with CSS. Like this:

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .