IxToggle checked attribute value ignored by component

[CptGeo]

What happened?

I noticed that checked attribute of IxToggle component completely ignores any value assigned to it, except for when the element loads for the first time.

That means, that if we for example have a stateful boolean variable of which the value is determined by a successful or failed API request, we are not able to set the checked attribute accordingly.

In the provided code, you can see the simplest way to reproduce this issue, meaning giving an explicit false value to the checked attribute. As you will notice the value is completely ignored (except for when the component loads initially).

What type of frontend frameware are you seeing the problem on?

React

Which version of iX do you use?

v1.4.1

Code to produce this issue.

import { IxToggle } from "@siemens/ix-react";
// ...
<IxToggle checked={false}/>

[danielleroux]

Can you please provide more detailed steps to reproduce.

I tested it with the following code: https://stackblitz.com/edit/angular-uqxzsw?file=src/toggle.tsx

async function APICall(v: boolean) {
  return new Promise<boolean>((r) => setTimeout(() => r(!v), 2000));
}

export default () => {
  const [toggle, setToggle] = useState(false);

  useEffect(() => {
    makeSomeApiCall();
  }, [setToggle]);

  const makeSomeApiCall = async () => {
    const result = await APICall(toggle);
    setToggle(result);
  };

  return (
    <>
      <IxButton onClick={makeSomeApiCall}>Toggle (timeout 2s)</IxButton>
      <IxToggle checked={toggle} />
    </>
  );
};

[CptGeo]

It seems like you are right and the above code actually sets the checked attribute. There might be a more specific issue related to my codebase.
I will try to isolate the bug (if it really exists) and reopen this issue if it makes sense.

For now I will just close it. Thank you!

[robert-wettstaedt]

I think there is still a controlling issue of the component's state.

Yes @danielleroux your example shows that you can change the state dynamically. But at the same time the component still ignores the checked prop if you click on the toggle. In the example app, after the initial timeout the state gets changed to checked = true, but clicking on the toggle changes its internal state to a different value.

Basically what I am saying is: Given the code

<IxToggle checked={true} />

The toggle state should not change by clicking on it. As long as checked = true the toggle should stay checked. The iX Checkbox component behaves this way, but not the IxToggle component. This applies to iX version 1.x.x and 2.x.x.

[robert-wettstaedt]

@danielleroux @CptGeo do you agree on reopening this issue because of my aforementioned comment? If not I will need to open a new issue.

[CptGeo]

@danielleroux @CptGeo do you agree on reopening this issue because of my aforementioned comment? If not I will need to open a new issue.

If @danielleroux is fine with reopening this instead of creating a new issue, I am also fine with it.

[nuke-ellington]

@robert-wettstaedt @CptGeo We will have another look at this.

[github-actions[bot]]

🤖 Hello @CptGeo

Your issue will be analyzed and is part of our internal workflow. To get informed about our workflow please checkout the Contributing Guidelines

JIRA: IX-1111