InputChips: trim before validate, no comma if pasting (#505)

Author: mdodgelooker

CHANGELOG.md

@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [UNRELEASED]
+
+### Added
+
+- `InputChips` now immediately converts pasted content to chips instead of waiting for a comma as it does when the user is typing.
+
+### Fixed
+
+- `InputChips` now trims whitespace from each value before calling `validate`.
+
 ## [0.7.16] - 2020-01-30
 
 ### Fixed

packages/components/src/Form/Inputs/InputChips/InputChips.test.tsx

@@ -51,17 +51,27 @@ test('values are added when a comma is last character entered', () => {
     <InputChips onChange={onChangeMock} values={[]} placeholder="type here" />
   )
   const input = getByPlaceholderText('type here')
-  // values not yet added if user pastes comma separated list
-  fireEvent.change(input, { target: { value: 'tag1,tag2' } })
-  expect(onChangeMock).not.toHaveBeenCalled()
 
-  // if the last character is a comma, values are added
-  fireEvent.change(input, { target: { value: 'tag1,tag2,' } })
+  // if the last character entered is a comma, values are added
+  fireEvent.change(input, { target: { value: 'tag1,' } })
   expect(onChangeMock).toHaveBeenCalledTimes(1)
-  expect(onChangeMock).toHaveBeenCalledWith(['tag1', 'tag2'])
+  expect(onChangeMock).toHaveBeenCalledWith(['tag1'])
   expect(input).toHaveValue('')
 })
 
+test('values are added when pasting', () => {
+  const onChangeMock = jest.fn()
+  const { getByPlaceholderText } = renderWithTheme(
+    <InputChips onChange={onChangeMock} values={[]} placeholder="type here" />
+  )
+  const input = getByPlaceholderText('type here')
+  fireEvent.paste(input)
+  // If a paste is detected before the value change
+  // no need for the last character to be a comma
+  fireEvent.change(input, { target: { value: 'tag1, tag2' } })
+  expect(onChangeMock).toHaveBeenCalledWith(['tag1', 'tag2'])
+})
+
 test('values are added on blur', () => {
   const onChangeMock = jest.fn()
   const { getByPlaceholderText } = renderWithTheme(
@@ -151,7 +161,8 @@ test('new values are validated', () => {
   expect(input).toHaveValue('tag2')
   expect(onInvalidMock).toHaveBeenCalledWith(['tag2'])
 
-  fireEvent.change(input, { target: { value: 'tag1,' } })
+  // value should be trimmed before validation
+  fireEvent.change(input, { target: { value: ' tag1,' } })
   expect(onChangeMock).toHaveBeenCalledTimes(1)
   expect(onChangeMock).toHaveBeenCalledWith(['tag1'])
   expect(input).toHaveValue('')
@@ -171,7 +182,8 @@ test('duplicate values are not added', () => {
   )
   const input = getByPlaceholderText('type here')
 
-  fireEvent.change(input, { target: { value: 'tag1,' } })
+  // value should be trimmed before validation
+  fireEvent.change(input, { target: { value: ' tag1,' } })
   expect(onChangeMock).toHaveBeenCalledTimes(0)
   expect(onDuplicateMock).toHaveBeenCalledWith(['tag1'])
   expect(input).toHaveValue('tag1')

packages/components/src/Form/Inputs/InputChips/InputChips.tsx

@@ -63,16 +63,17 @@ function getUpdatedValues(
   // Values may be separated by ',' '\t' and ' '
   const inputValues: string[] = inputValue.split(/[,\t]+/)
   inputValues.forEach((val: string) => {
-    if (val.trim() === '') return
+    const trimmedValue = val.trim()
+    if (trimmedValue === '') return
     // Make sure each value is valid and doesn't already exist
-    if (validate && !validate(val)) {
-      unusedValues.push(val)
-      return invalidValues.push(val)
-    } else if (currentValues && currentValues.includes(val)) {
-      unusedValues.push(val)
-      return duplicateValues.push(val)
+    if (validate && !validate(trimmedValue)) {
+      unusedValues.push(trimmedValue)
+      return invalidValues.push(trimmedValue)
+    } else if (currentValues && currentValues.includes(trimmedValue)) {
+      unusedValues.push(trimmedValue)
+      return duplicateValues.push(trimmedValue)
     } else {
-      return validValues.push(val)
+      return validValues.push(trimmedValue)
     }
   })
 
@@ -164,11 +165,19 @@ export const InputChipsInternal = forwardRef(
       }
     }
 
+    const isPasting = React.useRef(false)
+    function handlePaste() {
+      isPasting.current = true
+    }
+
     function handleInputChange(e: FormEvent<HTMLInputElement>) {
       const { value } = e.currentTarget
       // If the last character is a comma, update the values
-      if (value[value.length - 1] === ',') {
+      // Or, if the user pastes content, we assume that the final value is complete
+      // even if there's no comma at the end
+      if (isPasting.current || value[value.length - 1] === ',') {
         updateValues(value)
+        isPasting.current = false
       } else {
         setInputValue(value)
       }
@@ -199,6 +208,7 @@ export const InputChipsInternal = forwardRef(
         onKeyDown={handleKeyDown}
         showClear={values.length > 0}
         onClear={handleClear}
+        onPaste={handlePaste}
         {...props}
       >
         {chips}