[Bug]: (Toggle) A component is changing an uncontrolled input to be controlled

Browser

Chrome, Safari, Firefox, Edge

Package version

3.0.748

React version

Description

Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components at input at span at span at span at AbstractSwitch (webpack-internal:///(app-pages-browser)/./node_modules/@cloudscape-design/components/internal/components/abstract-switch/index.js:26:11) at eval (webpack-internal:///(app-pages-browser)/./node_modules/@cloudscape-design/components/toggle/internal.js:26:11) at eval (webpack-internal:///(app-pages-browser)/./node_modules/@cloudscape-design/components/toggle/index.js:14:110) at div at div at div at div at eval (webpack-internal:///(app-pages-browser)/./node_modules/@cloudscape-design/components/grid/internal.js:28:11) at div at div at InternalFormField (webpack-internal:///(app-pages-browser)/./node_modules/@cloudscape-design/components/form-field/internal.js:81:11) at FormField (webpack-internal:///(app-pages-browser)/./node_modules/@cloudscape-design/components/form-field/index.js:25:11) at div at div at eval (webpack-internal:///(app-pages-browser)/./node_modules/@cloudscape-design/components/space-between/internal.js:20:11) at SpaceBetween (webpack-internal:///(app-pages-browser)/./node_modules/@cloudscape-design/components/space-between/index.js:19:11) at div at div at div at InternalContainer (webpack-internal:///(app-pages-browser)/./node_modules/@cloudscape-design/components/container/internal.js:46:11) at InternalContainerAsSubstep (webpack-internal:///(app-pages-browser)/./node_modules/@cloudscape-design/components/container/internal.js:40:134) at AnalyticsFunnelSubStep (webpack-internal:///(app-pages-browser)/./node_modules/@cloudscape-design/components/internal/analytics/components/analytics-funnel.js:372:35) at Container (webpack-internal:///(app-pages-browser)/./node_modules/@cloudscape-design/components/container/index.js:27:11) at div at div at InternalForm (webpack-internal:///(app-pages-browser)/./node_modules/@cloudscape-design/components/form/internal.js:31:11) at WizardForm (webpack-internal:///(app-pages-browser)/./node_modules/@cloudscape-design/components/wizard/wizard-form.js:45:23) at InnerAnalyticsFunnelStep (webpack-internal:///(app-pages-browser)/./node_modules/@cloudscape-design/components/internal/analytics/components/analytics-funnel.js:271:11) at AnalyticsFunnelStep (webpack-internal:///(app-pages-browser)/./node_modules/@cloudscape-design/components/internal/analytics/components/analytics-funnel.js:220:135) at WizardFormWithAnalytics (webpack-internal:///(app-pages-browser)/./node_modules/@cloudscape-design/components/wizard/wizard-form.js:40:121) at div at div at div at InternalWizard (webpack-internal:///(app-pages-browser)/./node_modules/@cloudscape-design/components/wizard/internal.js:46:11) at InnerAnalyticsFunnel (webpack-internal:///(app-pages-browser)/./node_modules/@cloudscape-design/components/internal/analytics/components/analytics-funnel.js:75:11) at AnalyticsFunnel (webpack-internal:///(app-pages-browser)/./node_modules/@cloudscape-design/components/internal/analytics/components/analytics-funnel.js:36:88) at Wizard (webpack-internal:///(app-pages-browser)/./node_modules/@cloudscape-design/components/wizard/index.js:26:11) at SettingsPage (webpack-internal:///(app-pages-browser)/./app/main/settings/page.jsx:31:92) at ClientPageRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/client-page.js:14:11) at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:243:11) at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9) at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11) at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11) at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:349:11) at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11) at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:153:9) at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:228:11) at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:16:44) at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:370:11) at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:243:11) at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9) at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11) at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11) at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:349:11) at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11) at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:153:9) at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:228:11) at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:16:44) at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:370:11) at InnerLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:243:11) at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9) at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11) at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9) at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11) at LoadingBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:349:11) at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11) at InnerScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:153:9) at ScrollAndFocusHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:228:11) at RenderFromTemplateContext (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/render-from-template-context.js:16:44) at OuterLayoutRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/layout-router.js:370:11) at div at Main (webpack-internal:///(app-pages-browser)/./node_modules/@cloudscape-design/components/app-layout/visual-refresh/main.js:25:366) at main at Layout (webpack-internal:///(app-pages-browser)/./node_modules/@cloudscape-design/components/app-layout/visual-refresh/layout.js:26:19) at SplitPanelProvider (webpack-internal:///(app-pages-browser)/./node_modules/@cloudscape-design/components/app-layout/split-panel/provider.js:19:11) at SplitPanel (webpack-internal:///(app-pages-browser)/./node_modules/@cloudscape-design/components/app-layout/visual-refresh/split-panel.js:27:23) at eval (webpack-internal:///(app-pages-browser)/./node_modules/@cloudscape-design/components/app-layout/visual-refresh/context.js:59:13) at AppLayout at div at eval (webpack-internal:///(app-pages-browser)/./node_modules/@cloudscape-design/components/app-layout/index.js:37:11) at MainAppLayout (webpack-internal:///(app-pages-browser)/./components/MainAppLayout.jsx:34:11) at PersistGate (webpack-internal:///(app-pages-browser)/./node_modules/redux-persist/es/integration/react.js:39:5) at Provider (webpack-internal:///(app-pages-browser)/./node_modules/react-redux/dist/react-redux.mjs:1053:3) at SessionProvider (webpack-internal:///(app-pages-browser)/./node_modules/next-auth/react/index.js:455:24) at SessionStoreProvider (webpack-internal:///(app-pages-browser)/./components/SessionStoreProvider.jsx:17:11) at BailoutToCSR (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/shared/lib/lazy-dynamic/dynamic-bailout-to-csr.js:13:11) at Suspense at LoadableComponent (Server) at body at html at RootLayout (Server) at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9) at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11) at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9) at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11) at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:11) at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/ReactDevOverlay.js:87:9) at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/hot-reloader-client.js:321:11) at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:207:11) at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:113:9) at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11) at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:585:13) at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:112:27) at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:117:11)

Source code

  <FormField label="Notifiche">
      <Toggle
          onChange={({detail}) =>
              setValues({...values, loginAlert: detail.checked})
          }
          checked={values.loginAlert}
      >
          Abilita le notifiche di accesso all'applicazione.
      </Toggle>
  </FormField>

Reproduction

WRITE NORMAL FUNCTION COMPONENT TO REPRODUCE

Code of Conduct

[X] I agree to follow this project's Code of Conduct
[X] I checked the current issues for duplicate problems

cloudscape-design / components