diff --git a/src/components/MultiEmailInput/constants.jsx b/src/components/MultiEmailInput/constants.jsx index 7afc0f64..d8af8ea7 100644 --- a/src/components/MultiEmailInput/constants.jsx +++ b/src/components/MultiEmailInput/constants.jsx @@ -131,17 +131,25 @@ const SelectContainer = props => ( /> ); -const Input = props => ( - { - const clipboardData = e.clipboardData.getData("Text"); +const Input = props => { + const handlePaste = event => { + const { handleEmailChange } = props.selectProps; - setTimeout(() => props.selectProps.handleEmailChange(clipboardData)); - }} - /> -); + const text = event.clipboardData.getData("Text"); + if (!EMAIL_REGEX.test(text)) return; + + event?.preventDefault(); + setTimeout(() => handleEmailChange(text)); + }; + + return ( + + ); +}; export const EMAIL_REGEX = new RegExp( "^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,}$", diff --git a/src/components/MultiEmailInput/index.jsx b/src/components/MultiEmailInput/index.jsx index 7d34a129..504fb1f0 100644 --- a/src/components/MultiEmailInput/index.jsx +++ b/src/components/MultiEmailInput/index.jsx @@ -48,6 +48,7 @@ const MultiEmailInput = forwardRef( const [inputValue, setInputValue] = useState(""); const [isFocused, setIsFocused] = useState(false); const [duplicateEmails, setDuplicateEmails] = useState([]); + const [isMenuOpen, setIsMenuOpen] = useState(false); const isCounterVisible = !!counter && @@ -73,6 +74,7 @@ const MultiEmailInput = forwardRef( onChange(uniqueEmails); setDuplicateEmails(duplicates); setInputValue(""); + setIsMenuOpen(false); }; const handleKeyDown = event => { @@ -169,6 +171,7 @@ const MultiEmailInput = forwardRef( classNamePrefix="neeto-ui-react-select" components={CUSTOM_COMPONENTS} isDisabled={disabled} + menuIsOpen={isMenuOpen} className={classnames( "neeto-ui-react-select__container neeto-ui-react-select__container--medium neeto-ui-email-input__select", { "neeto-ui-react-select__container--error": !!error } @@ -182,8 +185,11 @@ const MultiEmailInput = forwardRef( }} onBlur={handleBlur} onFocus={() => setIsFocused(true)} - onInputChange={inputValue => setInputValue(inputValue)} onKeyDown={handleKeyDown} + onInputChange={inputValue => { + setIsMenuOpen(Boolean(inputValue)); + setInputValue(inputValue); + }} {...{ handleEmailChange, inputValue, diff --git a/tests/MultiEmailInput.test.jsx b/tests/MultiEmailInput.test.jsx index 1a251888..3edbb5f5 100644 --- a/tests/MultiEmailInput.test.jsx +++ b/tests/MultiEmailInput.test.jsx @@ -290,4 +290,26 @@ describe("MultiEmailInput", () => { { label: "email@domain.com", valid: true, value: "email@domain.com" }, ]); }); + + it("should not render the menu when clicked on the input field", async () => { + const onChange = jest.fn(); + const selectedEmails = SAMPLE_EMAILS.slice(0, 2); + const { container } = render( + + ); + const emailInput = screen.getByRole("combobox"); + await userEvent.click(emailInput); + expect( + container.querySelector(".neeto-ui-react-select__menu") + ).not.toBeInTheDocument(); + + await userEvent.type(emailInput, "test"); + await expect( + container.querySelector(".neeto-ui-react-select__menu") + ).toBeInTheDocument(); + }); });