onKeyUp

The onKeyUp prop in the ReactMultiEmail component is designed to handle events occurring when a user releases a keyboard key. This callback is invoked every time a key is released, with the KeyboardEvent object provided as an argument detailing the specific key release event.

This prop allows the seamless integration of user-provided onKeyUp handlers with the component's internal mechanism, handleOnKeyUp, ensuring the synchronous execution of both the inherent component operations and any external logic associated with the onKeyUp prop upon the release of a key.

About onKeyUp

• Property: onKeyUp
• Type: (evt: React.KeyboardEvent) => void;
• Default: undefined

Demo

react-multi-email

Input your Email Address

react-multi-email value

empty

currentKey(keyDown):

currentKey(keyUp):

info

onKeyUp is triggered upon the release of a key, and hence, executes subsequent to onKeyDown. Experiment with this behavior in the demo above by continuously pressing the backspace key after entering long words.

Code

Full code

OnKeyUp.tsx

import * as React from 'react';
import { ReactMultiEmail } from 'react-multi-email';
import 'react-multi-email/dist/style.css';

export default function multiEmail() {
  const [emails, setEmails] = React.useState<string[]>([]);
  const [currentKeyDown, setCurrentKeyDown] = React.useState<string>("");
  const [currentKeyUp, setCurrentKeyUp] = React.useState<string>("");

  const onKeyDownFunc = (event: React.KeyboardEvent<HTMLInputElement>) => {
    console.log(event.key);
    setCurrentKeyDown(event.key);
  };

  const onKeyUpFunc = (event: React.KeyboardEvent<HTMLInputElement>) => {
    console.log(event.key);
    setCurrentKeyUp(event.key);
  };

  return (
    <div style={styles}>
      <h3>react-multi-email</h3>
      <ReactMultiEmail
        // onKeyup prop
        onKeyUp={onKeyUpFunc}
        onKeyDown={onKeyDownFunc}
        placeholder="Input your Email Address"
        emails={emails}
        onChange={(_emails: string[]) => {
          setEmails(_emails);
        }}
        getLabel={(
          email: string,
          index: number,
          removeEmail: (index: number) => void
        ) => {
          return (
            <div data-tag key={index}>
              {email}
              <span data-tag-handle onClick={() => removeEmail(index)}>
                ×
              </span>
            </div>
          );
        }}
      />
      <h4>react-multi-email value</h4>
      <p>{emails.join(", ") || "empty"}</p>
      <div>currentKey(keyDown): {currentKeyDown}</div>
      <div>currentKey(keyUp): {currentKeyUp}</div>
    </div>
  );
}

const styles = {
  fontFamily: "sans-serif",
  width: "500px",
  border: "1px solid rgb(238, 238, 238)",
  background: "rgb(243, 243, 243)",
  padding: "25px",
  margin: "20px",
  color: "black",
};

Code snippet

OnKeyUp.tsx

const onKeyUpFunc = (event: React.KeyboardEvent<HTMLInputElement>) => {
  // do something
};

<ReactMultiEmail
  onKeyUp={onKeyUpFunc}
  // other props...
/>

Internal logic code (handleOnKeyUp)

ReactMultiEmail.tsx

const handleOnKeyup = React.useCallback(
  async (e: React.KeyboardEvent<HTMLInputElement>) => {
    onKeyUp?.(e);

    switch (e.key) {
      case 'Enter':
        await findEmailAddress(e.currentTarget.value, true);
        break;
      default:
    }
  },
  [findEmailAddress, onKeyUp],
);