viclafouch/mui-chips-input

📌 A chips input designed for MUI (Material ui) V5

Hi there 👋

Website • Twitter • Linkedin

I'm a frontend developer and technical writer based in France. I love teaching web development and all kinds of other things online and I'm ready for discussions and making new projects, write blogs on Dev.to etc.

• 💼 Currently working at Frichti
  
• 🔖 Discover my Curriculum Vitae
  
• ✍🏻 I wrote dev articles on dev.to
  
• 📫 Contact me @TrustedSheriff

My skills

My song of the moment

My last 3 DEV articles

• 👑 Create a secure Chat Application with React Hooks, Firebase and Seald 🔐
• 🍿 Publish your own ESLint / Prettier config for React Projects on NPM 📦
• 🤝 Promise.allSettled() VS Promise.all() in JavaScript 🍭

mui-chips-input's Issues

Input does not clear on blur event when tabbing to next field

Describe the bug
With clearInputOnBlur set to true, the input does not clear when the user tabs out of the input into the next field.

To Reproduce
Steps to reproduce the behavior:

1. Set clearInputOnBlur prop to 'true'
2. Enter a value into the input.
3. Press Tab to move to the next input field.
4. Chip gets added but value remains in input.

Expected behavior
I would assume that a tab event would function the same as the user clicking outside of the input and the input would clear.

Screenshots

Desktop (please complete the following information):

• OS: MacOS Ventura 13.1
• Browser: Chrome
• Version: 109

onBlur added chip

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
the solution i would like it a boolean props that you activate when you want to add automatically chip onBlur
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

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

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

mui-chips-input version 2.0.2 issues with React-dom

Describe the bug

I get the following error message on mui-chips-input 2.0.2 (but not with earlier version 2.0.1):

Server Error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

To Reproduce
Steps to reproduce the behavior:

1. Just try out the example of README.md, i.e.:

import { MuiChipsInput } from 'mui-chips-input'

const MyComponent = () => {
  const [chips, setChips] = React.useState([])

  const handleChange = (newChips) => {
    setChips(newChips)
  }

  return (
    <MuiChipsInput value={chips} onChange={handleChange} />
  )
}

Expected behavior
The component is supposed to render without errors.

Desktop (please complete the following information):

• OS: MacOS Monterey version 12.3.1
• Browser Chrome version 114.0.5735.133
• Next 13.1.6
• React 18.2.0
• React-dom 18.2.0

Additional context

I am running this in a NextJS application. Also the Code Sandbox runs into the same issue: https://codesandbox.io/s/mui-chips-input-fsf9p3

Downgrading to mui-chips-input version 2.0.1 solves the issue for me locally on my NextJS application.

