fix: closes #5

viclafouch · Sep 26, 2022 · 544e619 · 544e619
1 parent a1eb2fa
commit 544e619
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 2 deletions.
diff --git a/src/components/TextFieldChip/TextFieldChips.test.tsx b/src/components/TextFieldChip/TextFieldChips.test.tsx
@@ -340,4 +340,21 @@ describe('components/TextFieldChips', () => {
 
     expect(screen.getByTestId('EmailIcon')).toBeTruthy()
   })
+
+  test('should control the input value', async () => {
+    const callbackOnInputChange = vi.fn(() => {})
+    render(
+      <TextFieldChips
+        chips={['test']}
+        onInputChange={callbackOnInputChange}
+        inputValue="Hello world"
+      />
+    )
+
+    expect(testUtils.getInputElement().value).toBe('Hello world')
+
+    await testUtils.typeInInputElement(' ')
+
+    expect(callbackOnInputChange).toBeCalledWith('Hello world ')
+  })
 })
diff --git a/src/components/TextFieldChip/TextFieldChips.tsx b/src/components/TextFieldChip/TextFieldChips.tsx
@@ -25,6 +25,7 @@ type TextFieldChipsProps = TextFieldProps & {
   disableDeleteOnBackspace?: boolean
   addOnWhichKey?: string | string[]
   disableEdition?: boolean
+  inputValue?: string
   validate?: MuiChipsInputProps['validate']
   onInputChange?: (inputValue: string) => void
   onDeleteChip?: (chipIndex: number) => void
@@ -61,11 +62,18 @@ const TextFieldChips = React.forwardRef(
       className,
       renderChip,
       addOnWhichKey,
+      onFocus,
+      inputValue: inputValueControlled,
       ...restTextFieldProps
     } = props
-    const [inputValue, setInputValue] = React.useState<string>('')
+    const [inputValueUncontrolled, setInputValueUncontrolled] =
+      React.useState<string>('')
     const [textError, setTextError] = React.useState<string>('')
     const inputElRef = React.useRef<HTMLDivElement | null>(null)
+    const isFocusingRef = React.useRef<boolean>(false)
+    const isControlledRef = React.useRef(
+      typeof inputValueControlled === 'string'
+    )
     const [chipIndexEditable, setChipIndexEditable] = React.useState<
       null | number
     >(null)
@@ -76,9 +84,16 @@ const TextFieldChips = React.forwardRef(
       setTextError('')
     }
 
+    const isControlled = isControlledRef.current
+    const inputValue = isControlled
+      ? (inputValueControlled as string)
+      : inputValueUncontrolled
+
     const updateInputValue = (newInputValue: string) => {
       onInputChange?.(newInputValue)
-      setInputValue(newInputValue)
+      if (!isControlled) {
+        setInputValueUncontrolled(newInputValue)
+      }
     }
 
     const updateChipIndexEditable = (chipIndex: number) => {
@@ -101,12 +116,17 @@ const TextFieldChips = React.forwardRef(
     }
 
     const handleClickAway = () => {
+      if (!isFocusingRef.current) {
+        return
+      }
       if (chipIndexEditable !== null) {
         clearChipIndexEditable()
         clearInputValue()
       } else if (clearInputOnBlur) {
         clearInputValue()
       }
+
+      isFocusingRef.current = false
     }
 
     const handleRef = (ref: HTMLDivElement | null): void => {
@@ -212,6 +232,12 @@ const TextFieldChips = React.forwardRef(
       onKeyDown?.(event)
     }
 
+    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
+      event.preventDefault()
+      onFocus?.(event)
+      isFocusingRef.current = true
+    }
+
     const handleClearAll = (event: React.MouseEvent<HTMLButtonElement>) => {
       event.preventDefault()
       if (!hideClearAll && !disabled) {
@@ -254,6 +280,7 @@ const TextFieldChips = React.forwardRef(
           className={`MuiChipsInput-TextField ${className || ''}`}
           size={size}
           placeholder="Type and press enter"
+          onFocus={handleFocus}
           inputProps={{
             onKeyDown: handleKeyDown,
             ...restInputProps
@@ -317,6 +344,7 @@ TextFieldChips.defaultProps = {
   addOnWhichKey: KEYBOARD_KEY.enter,
   onDeleteChip: () => {},
   onAddChip: () => {},
+  inputValue: undefined,
   onEditChip: () => {},
   renderChip: undefined,
   onDeleteAllChips: () => {},

diff --git a/src/index.tsx b/src/index.tsx
@@ -34,6 +34,7 @@ const MuiChipsInput = React.forwardRef(
       renderChip,
       disableEdition,
       addOnWhichKey,
+      inputValue,
       ...restTextFieldProps
     } = props as Required<MuiChipsInputProps>
 
@@ -86,6 +87,7 @@ const MuiChipsInput = React.forwardRef(
         disabled={disabled}
         disableEdition={disableEdition}
         validate={validate}
+        inputValue={inputValue}
         hideClearAll={hideClearAll}
         addOnWhichKey={addOnWhichKey}
         {...restTextFieldProps}

diff --git a/src/index.types.ts b/src/index.types.ts
@@ -27,6 +27,7 @@ export type MuiChipsInputChip = string
 export interface BaseMuiChipsInputProps {
   value?: MuiChipsInputChip[]
   onInputChange?: (inputValue: string) => void
+  inputValue?: string
   onAddChip?: (chipValue: MuiChipsInputChip, chipIndex: number) => void
   onDeleteChip?: (chipValue: MuiChipsInputChip, chipIndex: number) => void
   onEditChip?: (chipValue: MuiChipsInputChip, chipIndex: number) => void