Is your feature request related to a problem? Please describe. I am trying to implement a mui-chips-input where an action needs to be taken on those items.

Describe the solution you'd like Instead of just text, I want to be able to use this for emails, and would like to be able to include SendIcon to be able to take send email action on it. To be able to provide email validation and max items that can be added would also be great.

Describe alternatives you've considered I tried converting a react solution to mui-chip solution, which does most of the the work, except it puts the chips above the textfield instead of inside the textfield. I would like for them to be inside the textfield.

Additional context None

Describe the bug TypeError: Cannot read properties of null (reading 'useState')

To Reproduce Steps to reproduce the behavior:

1. Add package - yarn add mui-chips-input
2. Import Package
3. Compile Code

Expected behavior Expecting @MUI chips input...

GOT `Unhandled Runtime Error TypeError: Cannot read properties of null (reading 'useState')

Call Stack Object.useState node_modules/mui-chips-input/node_modules/react/cjs/react.development.js (1622:0) eval node_modules/mui-chips-input/dist/mui-chips-input.es.js (131:18) renderWithHooks node_modules/react-dom/cjs/react-dom.development.js (16175:0) updateForwardRef node_modules/react-dom/cjs/react-dom.development.js (20023:0) beginWork node_modules/react-dom/cjs/react-dom.development.js (22465:0) HTMLUnknownElement.callCallback node_modules/react-dom/cjs/react-dom.development.js (4161:0) Object.invokeGuardedCallbackDev node_modules/react-dom/cjs/react-dom.development.js (4210:0) invokeGuardedCallback node_modules/react-dom/cjs/react-dom.development.js (4274:0) beginWork$1 node_modules/react-dom/cjs/react-dom.development.js (27405:0) performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js (26513:0) workLoopSync node_modules/react-dom/cjs/react-dom.development.js (26422:0) renderRootSync node_modules/react-dom/cjs/react-dom.development.js (26390:0) performSyncWorkOnRoot node_modules/react-dom/cjs/react-dom.development.js (26041:0) flushSyncCallbacks node_modules/react-dom/cjs/react-dom.development.js (12009:0) flushSync node_modules/react-dom/cjs/react-dom.development.js (26157:0) finishEventHandler node_modules/react-dom/cjs/react-dom.development.js (3973:0) batchedUpdates node_modules/react-dom/cjs/react-dom.development.js (3991:0) dispatchEventForPluginEventSystem node_modules/react-dom/cjs/react-dom.development.js (9284:0) dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay node_modules/react-dom/cjs/react-dom.development.js (6462:0) dispatchEvent node_modules/react-dom/cjs/react-dom.development.js (6454:0) dispatchDiscreteEvent node_modules/react-dom/cjs/react-dom.development.js (6427:0)`

@viclafouch

Describe the bug If I use <MuiChipsInput multiline rows={3} />, I get a type error. Note the prop actually work, it's just a type issue.

To Reproduce Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/ancient-field-jedk7g?file=/src/App.tsx
2. See type error in code editor

Expected behavior The prop should not raise a type error.

Error is due to this line, I guess: https://github.com/viclafouch/mui-chips-input/blob/main/src/index.types.ts#L4

Is your feature request related to a problem? Please describe. We want to add chips on pressing spacebar, in addition to pressing Enter. Right now it seems the only way to do this is to use the "onInputChange," check for the last character being a space, and then "clearInputOnBlur" and manually blur/re-focus. I'm still struggling to get this to work correctly though.

Describe the solution you'd like We could use a simple "addChipOnSpacebar" prop that would prevent the logic living outside the component. When a user types a space bar, run the validation, and then if it passes, trigger the addChip just as if they had pressed enter. Then clear the 'input value' to be ready to type the next entry.

Probably also update the helper text to a new default, to represent the new condition.

Describe alternatives you've considered I've tried overriding the inputProps={{value: ''}} and other similar changes. I'm thinking this prop was overridden to provide the chips themselves, and so I cannot seem to access the input's current typed-in-value, to clear it back out.

As mentioned above, I've found the workaround of blurring the input, and using the clearInputOnBlur prop.

Additional context N/A

When trying to install in a project with "@emotion/react": "11.10.4",

yarn add mui-chips-input

fails throwing the error:

expected hoisted manifest for "mui-chips-input#@mui/material#@emotion/styled"

Steps to reproduce the behavior:

git clone 'https://github.com/arunlodhi/mui-chips-input-error'

yarn install

yarn add mui-chips-input

Describe the bug

Chip is added when I press Enter to confirm the conversion by an IME.

To Reproduce

1. Go to https://viclafouch.github.io/mui-chips-input/
2. Type Japanese (For example 'りんご')
3. Press Enter key

Expected behavior

Chips is not added during an IME processing.

Screenshots

https://user-images.githubusercontent.com/18608707/206427008-6e21a2e8-14ef-41ec-a2be-ced43dab01ea.mov

Desktop

• OS: macOS Monterey (v12.6.1)
• Browser: Google Chrome
• Version: 108.0.5359.98

Additional context

PR is already ready. Please close it if you don't need it.

Thank you for the wonderful library!

Is your feature request related to a problem? Please describe. I want to have a scan input, for that I use a debounce on the onInputChange, when 300ms passed, I set the chips. But after that, I need to reset the input value (but I do not have control over inputValue, see: https://github.com/viclafouch/mui-chips-input/blob/main/src/components/TextFieldChip/TextFieldChips.tsx#L66)

Describe the solution you'd like Need to have inputValue as props of MuiChipsInput.

Code usage sample

export default function ScanForm() {
  const [chips, setChips] = useState<string[]>([])
  const [scanValue, setScanValue] = useState('')
  const scanValueDebounced = useDebounce(scanValue, 300)

  useEffect(() => {
    setChips([...chips, scanValueDebounced])
    // reset scanValue, should reflect in MuiChipsInput
  }, [scanValueDebounced])

  function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault()
    // ...
  }

  return (
    <form onSubmit={handleSubmit}>
      <MuiChipsInput value={chips} onInputChange={(v) => setScanValue(v)} />
      <Button>submit</Button>
    </form>
  )
}

This PR solves #11 . However, it has two drawbacks.

1. keyCode is deprecated.
2. @testing-library/user-event cannot simulate keyCode

This is the only way I could come up with. If the quality is unsatisfactory, please close.

Is your feature request related to a problem? Please describe. I'm having a hard time setting up the paddings for the parentdiv. I currently saw that there is override changes to .MuiInputBase-root class which gives row-gaps and paddings.

Describe the solution you'd like Would be good if there is a solution for the rendered parent div or any docs how to get the behaviour on how it is rendered.

Describe alternatives you've considered Getting it from mui5 directly and not having default paddings/styling.

Additional context Only if my issue is relevant. Thanks.