Here is the full output of what happens with React-dom-server and Next:

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at /Users/user1/some_project/node_modules/mui-chips-input/dist/mui-chips-input.umd.js:52:82
    at /Users/user1/some_project/node_modules/mui-chips-input/dist/mui-chips-input.umd.js:52:2801
    at div
    at div
    at div
    at div
    at Search (webpack-internal:///./src/components/Search.tsx:87:88)
    at ProtectedRoute (webpack-internal:///./src/components/ProtectedRoute.tsx:15:27)
    at SearchPage
    at PinboardContextProvider (webpack-internal:///./src/context/PinboardContext.tsx:22:36)
    at UserAuthContextProvider (webpack-internal:///./src/context/UserAuthContext.tsx:22:36)
    at some_project (webpack-internal:///./src/pages/_app.tsx:46:24)
    at StyleRegistry (/Users/user1/some_project/node_modules/styled-jsx/dist/index/index.js:449:36)
    at PathnameContextProviderAdapter (/Users/user1/some_project/node_modules/next/dist/shared/lib/router/adapters.js:78:11)
    at AppContainer (/Users/user1/some_project/node_modules/next/dist/server/render.js:341:29)
    at AppContainerWithIsomorphicFiberStructure (/Users/user1/some_project/node_modules/next/dist/server/render.js:377:57)
    at div
    at Body (/Users/user1/some_project/node_modules/next/dist/server/render.js:677:21)
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at /Users/user1/some_project/node_modules/mui-chips-input/dist/mui-chips-input.umd.js:52:82
    at /Users/user1/some_project/node_modules/mui-chips-input/dist/mui-chips-input.umd.js:52:2801
    at div
    at div
    at div
    at div
    at Search (webpack-internal:///./src/components/Search.tsx:87:88)
    at ProtectedRoute (webpack-internal:///./src/components/ProtectedRoute.tsx:15:27)
    at SearchPage
    at PinboardContextProvider (webpack-internal:///./src/context/PinboardContext.tsx:22:36)
    at UserAuthContextProvider (webpack-internal:///./src/context/UserAuthContext.tsx:22:36)
    at some_project (webpack-internal:///./src/pages/_app.tsx:46:24)
    at StyleRegistry (/Users/user1/some_project/node_modules/styled-jsx/dist/index/index.js:449:36)
    at PathnameContextProviderAdapter (/Users/user1/some_project/node_modules/next/dist/shared/lib/router/adapters.js:78:11)
    at AppContainer (/Users/user1/some_project/node_modules/next/dist/server/render.js:341:29)
    at AppContainerWithIsomorphicFiberStructure (/Users/user1/some_project/node_modules/next/dist/server/render.js:377:57)
    at div
    at Body (/Users/user1/some_project/node_modules/next/dist/server/render.js:677:21)
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at /Users/user1/some_project/node_modules/mui-chips-input/dist/mui-chips-input.umd.js:52:82
    at /Users/user1/some_project/node_modules/mui-chips-input/dist/mui-chips-input.umd.js:52:2801
    at div
    at div
    at div
    at div
    at Search (webpack-internal:///./src/components/Search.tsx:87:88)
    at ProtectedRoute (webpack-internal:///./src/components/ProtectedRoute.tsx:15:27)
    at SearchPage
    at PinboardContextProvider (webpack-internal:///./src/context/PinboardContext.tsx:22:36)
    at UserAuthContextProvider (webpack-internal:///./src/context/UserAuthContext.tsx:22:36)
    at some_project (webpack-internal:///./src/pages/_app.tsx:46:24)
    at StyleRegistry (/Users/user1/some_project/node_modules/styled-jsx/dist/index/index.js:449:36)
    at PathnameContextProviderAdapter (/Users/user1/some_project/node_modules/next/dist/shared/lib/router/adapters.js:78:11)
    at AppContainer (/Users/user1/some_project/node_modules/next/dist/server/render.js:341:29)
    at AppContainerWithIsomorphicFiberStructure (/Users/user1/some_project/node_modules/next/dist/server/render.js:377:57)
    at div
    at Body (/Users/user1/some_project/node_modules/next/dist/server/render.js:677:21)
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at renderElement (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6043:9)
    at renderNodeDestructiveImpl (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderForwardRef (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5859:5)
    at renderElement (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6005:11)
    at renderNodeDestructiveImpl (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderForwardRef (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5859:5)
    at renderElement (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6005:11)
    at renderNodeDestructiveImpl (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderHostElement (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5642:3)
    at renderElement (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5952:5)
    at renderNodeDestructiveImpl (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderHostElement (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5642:3)
    at renderElement (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5952:5)
    at renderNodeDestructiveImpl (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderHostElement (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5642:3)
    at renderElement (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5952:5)
    at renderNodeDestructiveImpl (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderHostElement (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5642:3)
    at renderElement (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5952:5)
    at renderNodeDestructiveImpl (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
    at renderElement (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
- error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at renderElement (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6043:9)
    at renderNodeDestructiveImpl (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderForwardRef (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5859:5)
    at renderElement (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6005:11)
    at renderNodeDestructiveImpl (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderForwardRef (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5859:5)
    at renderElement (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6005:11)
    at renderNodeDestructiveImpl (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderHostElement (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5642:3)
    at renderElement (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5952:5)
    at renderNodeDestructiveImpl (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderHostElement (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5642:3)
    at renderElement (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5952:5)
    at renderNodeDestructiveImpl (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderHostElement (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5642:3)
    at renderElement (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5952:5)
    at renderNodeDestructiveImpl (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderHostElement (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5642:3)
    at renderElement (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5952:5)
    at renderNodeDestructiveImpl (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
    at renderElement (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/Users/user1/some_project/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11) {
  digest: undefined
}

how can i limit the numbers of chips?

Is your feature request related to a problem? Please describe.
hi, I need to limit the maximum number of chips allowed to 10, I would like to know what would be the best way

Describe the solution you'd like
a new property where the maximum number is entered would be ideal

Cannot use InputProps with Chip Input

Describe the bug
When using InputProps, chips do not properly show up.
I saw that this inherits from TextField, https://viclafouch.github.io/mui-chips-input/docs/inheritance/
so it should also inherit InputProps, one of them being an adornment.

To Reproduce
I made a sandbox of this behavior
https://codesandbox.io/embed/inspiring-http-dn7gxh?fontsize=14&hidenavigation=1&theme=dark

Expected behavior
When there is an input adornment the chips should still show up.

Screenshots

Screen.Recording.2023-10-03.at.2.36.11.PM.mov

Desktop (please complete the following information):

• macOS
• chrome
• Version 117

Library is not compatible with ESM module with SSR

Describe the bug
Library is not compatible with ESM module with SSR.

To Reproduce

1. Create a new Remix application (latest & greatest).
2. Import component like it described in Usage section of documentation
3. Run npm run dev
4. Open app in browser (root page)
5. See warning: (node:15013) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
6. See error:

import { jsx as g } from "react/jsx-runtime";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1153:20)
    at Module._compile (node:internal/modules/cjs/loader:1205:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at cjsLoader (node:internal/modules/esm/translators:283:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:233:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:217:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:308:24)

Expected behavior
Application launches normally

Additional context

1. My package.json contains string:

  "type": "module",

2. I know that there are problems with configuring MUI with Remix, but it doesn't matter in this case.
   I'm trying with correctly configured MUI/emotion for SSR that works without this component correctly.
3. Reproduces both: with standard Remix server & with Vite

[Bug fix] entering chip on mobile in form does not work

@viclafouch Hey, it's me again :P

When the chips input is inside an form, it's impossible to add a chip, since touching on the enter key will go to the next field instead by default.
Here is a fix:

inputProps={{
        enterkeyhint: 'done'
      }}

since this is a common case this should be included by default.

Warning: A props object containing a "key" prop is being spread into JSX

Describe the bug
Hi, I'm having this warning every time I add new item into input
To Reproduce
Steps to reproduce the behavior:

1. Click on input
2. Type anything and press enter
3. The warning is shown in console
   Error from file: https://github.com/viclafouch/mui-chips-input/blob/main/src/components/TextFieldChip/TextFieldChips.tsx#L304

Expected behavior
No error is shown

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

SyntaxError: Cannot use import statement outside a module

Describe the bug
A clear and concise description of what the bug is.
When running tests in jest on version 2.1.3 I get the error "SyntaxError: Cannot use import statement outside a module"
This problem appears to have have come up in v2.1.2 where the UMD modules were removed.

Jest.config.js

module.exports = {
    transform: {
        '^.+\\.(js|jsx|ts|tsx)$': [
            'babel-jest',
            { configFile: './testConfig/babel.config.json' }
        ]
    },
    transformIgnorePatterns: ['/node_modules/(?!mui-chips-input)'],
    setupFilesAfterEnv: ['./testConfig/setupTests.js'],
    testEnvironment: 'jsdom',
    collectCoverage: true,
    collectCoverageFrom: [
        'src/**/*.{js,jsx}',
        '!src/index.jsx',
        '!src/utils/theme/**',
        '!**/node_modules/**',
        '!**/vendor/**'
    ],
    clearMocks: true,
    coverageThreshold: {
        global: {
            branches: 100,
            functions: 100,
            lines: 100,
            statements: 100
        }
    },
    moduleNameMapper: {
        '\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
            '<rootDir>/__mocks__/fileMock.js',
        '\\.(css|less)$': '<rootDir>/__mocks__/fileMock.js'
    }
};

babel.config.json

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

To Reproduce
Steps to reproduce the behavior:
Run a test with the given jest config and mui-chips-input

Expected behavior
test should pass

Screenshots

Desktop:

• OS: Ubuntu
• Version 22.04

Add License File

Requesting that an appropriate MIT license file be added to this repo, so that it can be picked up and recognized by scanners.

Need to control inputValue

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>
  )
}

add chip onBlur

Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] Describe the solution you'd like the solution i would like it a boolean props that you activate when you want to add automatically chip onBlur A clear and concise description of what you want to happen.

Add Start and End Adornments to mui-chips-input

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

Type error with prop multiline

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

loader issue

Describe the bug

Loader error

./node_modules/mui-chips-input/dist/mui-chips-input.es.js 56:10
Module parse failed: Unexpected token (56:10)
File was processed with these loaders:

• ./node_modules/babel-loader/lib/index.js
  You may need an additional loader to handle the result of these loaders.
  To Reproduce
  Steps to reproduce the behavior:

1. use latest

Expected behavior
compile without issues

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Win 11
• Browser Chrome
• Version [e.g. 22]

Expected hoisted manifest when trying to install with yarn and @emotion/react version 11.10.4

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

Make chips draggable

It would be a good idea to make the chip draggable, so the order could be changed. See the example from Gmail:

control on the rendered parentdiv of the chips div

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.

Failure to handle events processed by an IME

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

2022-12-08.19.31.55.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!

Add chip on the click of tab

Describe the bug
After typing the email if I click the tab chip is not getting added even after adding 'Tab' in the addOnWhichKey Options

To Reproduce
Steps to reproduce the behavior:
Codesandbox code

Expected behavior
If we keypress 'Tab' text should become chip in the input box

Additional context
Add any other context about the problem here.

ERROR in ./node_modules/mui-chips-input/dist/mui-chips-input.es.js 259:28-30 export 'default' (imported as 'gt') was not found in '@mui/base/ClickAwayListener' (possible exports: ClickAwayListener)

Describe the bug
today I got this error before it works fine

To Reproduce
Steps to reproduce the behavior:

1. just I run npm install
2. this error arise

Desktop (please complete the following information):

• OS: windows 10

• "mui-chips-input": "^2.0.2",
  

Additional context
ERROR in ./node_modules/mui-chips-input/dist/mui-chips-input.es.js 259:28-30
export 'default' (imported as 'gt') was not found in '@mui/base/ClickAwayListener' (possible exports: ClickAwayListener)

onDeleteAllChips property

I've been using the mui-chips-input, and after updating the package turns out you can't use the onDeleteAllChips property anymore.
I might just be forgetting something, so here is an example where i use the component :
I have an "Advanced search" option with a form, and in this form i display multiple MuiChipsInputs, here is one of them :

<FormGroup sx={{ display: 'flex', flexWrap: 'wrap' }}>
  .....
  <MuiChipsInput
    sx={{ mt: 1, mb: 1 }}
    label={'Schedule ID'}
    value={req['scheduleId' as keyof IGetScheduleRequest] as string[]}
    onAddChip={(chip: string) =>
      handleChipChange('scheduleId' as keyof IGetScheduleRequest, [
        ...(req['scheduleId' as keyof IGetScheduleRequest] as string[]),
        chip,
      ])
    }
    onDeleteChip={(chip: string, index: number) => {
      const updatedChips = (
        req['scheduleId' as keyof IGetScheduleRequest] as string[]
      ).filter((_, i) => i !== index);
      handleChipChange('scheduleId' as keyof IGetScheduleRequest, updatedChips);
    }}
    onDeleteAllChips={() =>
      handleChipChange('scheduleId' as keyof IGetScheduleRequest, [])
    }
  />
  .......
</FormGroup>

When the user clicks on the X to delete all chips, not only does it clear the field but i also want to set my state.
Here is my chip change handler if needed :

const handleChipChange = (name: keyof IGetScheduleRequest, chips: string[]) => {
  setReq((prevState) => ({ ...prevState, [name]: chips }));
};

Is there a way around this?
Please note that i'm coding in typescript and that i'm using vitejs.

Thank you for your time.

Could not find a declaration file for module 'mui-chips-input'

Describe the bug
The package works just fine, i can use the chips but when importing { MuiChipsInput as ChipInput } from 'mui-chips-input', the name of the package is underlined with red and i get the following message :

Could not find a declaration file for module 'mui-chips-input'. '/Users/UBENFFA/workspace/tl2-schedule-management-subsystem/schedule-management-service/apps/web/schedule-management-ui/node_modules/mui-chips-input/dist/mui-chips-input.es.js' implicitly has an 'any' type.
  There are types at '/Users/UBENFFA/workspace/tl2-schedule-management-subsystem/schedule-management-service/apps/web/schedule-management-ui/node_modules/mui-chips-input/dist/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'mui-chips-input' library may need to update its package.json or typings.

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

Desktop (please complete the following information):
System:
OS: macOS 12.6.7
Binaries:
Node: 14.21.1 - ~/.nvm/versions/node/v14.21.1/bin/node
Yarn: Not Found
npm: 6.14.17 - ~/.nvm/versions/node/v14.21.1/bin/npm
Browsers:
Chrome: 114.0.5735.198
Edge: Not Found
Safari: 16.5.1
npmPackages:
@emotion/react: 11.11.1
@emotion/styled: 11.11.0
@mui/base: 5.0.0-beta.7
@mui/core-downloads-tracker: 5.14.0
@mui/icons-material: ^5.14.0 => 5.14.0
@mui/lab: ^5.0.0-alpha.136 => 5.0.0-alpha.136
@mui/material: ^5.14.0 => 5.14.0
@mui/private-theming: 5.13.7
@mui/styled-engine: 5.13.2
@mui/system: 5.14.0
@mui/types: 7.2.4
@mui/utils: 5.13.7
@mui/x-date-pickers: ^6.9.2 => 6.9.2
@mui/x-date-pickers-pro: ^6.9.2 => 6.9.2
@mui/x-license-pro: 6.9.0
@types/react: ^18.0.25 => 18.0.25
react: ^18.2.0 => 18.2.0
react-dom: ^18.2.0 => 18.2.0
typescript: ^5.1.6 => 5.1.6

If I want to add masking inside input field, how can I do that?

Is there a way to force the chips values to be unique?

Hi.

Is your feature request related to a problem? Please describe.
I need the chips to be unique so every chip text will appear only once.

Describe the solution you'd like
A new property that set the uniqueness true\false. (although I can't think why someone would like it to be not unique)

Cannot import dependencies in lazy loaded pages especially in build environment

Describe the bug
A clear and concise description of what the bug is.

mui-chips-input seems to be not able to import dependencies in lazy loaded pages
Runtime error occurs and getting white page with following error

To Reproduce
Steps to reproduce the behavior:
Preconditions

• lazy loaded pages using React.lazy
• process.env.NODE_ENV = 'production'
• works well in index page, but not in routing pages
• build tool: esbuild

Fixes

• I removed lazy import to fix temporarily, It works well as I expected

Expected behavior
A clear and concise description of what you expected to happen.
Occurs none of errors

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [MacOS]
• Browser [chrome]
• Version [106.0.5249.119]

Smartphone (please complete the following information):

• Not mobile targeted

Additional context
If you need any additional context for reproducing the behavior, please feel free to request

inputRef is always null

Describe the bug
If you pass an inputRef in MuiChipsInput, it is always null. It's current value doesn't take the input.

To Reproduce
Steps to reproduce the behavior:
Pass an inputRef in MuiChipInput and log it.

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Ventura 13
• Browser: Chrome
• Version 106

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

React-Final-Form touched is not triggered

Hello,

I want to use the chips input with react final form.
I can set the values and errors correctly, only problem is, that the chip input is not marked as touched an therefore the validation error is always show.

<Form
      onSubmit={onSubmit}
      initialValues={initialValues}
      validate={validate}
      render={({ touched, form, values, handleSubmit, submitting, errors, pristine }) => (
        <form onSubmit={handleSubmit}>
          
            <MuiChipsInput
name: 'domains',
              label='Domain(s) | hint: double click on domain to edit'
              fullWidth
              value={values.domains}
              onChange={(vals) => {
                console.log('vals', vals);
                form.change('domains', vals);
              }}
              InputLabelProps={{ shrink: true }}
              alwaysShowPlaceholder
              clearInputOnBlur
              inputProps={{
                
                onBlur: () => {
// this does not work
                  console.log('blur');
                  form.focus('domains');
                  form.blur('domains');
                }
              }}
              required={required.domains}
              helperText={touched.domains ? errors.domains : ''}
              error={touched.domains && errors.domains}
              validate={(chipValue) => {
                return {
                  isError:
                    !/^((?:https?:\/\/)?[^./]+(?:\.[^./]+)+(?:\/.*)?)$/.test(
                      chipValue
                    ),
                  textError: 'Insert valid domain'
                };
              }}
            />

              <pre>{JSON.stringify(touched, 0, 2)}</pre>
</form>
</Form>

Inside the touched object, domains isnt even shown. So there must be a problem with detecting the name of the input.
Can you help please?

Add Chip on Spacebar

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