`Toggle`: doesn't react on changed `checked` due to state changes

[mfranzke]

When trying to use the toggle element with the checked-property (in this case in React), a state depending usage doesn't lead to a change in the checked state of the component itself. Neither does it render correctly when initiated by checked={false}.

[nmerget]

I tested it should work but the event.target.checked isn't correct if you have a controlled component. You need to use !controlled to change the state.

react-dbtoggle.mp4

Snippet:

import "@db-ui/core/dist/css/db-ui-core.vars.css";
import { DbToggle, DbButton } from "@db-ui/react-elements-enterprise";
import { useEffect, useRef, useState } from "react";

const App = () => {
  const ref =
      useRef<HTMLDbToggleElement>(null);
  const [controlled, setControlled] =
      useState<boolean>(true);

  useEffect(() => {
    if (ref) {
      console.log("ref: ", ref.current);
    }
  }, [controlled]);

  return (
    <>
      <span>controlled: {String(controlled)}</span>
      <DbToggle
        ref={ref}
        checked={controlled}
        onDbChange={() => {
          setControlled(!controlled);
        }}
      />
      <DbButton
        onClick={() => {
          setControlled(!controlled);
        }}
      >
        Change controlled
      </DbButton>
    </>
  );
};

export default App;