Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Used AutocompleteInput components give an error if the same name in "choice" object #7996

Closed
BaurinVladislav opened this issue Jul 21, 2022 · 5 comments · Fixed by #8002
Closed

Used AutocompleteInput components give an error if the same name in "choice" object #7996

BaurinVladislav opened this issue Jul 21, 2022 · 5 comments · Fixed by #8002
Assignees
@antoinefricker
Labels
bug

Comments

@BaurinVladislav
Copy link

Playback steps:

 {/* ... */}
<AutocompleteInput
      label="Business"
      source="businessId"
      choices={[
        {
          id: "0",
          name: "sameName",
        },
        {
          id: "1",
          name: "sameName",
        },
        {
          id: "2",
          name: "otherName",
        },
      ]}
 {/* ... */}

Expected result:
The key of the component is the identifier or any specified field in "choice" object.

The actual result:
In console give ad error:

Warning: Encountered two children with the same key, `sameName`. 
Keys should be unique so that components maintain their identity across updates. 
Non-unique keys may cause children to be duplicated and/or omitted — 
the behavior is unsupported and could change in a future version.
    at ul
    at div
    at Paper 
    at div
    at PopperTooltip 
    at Portal 
    at PopperUnstyled 
    at Popper 
    at Autocomplete 
    at AutocompleteInput 
    at DropdownCt 
    at div
    at Box 
    at div
    at Stack 
    at div
    at CardContent 
    at DefaultComponent 
    at form
    at FormGroupsProvider 
    at FormProvider 
    at LabelPrefixContextProvider 
    at OptionalRecordContextProvider 
    at Form 
    at SimpleForm 
    at div
    at Box 
    at div
    at Paper 
    at Card 
    at div
    at div
    at CreateView 
    at RecordContextProvider 
    at SaveContextProvider 
    at CreateContextProvider 
    at CreateBase 
    at Create 
    at RatesCreateCt 
    at Routes 
    at ResourceContextProvider 
    at Resource 
    at Routes 
    at ErrorBoundary 
    at div
    at main
    at div
    at div
    at Layout 
    at Layout
    at div
    at Routes 
    at CoreAdminRoutes 
    at Routes 
    at CoreAdminUI 
    at AdminUI 
    at InnerThemeProvider 
    at ThemeProvider 
    at ThemeProvider 
    at ThemeProvider 
    at ResourceDefinitionContextProvider
    at NotificationContextProvider 
    at I18nContextProvider 
    at Router 
    at HistoryRouter 
    at InternalRouter 
    at BasenameContextProvider 
    at AdminRouter 
    at QueryClientProvider 
    at StoreContextProvider 
    at CoreAdminContext 
    at AdminContext 
    at Admin 
    at App`
@djhi
Copy link
Contributor

djhi commented Jul 21, 2022

Please follow the issue template

@BaurinVladislav
Copy link
Author

What you were expecting:
The key of the component is the id or any specified field in "choice" object.

What happened instead:
In console give ad error:

Warning: Encountered two children with the same key, `Recurring title`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
    at ul
    at https://dl0vy9.sse.codesandbox.io/index.bundle.js:590:66
    at div
    at https://dl0vy9.sse.codesandbox.io/index.bundle.js:590:66
    at Paper (https://dl0vy9.sse.codesandbox.io/index.bundle.js:26629:83)
    at https://dl0vy9.sse.codesandbox.io/index.bundle.js:590:66
    at div
    at PopperTooltip (https://dl0vy9.sse.codesandbox.io/index.bundle.js:4173:5)
    at Portal (https://dl0vy9.sse.codesandbox.io/index.bundle.js:4521:5)
    at PopperUnstyled (https://dl0vy9.sse.codesandbox.io/index.bundle.js:4291:5)
    at https://dl0vy9.sse.codesandbox.io/index.bundle.js:590:66
    at Popper (https://dl0vy9.sse.codesandbox.io/index.bundle.js:27370:72)
    at https://dl0vy9.sse.codesandbox.io/index.bundle.js:590:66
    at Autocomplete (https://dl0vy9.sse.codesandbox.io/index.bundle.js:8475:83)

Steps to reproduce:

  1. open url - https://d7hlei.sse.codesandbox.io/#/comments
  2. Enter "Recurring title" in "Post" search input.
  3. Open console log in browser

Related code:

 {/* https://codesandbox.io/s/competent-moon-d7hlei?file=/src/comments/CommentList.tsx */}
 {/* ... */}
<ReferenceInput
    source="post_id"
    reference="posts"
    label="Post title serch"
    alwaysOn
  >
    {/* <SelectInput optionText="title" /> */}
    <AutocompleteInput optionText="title" />
  </ReferenceInput>
 {/* ... */}

 {/*https://codesandbox.io/s/competent-moon-d7hlei?file=/src/data.tsxx */}
export default {
  posts: [
    {
      id: 1,
      title: "Recurring title",
       {/* ... */}
    },
    {
      id: 2,
      title: "Recurring title",
       {/* ... */}
    },
    {
      id: 3,
      title: "Recurring title",
       {/* ... */}
    },
 {/* ... */}

Example CodeSandbox link
https://codesandbox.io/s/competent-moon-d7hlei

Environment

  • React-admin version: ^4.0.3
  • Last version that did not exhibit the issue (if applicable): probably in version 4.0, but maybe not true
  • React version: 18.2.0
  • Browser: 103.0.5060.114
  • Stack trace (in case of a JS error):
Warning: Encountered two children with the same key, `Recurring title`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
    at ul
    at https://dl0vy9.sse.codesandbox.io/index.bundle.js:590:66
    at div
    at https://dl0vy9.sse.codesandbox.io/index.bundle.js:590:66
    at Paper (https://dl0vy9.sse.codesandbox.io/index.bundle.js:26629:83)
    at https://dl0vy9.sse.codesandbox.io/index.bundle.js:590:66
    at div
    at PopperTooltip (https://dl0vy9.sse.codesandbox.io/index.bundle.js:4173:5)
    at Portal (https://dl0vy9.sse.codesandbox.io/index.bundle.js:4521:5)
    at PopperUnstyled (https://dl0vy9.sse.codesandbox.io/index.bundle.js:4291:5)
    at https://dl0vy9.sse.codesandbox.io/index.bundle.js:590:66
    at Popper (https://dl0vy9.sse.codesandbox.io/index.bundle.js:27370:72)
    at https://dl0vy9.sse.codesandbox.io/index.bundle.js:590:66
    at Autocomplete (https://dl0vy9.sse.codesandbox.io/index.bundle.js:8475:83)
    at https://dl0vy9.sse.codesandbox.io/index.bundle.js:590:66
    at AutocompleteInput (https://dl0vy9.sse.codesandbox.io/index.bundle.js:112411:29)
    at ChoicesContextProvider (https://dl0vy9.sse.codesandbox.io/index.bundle.js:98770:23)
    at ResourceContextProvider (https://dl0vy9.sse.codesandbox.io/index.bundle.js:94824:23)
    at ReferenceInput (https://dl0vy9.sse.codesandbox.io/index.bundle.js:114046:26)
    at div
    at https://dl0vy9.sse.codesandbox.io/index.bundle.js:590:66
    at FilterFormInput (https://dl0vy9.sse.codesandbox.io/index.bundle.js:120759:31)
    at form
    at https://dl0vy9.sse.codesandbox.io/index.bundle.js:590:66
    at LabelPrefixContextProvider (https://dl0vy9.sse.codesandbox.io/index.bundle.js:102220:21)
    at FilterFormBase (https://dl0vy9.sse.codesandbox.io/index.bundle.js:120620:27)
    at FormProvider (https://dl0vy9.sse.codesandbox.io/index.bundle.js:173213:13)
    at FilterForm (https://dl0vy9.sse.codesandbox.io/index.bundle.js:120577:31)
    at div
    at https://dl0vy9.sse.codesandbox.io/index.bundle.js:590:66
    at Toolbar (https://dl0vy9.sse.codesandbox.io/index.bundle.js:35179:82)
    at https://dl0vy9.sse.codesandbox.io/index.bundle.js:590:66
    at https://dl0vy9.sse.codesandbox.io/index.bundle.js:118221:25
    at ListView (https://dl0vy9.sse.codesandbox.io/index.bundle.js:167180:79)
    at ListContextProvider (https://dl0vy9.sse.codesandbox.io/index.bundle.js:91919:20)
    at ResourceContextProvider (https://dl0vy9.sse.codesandbox.io/index.bundle.js:94824:23)
    at ListBase (https://dl0vy9.sse.codesandbox.io/index.bundle.js:91766:23)
    at CommentList
    at Routes (https://dl0vy9.sse.codesandbox.io/index.bundle.js:157619:5)
    at ResourceContextProvider (https://dl0vy9.sse.codesandbox.io/index.bundle.js:94824:23)
    at Resource (https://dl0vy9.sse.codesandbox.io/index.bundle.js:94729:24)
    at Routes (https://dl0vy9.sse.codesandbox.io/index.bundle.js:157619:5)
    at ErrorBoundary (https://dl0vy9.sse.codesandbox.io/index.bundle.js:149924:37)
    at div
    at main
    at div
    at div
    at https://dl0vy9.sse.codesandbox.io/index.bundle.js:590:66
    at Layout (https://dl0vy9.sse.codesandbox.io/index.bundle.js:115845:20)
    at __WEBPACK_DEFAULT_EXPORT__
    at div
    at Routes (https://dl0vy9.sse.codesandbox.io/index.bundle.js:157619:5)
    at CoreAdminRoutes (https://dl0vy9.sse.codesandbox.io/index.bundle.js:94590:79)
    at Routes (https://dl0vy9.sse.codesandbox.io/index.bundle.js:157619:5)
    at CoreAdminUI (https://dl0vy9.sse.codesandbox.io/index.bundle.js:94660:20)
    at AdminUI (https://dl0vy9.sse.codesandbox.io/index.bundle.js:104622:27)
    at InnerThemeProvider (https://dl0vy9.sse.codesandbox.io/index.bundle.js:39499:70)
    at ThemeProvider (https://dl0vy9.sse.codesandbox.io/index.bundle.js:39210:5)
    at ThemeProvider (https://dl0vy9.sse.codesandbox.io/index.bundle.js:39519:5)
    at ThemeProvider (https://dl0vy9.sse.codesandbox.io/index.bundle.js:117131:23)
    at ResourceDefinitionContextProvider (https://dl0vy9.sse.codesandbox.io/index.bundle.js:94897:17)
    at NotificationContextProvider (https://dl0vy9.sse.codesandbox.io/index.bundle.js:101099:23)
    at I18nContextProvider (https://dl0vy9.sse.codesandbox.io/index.bundle.js:100562:17)
    at Router (https://dl0vy9.sse.codesandbox.io/index.bundle.js:157553:15)
    at HistoryRouter (https://dl0vy9.sse.codesandbox.io/index.bundle.js:101320:23)
    at InternalRouter (https://dl0vy9.sse.codesandbox.io/index.bundle.js:101240:23)
    at BasenameContextProvider (https://dl0vy9.sse.codesandbox.io/index.bundle.js:101292:23)
    at AdminRouter (https://dl0vy9.sse.codesandbox.io/index.bundle.js:101229:22)
    at QueryClientProvider (https://dl0vy9.sse.codesandbox.io/index.bundle.js:155619:21)
    at StoreContextProvider (https://dl0vy9.sse.codesandbox.io/index.bundle.js:101637:20)
    at CoreAdminContext (https://dl0vy9.sse.codesandbox.io/index.bundle.js:94529:30)
    at AdminContext (https://dl0vy9.sse.codesandbox.io/index.bundle.js:104567:20)
    at Admin (https://dl0vy9.sse.codesandbox.io/index.bundle.js:121296:30)
overrideMethod @ react_devtools_backend.js:4026
printWarning @ react-dom.development.js:67
error @ react-dom.development.js:43
warnOnInvalidKey @ react-dom.development.js:13620
reconcileChildrenArray @ react-dom.development.js:13651
reconcileChildFibers @ react-dom.development.js:14125
reconcileChildren @ react-dom.development.js:16997
updateHostComponent @ react-dom.development.js:17632
beginWork @ react-dom.development.js:19080
beginWork$1 @ react-dom.development.js:23940
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
(анонимная) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
scheduleUpdateOnFiber @ react-dom.development.js:21893
dispatchAction @ react-dom.development.js:16139
(анонимная) @ hooks.js:15
(анонимная) @ hooks.js:50
Объект setTimeout (асинхронный)
(анонимная) @ hooks.js:49
invokePassiveEffectCreate @ react-dom.development.js:23487
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
flushPassiveEffectsImpl @ react-dom.development.js:23574
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
performSyncWorkOnRoot @ react-dom.development.js:22269
(анонимная) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
discreteUpdates$1 @ react-dom.development.js:22420
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889

@antoinefricker antoinefricker self-assigned this Jul 22, 2022
@antoinefricker
Copy link
Contributor

Thanks for the detailed report!

@antoinefricker
Copy link
Contributor

That's an old MUI issue (see here and there, etc.) that can be easily solved in React-Admin. A PR is in the stack.

@BaurinVladislav
Copy link
Author

That's an old MUI issue (see here and there, etc.) that can be easily solved in React-Admin. A PR is in the stack.

Please tell me how me can easily solve the problem in React-Admin. Where to look? In what PR?

@antoinefricker antoinefricker mentioned this issue Jul 22, 2022
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@antoinefricker antoinefricker

Labels
bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix AutocompleteInput generates warning for identical label marmelab/react-admin
3 participants
@djhi @BaurinVladislav @antoinefricker