Skip to content

Commit

Permalink
onKeyUp handler is obsolete
Browse files Browse the repository at this point in the history
Button handles enter/space click logic.
onKeyDown is actually enough - quite elegant.
  • Loading branch information
Gilad Gray committed Nov 30, 2018
1 parent 54ba200 commit b99b717
Showing 1 changed file with 1 addition and 28 deletions.
29 changes: 1 addition & 28 deletions packages/core/src/components/forms/numericInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ const NON_HTML_PROPS = [
"stepSize",
];

type ButtonEventHandlers = Required<Pick<React.HTMLAttributes<Element>, "onKeyDown" | "onKeyUp" | "onMouseDown">>;
type ButtonEventHandlers = Required<Pick<React.HTMLAttributes<Element>, "onKeyDown" | "onMouseDown">>;

export class NumericInput extends AbstractPureComponent<HTMLInputProps & INumericInputProps, INumericInputState> {
public static displayName = `${DISPLAYNAME_PREFIX}.NumericInput`;
Expand Down Expand Up @@ -347,7 +347,6 @@ export class NumericInput extends AbstractPureComponent<HTMLInputProps & INumeri
this.handleButtonClick(evt, direction);
}
},
onKeyUp: evt => this.handleButtonKeyUp(evt, direction, this.handleDecrementButtonClick),
onMouseDown: evt => {
this.handleButtonClick(evt, direction);
this.startContinuousChange();
Expand All @@ -369,32 +368,6 @@ export class NumericInput extends AbstractPureComponent<HTMLInputProps & INumeri
this.setState({ isButtonGroupFocused: false });
};

private handleButtonKeyUp = (
e: React.KeyboardEvent,
direction: IncrementDirection,
onClick: React.MouseEventHandler,
) => {
this.updateDelta(direction, e);
// respond explicitly on key *up*, because onKeyDown triggers multiple
// times and doesn't always receive modifier-key flags, leading to an
// unintuitive/out-of-control incrementing experience.
if (Keys.isKeyboardClick(e.keyCode)) {
// prevent the page from scrolling (this is the default browser
// behavior for shift + space or alt + space).
e.preventDefault();

// trigger a click event to update the input value appropriately,
// based on the active modifier keys.
const fakeClickEvent = {
altKey: e.altKey,
currentTarget: e.currentTarget,
shiftKey: e.shiftKey,
target: e.target,
};
onClick(fakeClickEvent as React.MouseEvent);
}
};

private startContinuousChange() {
// The button's onMouseUp event handler doesn't fire if the user
// releases outside of the button, so we need to watch all the way
Expand Down

0 comments on commit b99b717

Please sign in to comment.