+ {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
+
+ {selectedItems.map((selectedItem, index) => (
+
+ ))}
+
+ {
+ // blur: if the dropdown isn't visible, try to create a new item using inputValue
+ if (!showDropdownItems) {
+ addNewItem(inputValue, false)
+ }
+ },
+ onKeyDown: event => {
+ switch (event.key) {
+ case 'Enter':
+ // Enter: always prevent form submission
+ event.preventDefault()
+ event.stopPropagation()
+ break
+
+ case 'Tab':
+ // Tab: if the dropdown isn't visible, try to create a new item using inputValue and prevent blur if successful
+ if (!showDropdownItems && addNewItem(inputValue)) {
+ event.preventDefault()
+ event.stopPropagation()
+ }
+ break
+
+ case ',':
+ // comma: try to create a new item using inputValue
+ event.preventDefault()
+ addNewItem(inputValue)
+ break
+ }
+ },
+ onPaste: event => {
+ const data =
+ // modern browsers
+ event.clipboardData?.getData('text/plain') ??
+ // IE11
+ window.clipboardData?.getData('text')
+
+ if (data) {
+ const emails = data
+ .split(/\s*,\s*/)
+ .filter(item => item.includes('@'))
+
+ if (emails.length) {
+ // pasted comma-separated email addresses
+ event.preventDefault()
+
+ for (const email of emails) {
+ addNewItem(email)
+ }
+ }
+ }
+ }
+ })
+ )}
+ />
+
+
+
+
+ {showDropdownItems &&
+ filteredOptions.map((item, index) => (
+
+ ))}
+
+
+