chore: Add onEnter and onEscape to Input Component

[camielvs]

Description

Add native onEnter and onEscape handlers to Input component to streamline use of these common actions.

Related Issue and Pull requests

Type of Change

• Cleanup/Refactor

Checklist

• I have tested this does not break current pipelines / runs functionality
• I have tested the changes on staging

Screenshots (if applicable)

Test Instructions

• All affected input fields should behave as expected

Additional Comments

[camielvs]

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

• chore: Add onEnter and onEscape to Input Component #1850 👈 (View in Graphite)
• feat: Submit Pipeline Tags on Runs #1849
• feat: Pipeline Tags #1848
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

[maxy-shpfy]

I do like the idea - simplifies a lot. I noticed that in most cases onEnter means "onSave" and "onEscape" means "onCancel". So maybe we should name them same way?

E.g. in InlineTextEditor same named as "onSave" and "onCancel" - we may introduce naming inconsistencies or establish a good convention.

[camielvs]

Maybe... I can see the merit in this. onSave and onClose and more descriptive and nicer to work with.

One thing I like about onEnter and onEscape is that its syntactically ambiguous and thus does not assume anything about what the keys are doing. If we ever need to use the enter key or escape key for actions other than the typical save/close then it's clear how to go about achieving this and we wouldn't need to add any additional logic.

My gut feeling for now is to keep as-is but I am not attached. If you feel strongly about switching to onSave and onClose then I am happy to change.

[github-actions]

🎩 To tophat this PR:

You can add the following URL parameter to your browser to tophat this PR:

`?tophat_location=02-23-chore_add_onenter_and_onescape_to_input_component/422e5be`

---

[maxy-shpfy]

NIT: onKeyDown might be overridden if to provide props. We may make it safe. But up to you

function Input({
  className,
  type,
  readOnly,
  variant = readOnly ? "readOnly" : "default",
  onEnter,
  onEscape,
  onKeyDown,
  ...props
}: ...) {
  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter" && onEnter) {
      e.preventDefault();
      e.stopPropagation();
      onEnter();
    } else if (e.key === "Escape" && onEscape) {
      e.preventDefault();
      e.stopPropagation();
      onEscape();
    }
    onKeyDown?.(e);
  };

  return (
    <input
      ...
      onKeyDown={handleKeyDown}
      {...props}  // no longer contains onKeyDown
    />
  );
}