1

I have this input field and want to make the up and down arrow keys not do the default increment/decrement by one as I want to use those keys for some higher level navigation instead:`

<lightning-input
    type="number"
    onkeydown={handleKeyDown}
    onkeyup={handleKeyUp}
    onkeypress={handleKeyPress}
    ...
</lightning-input>

Adding code like this:

const UP_ARROW_KEY_CODE = 38;
const DOWN_ARROW_KEY_CODE = 40;

if (event.keyCode === UP_ARROW_KEY_CODE || event.keyCode === DOWN_ARROW_KEY_CODE) {
    // Stop the event's default behaviour
    event.preventDefault();
    // Stop the event from bubbling up in the DOM
    event.stopPropagation();
}

to all of the event handlers does not stop the increment from occurring. Removing the keyCode filtering, characters such as digits are however thrown away; seems like the arrow keys have different behaviour either in LWC or in the underlying browser.

How can I stop the up/down arrows from causing the increment/decrement?

PS

Looking at event.target.value in the event handlers, the increment/decrement has already been done before the event handlers run...

PPS

From further Googling, looks like the increment/decrement is one of the package of features you get when you use <input type="number" ... with apparently no way to switch it off (except by changing to type="text").

5
  • I took a peek at the open source component, it doesn't appear to handle these events explicitly. This may be a framework limitation regarding how events propagate in LWR? Try using a direct input element to see if this fixes things. If so, you can build a custom input using the SLDS blueprint for forms and inputs.
    – sfdcfox
    Commented May 22 at 20:37
  • 1
    Thanks @sfdcfox, I'll give that a go but suspect this behaviour is wired in at the browser level.
    – Keith C
    Commented May 22 at 21:24
  • Tried a <input type="number" ... (though with a bit less care) and that displays with the up/down buttons to the right and the up/down keys increment and decrement. So don't think this relates to LWC @sfdcfox so it is what it is.
    – Keith C
    Commented May 22 at 21:42
  • Oh, maybe I misread. If you're using those buttons, they're not key presses. Try maybe oncommit or oninput instead?
    – sfdcfox
    Commented May 22 at 22:08
  • Right now I'm thinking of using WASD or IJKL as described here Arrow Keys as the input fields I'm trying to navigate between are all numeric only.
    – Keith C
    Commented May 22 at 22:15

1 Answer 1

0

One approach...

I've given up on the up and down arrows and am using the w, a, s, d keys for up, left, down, right given some precedent for that.

Can't use the i, j, k, l keys as k is a shortcut for a thousand so turns e.g. 2.5k into 2,500.

Another approach...

Follow this advice to use type="text" and inputmode="decimal" and a pattern instead. But then you also lose e.g. the "k" and "m" shortcuts for thousands and millions.

My current approach...

I'm storing the changed value for all change cases except where the up/down arrows are used and on save setting that stored value. You get a momentary flash of the increment/decrement but the final value is correct.

You must log in to answer this question.

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